/*  weights: 400, 700
    paragraph font:15px
*/
@font-face {
    font-family: overpass;
    src: url(./fonts/Overpass/Overpass-VariableFont_wght.ttf);
}
*{
    box-sizing:border-box;
}
body{
    font-family: overpass;
    background-color: var(--Very-Dark-Blue);
    color:var(--Light-Grey);
    font-size: 15px;
}
:root{
    --Orange: hsl(25, 97%, 53%);
    --White: hsl(0, 0%, 100%);
    --Light-Grey: hsl(217, 12%, 63%);
    --Dark-Blue: hsl(213, 19%, 18%);
    --Very-Dark-Blue: hsl(216, 12%, 8%);

    --button-background:#272e38;
    --form-background:#202731;
}
.hidden{
    display: none;
}
.mainDiv{
    display:flex;
    justify-content: center;
    align-items: center;
    height:90vh;
}
.displayWindow{
    height:375px;
    width:375px;
    background-color: var(--form-background);
    border-radius: 1rem;
    padding:1.5rem;
}
/* form{
} */
.starDiv{
    background-color: var(--button-background);
    border-radius: 50%;
    height:45px;
    aspect-ratio: 1/1;
    display:flex;
    justify-content: center;
    align-items: center;
}
#star{
    margin:1rem 0 1rem 0;
}
.heading{
    color:var(--White);
    font-size:x-large;
    margin:1rem 0 1rem 0;
}
.ratingDiv{
    display:flex;
    justify-content: space-between;
    margin: 1rem 0 1rem 0;
}
button{
    height:3rem;
}
.roundButton{
    /* height:2.5rem; */
    aspect-ratio: 1/1;
    /* margin:0.5rem; */
    border-radius:50%;
    border:none;
    background-color: var(--button-background);
    color:var(--Light-Grey);
}
.roundButton:hover{
    background-color: var(--Orange);
    color:var(--Very-Dark-Blue)
}
.clicked{
    background-color: var(--White);
    color:var(--Very-Dark-Blue);
}
#submitBtn{
    margin:1rem 0 1rem 0;
    background-color: var(--Orange);
    border:none;
    border-radius: 1.5rem;
    width:100%;
    /* height:2rem; */
    font-size: 15px;
}
#submitBtn:hover{
    background-color: var(--White);
    color: var(--Dark-Blue);
}
.thankYou{
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    /* align-items: center; */
    text-align: center;
}
.thankImgDiv{
    display:flex;
    justify-content: center;
}
.thankImg{
    aspect-ratio: 3 / 2;
    width:150px;
    margin: 1rem 0 1rem 0;
}
.outerRatingSpan{
    color:var(--Orange);
    background-color: var(--button-background);
    padding:0.5rem;
    text-align: center;
    border-radius: 1rem;
    margin:1rem 0 0 0;
}
.thankYou .heading{
    margin:0 0 0 0;
}
.thankYou p{
    margin:0 0 0 0;;
}