@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Elms+Sans:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Quicksand:wght@300..700&display=swap');
:root{
    --background-image:"pattern11.jfif";
    --main-font:"Quicksand";
    --secondry-font:"Elms Sans"
    --font-color:rgb(52, 2, 29);
    --secondry-font-color:#000;
    --box-sizzing:15rem;
}
html{
    font-size:61.5%;
}
body{
    padding:0%;
    margin:0%;
    box-sizing: border-box;
    background-image: url(pattern11.jfif);
    display:flex;
    flex-direction:column;
    font-family:var(--main-font);
    min-height:100vh;
    
}
header{
    background-color: rgba(255, 255, 255, 0.354);
    backdrop-filter:blur(20px);
    padding-top:0rem;
    padding-left:1rem;
    padding-right:1rem;
    display: flex;
    flex-direction:row;
    justify-content: flex-start;
    width:100%;
    margin:0%;
}
.main{
    background-color: rgba(255, 255, 255, 0.368);
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    padding:5rem;
    padding-top:1rem;
    justify-self: center;
    align-self: center;
    height:100%;
    margin-top:auto;
    margin-bottom: auto;
    box-shadow: 0 12px 35px rgba(214, 154, 180, 0.28),
0 4px 15px rgba(255,255,255,0.35) ;
}
.CellsBox{
    display:grid;
    grid-template-columns: var(--box-sizzing) var(--box-sizzing) var(--box-sizzing);
    grid-template-rows: var(--box-sizzing) var(--box-sizzing) var(--box-sizzing);

}
.Box{
    width:var(--box-sizzing);
    height:var(--box-sizzing);
    background-color: rgba(255, 236, 239, 0);
    border: 0.2rem solid #8E5A72;
    text-align: center;
    justify-content: center;
    cursor: pointer;
    font-size: 7rem;
    color:#4A2636;
    display: flex;
    align-items: center;
}
.Box3{
    border-top-right-radius:0.5rem;
}
.Box9{
    border-bottom-right-radius:0.5rem;
}
.Box7{
    border-bottom-left-radius:0.5rem;

}
.Box1{
    border-top-left-radius:0.5rem;
}
.main:hover{
    transform: translateY(-10px);
    transition-duration: 0.2s;
}
button{
    background: transparent;
    font-family: var(--main-font);
    border:none;
    cursor:pointer;
    padding:0%;
    margin:0%;
    align-self: flex-end;
    font-size: 1.7rem;
    margin-top:1rem;
}
button:hover{
    transform: translateY(-0.5rem);
}
h3{
    font-size: 1.7rem;
    align-self: flex-start;
    margin-top: 0;
}
.stute{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    width:100%;
}
.flower{
    display: inline-block;
    transition-duration: 0.5s;
}
.flower:hover{
    transform: rotate(40deg);
}
.flower2{
    transform: scale(1.5) rotate(40deg);
}
@media (max-width:1200px){
    html{
        font-size:58%;
    }
}
@media (max-width:992px){
    html{
        font-size:56%;
    }
}
@media(max-width:764px){
    html{
        font-size:52%
    }
}
@media(max-width:576px){
    html{
        font-size:50%
    }
}
@media(max-width:400px){
    html{
        font-size:48%
    }
}
@media(max-width:320px){
    html{
        font-size:34%
    }

}