*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: rgb(216, 153, 129);
}

#total{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 3%;
}


#top{
    text-align: center;
    width : 100%;
    height : 10%;
    font-size :3rem;
    margin-bottom: 5px;
    /* color :rgb(53, 62, 169); */
    color : darkcyan;
    font-weight: bolder;
}



#boxes{
    display: flex;
    margin-left: 2rem;
    column-gap: 1.5%;
}

#hints{
    width : 12rem;
    height : 30rem;
    float : left;
    border : black 1px solid;
    opacity : 0;
}



#hint-title{
    margin-top : 10px;
    margin-left : 55px;
    font-size : 30px;
    color : darkcyan;
    font-weight: bolder;
}

.hintbtns{
    display: flex;
    flex-direction: column;
    margin-top: 1.3rem;
    margin-left: 3.5rem;
    height: 1.3rem;
    width  : 5rem;
    padding-left: 0.6rem;
    color: black;
    border-radius: 1rem;
    align-items: center;
    color: crimson;

}

.hintbtns:hover{
    cursor: pointer;
    color: white;
    background-color: cornflowerblue;
}

#grid{
    width : 34rem;
    height : 13rem;
    float : right;
    display: flex;
    flex-direction : column;
    /* color: yellow; */
}

.grid-row{
    display: flex;
    flex-direction: row;
}

#rulesandregulations{
    margin-left : .2rem;
    width : 18rem;
    height  : 13rem;
    /* border: 1px solid black; */
    display: flex;
    flex-direction: column;
    font-weight: bold ;
    /* color: yellow; */
    color: crimson;

}


#rulesandregulations #heading{
    font-size : 2rem;
    color : darkcyan;
    margin-top : 1rem;
    margin-bottom: 2rem;
    text-align: center;
}

.points{
    margin-left : 1rem;
    margin-bottom: 1rem;
    margin-right: .5rem;
    line-height: 1.2rem;     
}



#wishes{
    margin-left : 6rem;
}

.btns{
    width : 2rem;
    height : 2rem;
    float : left;
    border : none;
    border-radius: .2rem;
    border : .1rem solid;
    border-color: rgb(0,0,0,.6);
    font-size : 1.5rem;
    text-align: center;
    cursor: pointer;   
    margin-left: .5rem;
    margin-top : .5rem;
}


#buttons{
    margin-top : 12rem;
    margin-left : 3rem;
    column-gap: 1rem;
    margin-right: 3rem;   
    display: flex; 
    float : left;
    flex-direction: column;
    row-gap: 2rem;
}

.ssc{
    color : crimson;
    border-radius: 1rem;
    width: 4rem;
}

.ssc:hover{
    background-color: cornflowerblue;
    cursor: pointer;
    color: antiquewhite;

}



#onehint{
    margin-left : 15rem;
    margin-top : 1.2rem;
    margin-bottom : 1.2rem;
    opacity : 0;
    column-gap: .6rem;
    float: left;
    /* color: crimson; */

}


#allhint{
    margin-left : 15rem;
    margin-top : 1.2rem;
    margin-bottom : 1.2rem;
    opacity: 0;
    float : left;
    column-gap: .4rem;
    display: flex;
    flex-direction : column;
    /* color: crimson; */

}

#p{
    margin-bottom: 1rem;
    color: crimson;
}