@font-face {
    font-family: "Coolvetica";
    src: url("../../others/Coolvetica\ Rg.otf");
}

html, body{
    padding: 0; margin: 0;
    font-family: "Coolvetica";
}
header{
    width: 100dvw; height: 15dvh; padding: 10px; box-sizing: border-box;
    display: flex; flex-direction: row; justify-content: space-between;
}
header > h1{
    margin: 0;
    font-size: 3rem;
    align-self: center;
}
header > div{
    height: 100%; border-radius: 10px;
    overflow: hidden;

}

main {
    display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(6, 1fr); grid-column-gap: 7px; grid-row-gap: 7px;
    height: 85dvh; width: 100dvw; padding: 10px; box-sizing: border-box;
}
main > div{
    border: 2px solid black;
    border-radius: 10px;
    transition: 1s;
    overflow: hidden;
}

/* div 1 date */
.div1 { 
    grid-area: 1 / 1 / 2 / 4; 
    display: flex; flex-direction: row; justify-content: center; align-items: center;
}
.div1 > div{
    width: 45%; height: 100%;
    display: flex; flex-direction: column; justify-content: space-evenly; align-items: center;
}
.div1 > hr{
    border: black solid 1px; height: 80%; box-sizing: border-box;
}
.div1 label{
    font-size: 1.5rem;
}
.div1 input{
    width: 70%;
}

/* div 2 map */
.div2 { grid-area: 1 / 4 / 3 / 7; height: 100%;}
#map{
    width: 100%; height: 100%;
}

/* Div 3 temp graph */
.div3 { grid-area: 3 / 4 / 5 / 7; }
.div3 > div:first-of-type,.div5 > div:first-of-type{
    width: 90%;height: 90%;
    display: none; justify-content: center; align-items: center; justify-self: center;
}
#tempGraphContainer, #snowGraphContainer{
    height: 90%; width: 100%; position: relative;
}


.div4 { grid-area: 5 / 4 / 7 / 7; }
.div5 { grid-area: 2 / 1 / 7 / 4; }





/* Autre */
h2{
    height: 10%; margin: 0; padding: 0;
    text-align: center;
}
#retractButton{
    z-index: 990;
    width: 5%;height: 13%;
    position: relative; top: -3dvh; left: 24dvw;
}
#retractButton button{
    width: 100%; height: 100%;
}
#retractButton span{
    transform: rotate(90deg);
}

.recapInfo{
    font-weight: bold;
    letter-spacing: 0.1dvw;
}