body {
    background-image: url("Images/grayBG.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    position: relative;
    margin: 0;
}

#main_container {
    margin: 0;
    position: absolute;
    display: grid;
    background-color: white;
    left: 20vw;
    width: 80vw;
}

.settings_container {
    position: absolute;
    width: 20vw;
    height: 100vh;
    animation: changeSettingsBackgroundColor 8s linear infinite alternate;
    background-color: rgb(120, 120, 120);
}

#brush_input {
    position: absolute;
    top: 3vh;
    left: 13vw;
    height: 5vh;
    width: 5vw;
    background-color: transparent;
    border: none;
}

#brush_txt {
    top: 3vh;
    left: 1vw;
    position: absolute;
    color: white;
}

#line {
    position: absolute;
    width: 20vw;
    height: 0.5vh;
    background-color: brown;
    border: none;
    top: 9vh;
}

#pixels_settings {
    position: absolute;
    left: 2.25vw;
    top: 15vh;
    height: 33vh;
    width: 15vw;
    background-color: rgba(200, 108, 108, 0.5);
    border-radius: 10px;
}

#pixels_head {
    position: absolute;
    left: -3vw;
    color: red;
    font-size: 3vw;
    font-family: sans-serif;
    text-shadow: -2px 2px rgb(0,0,0);
    transform: rotate(-45deg);
}

.inputs {
    position: absolute;
    width: 4.2vw;
    height: 3vh;
    left: 10.5vw;
    border-radius: 12px;
    font-size: 1.5vw;
}

#board_size_input {
    top: 19.2vh;
}

#max_size_txt {
    color: rgb(0, 255, 0);
    font-size: 1vw;
    left: 9.7vw;
    top: 16.5vh;
}

#pixel_size_input {
    width: 5.2vw;
    top: 27.7vh;
    left: 9.5vw;
}


.labels {
    position: absolute;
    font-size: 2vw;
    font-family: Arial;
    color: yellow;
}

#board_size_txt {
    top: 18.5vh;
}

#pixel_size_txt {
    top: 27vh;
}


#border_settings {
    position: absolute;
    left: 2.25vw;
    top: 54.5vh;
    height: 34vh;
    width: 15vw;
    background-color: rgba(108, 108, 200, 0.5);
    border-radius: 10px;
}

#border_head {
    position: absolute;
    left: -3vw;
    top: -3vh;
    color: blue;
    font-size: 2.5vw;
    font-family: sans-serif;
    text-shadow: -2px 2px rgb(0,0,0);
    transform: rotate(-45deg);
}

#show_border_input {
    position: absolute;
    left: 11.5vw;
    top: 14vh;
}

#show_border_txt {
    position: absolute;
    top: 13vh;
}

#border_size {
    position: absolute;
    top: 21vh;
    height: 8vh;
    width: 15vw;
}

#border_size_input {
    position: absolute;
    left: 11.5vw;
    top: 1vh;
    width: 2.5vw;
}

#border_size_txt {
    position: absolute;
}

#border_color {
    position: absolute;
    top: 29vh;
    height: 8vh;
    width: 15vw;
    z-index: 10;
}

#border_color_input {
    position: absolute;
    left: 12vw;
    top: 1vh;
    width: 2.8vw;
    height: 3.5vh;
    background-color: transparent;
    border: none;
}

#border_color_txt {
    position: absolute;
}


#save_button {
    position: absolute;
    top: 90vh;
    left: 2.25vw;
    height: 7.5vh;
    width: 15vw;
    font-size: 2vw;
    color: black;
    text-shadow: -2px 2px rgb(255, 255, 255);
    background-color: yellow;
    border: 3px solid rgb(189, 189, 4);
    border-radius: 15px;
    cursor: pointer;
}

#save_button:hover {
    top: 89.525vh;
    left: 1.5vw;
    height: 8.25vh;
    width: 16.5vw;
    font-size: 2.2vw;
    border: 3.3px solid rgb(144, 144, 9);
    background-color: rgb(203, 203, 23);
}

#close_button {
    position: absolute;
    left: 19vw;
    top: 42.5vh;
    height: 15vh;
    width: 0.8vw;
    border: 2px solid rgb(0, 255, 0);
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    color: black;
    font-size: 1.3vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: green;
    cursor: pointer;
}

#close_button:hover {
    background-color: rgb(0, 100, 0);
    border: 2px solid rgb(1, 193, 1);
}

.pixels {
    background-color: white;
    cursor: pointer;
    margin: 0;
    box-sizing: border-box;
}

.close_settings_container {
    animation: closeSettingsContainer 1s ease 1;
}

.open_settings_container {
    animation: openSettingsContainer 1s ease 1;
}

.close_main_container {
    animation: closeMainContainer 1s ease 1;
}

.open_main_container {
    animation: openMainContainer 1s ease 1;
}

.blur_container {
    position: absolute;
    top: 20vh;
    height: 14vh;
    width: 15vw;
    background-color: rgba(72, 72, 72, 0.7);
    z-index: 10;
}

@keyframes changeSettingsBackgroundColor {
    0% {
        background-color: rgb(120, 120, 120);
    } 100% {
        background-color: rgb(78, 78, 78);
    }
}

@keyframes closeSettingsContainer {
    0% {
        left: 0;
    } 100% {
        left: -19vw;
    }
}

@keyframes openSettingsContainer {
    0% {
        left: -19vw;
    } 100% {
        left: 0;
    }
}

@keyframes closeMainContainer {
    0% {
        left: 20vw;
    } 100% {
        left: 1vw;
    }
}

@keyframes openMainContainer {
    0% {
        left: 1vw;
    } 100% {
        left: 20vw;
    }
}

/* remove arrows from every number input */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}