*{
    box-sizing: border-box;
}

.rk-title-font{
    display: block;
    margin: 5px auto 20px;
}


body{
    background-color:#fbe103;
    text-align: center;
    font-family: 'Nunito', sans-serif;
}


.turnMessage{
    font-size: 30px;
    margin: 30px;
    color:rgb(46, 33, 33);
}

.tiles {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 300px;
    height: 300px;
    margin: 0 auto;
    gap: 1px; 
    background-color: black;
    border: 2px solid black;

}

.tiles div {
    border: 2px solid black;
    border-radius: 20px;
    text-align: center;
    align-items: center;
    height: 100%;
    background-color: #fbe103;
}

.pOne {
    background-image: url(https://static-s.aa-cdn.net/img/ios/1151764267/35b26ed33b6b735bab25700fb3a8308e?v=1);
    background-size: cover;
    background-position: center;
    
}

.pTwo {
    background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTT2S7SdvLB0E1cMAb3mUs50PV585aDDUvTYA&usqp=CAU);
    background-size: cover;
    background-position: center;
}

.resultMessage {
    font-size: 30px;
    margin: 20px 30px 10px 30px;
    color: rgb(46, 33, 33);
}

.celebratory-bear1, .celebratory-bear2, .drawbears {
    width: 200px;

}

.reset {
    border: 2px solid black;
    height: 50px;
    width: 200px;
    background-color: rgb(46, 33, 33);
    color: white;
    font-family: 'Nunito', sans-serif;
    font-size: 25px;
    margin: 10px auto;
    border-radius: 20px;
}

.reset:hover{
    cursor: pointer;
}

.reset:active {
    transform: translateY(1px);
}

.bottom-left-bear{
    display: block;
    width: 50px;
    position: absolute;
    bottom: 0px;
    
}

.bottom-left-bear:hover {
    cursor: pointer;
}

.sig{
    position: absolute;
    bottom: 0px;
    right: 2px;
    margin: 0px;
    color: #583d32;
}

.hidden{
    display: none;
}

.musictxt1 {
    position: absolute;
    bottom: 45px;
    margin: 0 33px;
    font-size: 35px;
    color: #583d32;
}


.musictxt2 {
    position: absolute;
    bottom: 53px;
    margin: 0 50px;
    font-size: 35px;
    color: #583d32;
}

.pause {
    position: absolute;
    bottom: 10px;
    left: 60px;
    margin: 0;
    color: #583d32;
    background-color: #f8f0a5;
    border: 1px solid #583d32;
    border-radius: 50%;
    height: 25px;
    width: 25px;
    text-align: center;
}

a {
    text-decoration: none;
    color: #583d32;
}

.pause:hover{
    cursor: pointer;
}

.sgmode, .rkmode {
    position: absolute;
    right: 10px;
    border: 2px solid black;
    height: 30px;
    width: 150px;
    background-color: rgb(46, 33, 33);
    color: white;
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
    border-radius: 10px;
}


.sgmode, .rkmode:hover {
    cursor: pointer;
}    

.sgtheme {
    background-color: white;
    font-family: 'Sansita Swashed', cursive;

}

.sg-title-font {
    color: pink;
    font-size: 40px;
    margin: 0 auto;
}

.sgtheme .tiles {
    background-color: #d5ebf8;
    border: 2px solid #a1d4f1;
}

.sgtheme .tiles div{
    background-color: white;
    border: 2px solid #a1d4f1;
}

.sgtheme button {
    background-color: #a1d4f1;
    border: 2px solid #93bbd3;
    font-family: 'Sansita Swashed', cursive;

}

.sgtheme .turnMessage {
    color: pink;
    margin: 25px;
}

.sgtheme .resultMessage {
    color: pink;
}

.sg-logo{
    width: 550px;
    height: 180px;
    
}

.sgtheme .pause {
    background-color: pink;
}

.sgtheme .sig {
    color: pink;
}

.sgtheme a{
    color: pink;
}

.sgtheme .pOne {
    background-image: url(pictures/38c1abfc672075e761edebcc37be041e--kawaii-sushi-kawaii-art.jpg);
}

.sgtheme .pTwo {
    background-image: url(pictures/smk\ p1.jpeg);
}


.sgtheme .reset {
    height: 50px;
    width: 200px;
    font-size: 25px;
    margin: 10px auto;
    border-radius: 20px;
    background-color: #a1d4f1;
    border: 2px solid #93bbd3;
    font-family: 'Sansita Swashed', cursive;
}

.sgtheme .reset, .sgtheme .pause:hover{
    cursor: pointer;
}

.sgtheme .reset:active{
    transform: translateY(1px);
}

.resultImage {
    background-repeat:no-repeat;
    background-position: center;
    /* background-size: 200px 200px; */
    height: 200px;
}

.win1 {
    background-image: url(https://i.imgur.com/ipDXVQv.gif);
}

.win2 {
    background-image: url(https://i.imgur.com/bVo7JYK.gif);
    background-size: 247px 200px;
}

.draw {
    background-image: url(pictures/draw.png);
    background-size: 217px 200px; 
}

.sgtheme .win1{
    background-image: url(pictures/2fe138f45b7450fc36ac87daa290e081.jpg);
    

}

.sgtheme .win2{
    background-image: url(pictures/smk\ win.png);


}

.sgtheme .draw{
    background-image: url(pictures/smkdraw.gif);

}