/*
This file is part of Mandelbrot Explorer.
Mandelbrot Explorer is free software: you can redistribute it and/or modify it under the terms of the GNU General Public
License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

Mandelbrot Explorer is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied
warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with Mandelbrot Explorer. If not, see <https://www.gnu.org/licenses/>.
*/

/* Import font */

@font-face {
    font-family: "Noto Sans";
    src: url("NotoSans-Regular-subset.ttf") format("truetype");
    font-style: normal;
}

/* Global */

html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    overscroll-behavior-y: contain;
    height: 100%;
    width: 100%;
    font-family: "Noto Sans", sans-serif;
}

/* By type */

canvas {
    display: block;
    height: 100%;
    width: 100%;
}

span {
    color: rgb(240, 240, 240);
}

label {
    font-size: 1.1em;
    color: rgb(240, 240, 240);
}

button svg {
    vertical-align: middle;
    width: 100%;
    height: 100%;
}

/* By class */

.panel_row {
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.right_aligned_buttons {
    display: inline-block;
    position: absolute;
    right: 10px;
}

.flex_fill {
    flex: 1;
}

/* By ID */

#control_panel_wrapper {
    position: absolute;
}

#control_panel{
    padding: 10px 10px;
    background-color: rgba(30, 30, 30, 0.96);
    border-radius: 0 0 20px 0;
    line-height: 1.2em;
    max-width: 30em;
}

#control_panel > :first-child {
    margin-top: 0px;
}

#control_panel > :last-child {
    margin-bottom: 0px;
}

#show_button {
    margin-top: 8px;
    margin-left: 8px;
}

#fs_icon {
    padding: 0;
    text-align: center;
}

/* Buttons */

button {
    font-size: 1em;
    font-family: "Noto Sans", sans-serif;
    border-radius: 9px;
    background-color: #323234;
    border: #525254 solid 2px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-right: 10px;
    padding-left: 10px;
    color: #FAFAFA;
    margin: 0.1em;
}

button:hover {
    background-color: #4A4A4A;
}

button:active {
    background-color: #626262;
}

/* Inputs */

input[type="number"] {
    font-size: 1em;
    width: 13em;
    border-radius: 8px;
    padding: 2px 6px;
    margin-left: 5px;
    outline: none;
    border: #525254 solid 2px;
    background-color: #323234;
    color: #FAFAFA;
    font-family: "Noto Sans", sans-serif;
}

input[type="number"]:focus {
    border: rgb(25, 118, 210) solid 2px;
}

input[type="number"]:disabled {
    background-color: #202020;
    color: #606060;
}