*{
    box-sizing: border-box;
}

:root{
    font-family: 'Open Sans', sans-serif;
    --headerColor: #3c3c3c;
    --hoverColor: #014142;
    --optionColor: #dcedd5;
    --hiddenMenuColor: #2b2b2b;
}

html, body{
    height: 100%;
    width: 100%;
}

/* set some my default styles */

label{font-size: .9rem}

a{
    text-decoration: none;
    background-color: var(--optionColor);
    color: #000000;
}

/* actual styling the site */

header{
    z-index: 100;
    display: flex;
    align-items: center;
    width: 100%;
    height: 8vh;
    position: fixed;
    top: 0;
    background-color: var(--headerColor);
    color: #fff;
    font-size: 1.3rem;
}

header ul{
    list-style-type: none;
    display: flex;
    width: 100%;
    padding: 0 5vw;
}

header ul li{
    position: relative;
    width: 5vh;
    height: 5vh;
    border-radius: 50%; 
    margin-right: 5vh;
}

/* --- styling the hidden slide options --- */

/* define a color of the btns in nav */ 
header button{background-color: var(--optionColor)}

/* single button (not li!) in the nav */
header ul .option-btn,
header ul .click-option-btn,
header ul .save-img-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: inherit;
    height: inherit;
    border: none;
    border-radius: 50%; 
    transition: all .4s ease-in-out;
}

header ul .option-btn:hover,
.option-active,
header ul .click-option-btn:hover,
header ul .save-img-btn:hover{
    cursor: pointer;
    background-color: var(--hoverColor);
}

/* hidden option section */
header ul .option{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 6.5vh;
    left: 0;
    width: 200px;
    height: 240px;
    padding: 10px 0;
    transform: scale(1, 0);
    transform-origin: top;
    transition: transform 400ms ease-in-out;
    background-color: var(--hiddenMenuColor);
}

/* header of hidden section */
header ul .option-header{
    width: 90%;
    text-align: center;
    font-size: .83rem;
    padding-bottom: 5px;
    border-bottom: 1px dashed #fff;
}

/* styling the color preview divs */
header ul .result-color{
    width: 80%;
    height: 20px;
    margin: 5px auto;
    border: 1px solid var(--optionColor);
    border-radius: 6px; 
}

/* styling the numeric preview divs */
header ul .result-number{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 25px;
    background-color: var(--optionColor);
    border-radius: 6px;
    font-size: .7rem;
    color: black;
}

/* --- CANVASES --- */

canvas{
    display: block;
    position: absolute;
    left: 0;
}

.bg-canvas{z-index: 0} /* background color */
.main-canvas{z-index: 1}

/* canvas to show the size of the paint */
.paint-size-canvas{
    box-sizing: content-box;
    position: static;
    width: 60px;
    height: 60px;
    background-color: #fff;
    border: 5px solid #fff;
    border-radius: 6px;
}