@font-face {
    src: url(Roboto-Light.ttf);
    font-family: Roboto-Light;
    
}
body, html {
    overflow: hidden;
}

body{
    margin: 0px;
    padding: 0px;
    background-image: url(1000_F_442973001_lAr1HpFLUVZLsDMlIMBU1VgLL0ITfiXX-transformed.jpeg);
    background-repeat: no-repeat; 
    background-position: center;
    background-size: cover;
    font-family: Roboto-Light;
}
#header{
    display: flex;
    justify-content: center;
    position: relative;
    animation-name: fadeIn;
    animation-duration: 0.5s;
}
/*heading*/
#heading{
    text-align: center;
    margin: 50px;
    
    font-size: 3em;
    padding: 0px;
    font-weight: bolder; 
    color: #FFFFFF;
    text-shadow: 0 0 10px #D22060, 0 0 20px #D22060, 0 0 30px #D22060; 
}
#newgame{
    position: absolute;
    top:20px;
    right: 20px;
    height: 55px;
    width: 175px;
    color:#FFFFFF;
    border:solid 1px ;
    border-radius: 25px;
    background-image: linear-gradient(144deg,#AF40FF, #5B42F3 50%,#00DDEB);
    cursor: pointer;
    display: none;
    animation-name: fadeIn;
    animation-duration: 0.5s;
}
/*selection page*/
#option{
    font-size: 2em;
    font-weight: bolder; 
    color: #ffff;
    text-shadow: 0 0 10px #007bff, 0 0 20px #007bff, 0 0 30px #007bff;
    margin-bottom: 0px; 
}
#selectionPage{
    display: grid;
    place-items: center;
    margin:0px;
    padding: 0px;
    animation-name: fadeIn;
    animation-duration: 0.5s;
}
#selectionElements{
    display: grid;
    place-items: center;
    border-radius: 10px;
    border: 0.2px solid rgba(201, 201, 201, 0.664);
    background: transparent;
    backdrop-filter: blur(3px);
    
    
}
#selectionContainer{
    height: 73vh;
    width: 70vw;  
}
.selection{
    margin: 50px;
    width: 300px;
    height: 10px; 
    padding: 30px 30px 40px 20px;
    background-color: #007bff; 
    color: white;
    border: none;
    position: relative;
    clip-path: polygon(95% 18%, 30% 150%,65% 40%,300% 500%, 0% 70%, 20% 20%);
    cursor: pointer;
    font-size: 16px;
    background-image: linear-gradient(144deg,#AF40FF, #5B42F3 50%,#00DDEB);
    border: 0;
    border-radius: 8px;
    box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
    box-sizing: border-box;
    color: #FFFFFF;
    display: flex;
    font-family: Phantomsans, sans-serif;
    justify-content: center;
    line-height: 1em;
    max-width: 100%;
    min-width: 140px;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;
    cursor: pointer;
    }
.selection:active,
.selection:hover {
  outline: 0;
}

.selection span {
  background-color: rgb(5, 6, 45);
  padding: 16px 24px;
  border-radius: 6px;
  width: 100%;
  height: 100%;
  transition: 300ms;
}

.selection:hover span {
  background: none;
}

/*game board*/
#gameBoard{
display: grid;
place-items: center;  
display: none;
animation-name: fadeIn;
animation-duration: 0.5s;
}

#gameBoardContainer{
    display: flex;
    justify-content: center;
    align-content: center;
    border-radius: 10px;
    border: 0.2px solid rgba(201, 201, 201, 0.664);
    background: transparent;
    backdrop-filter: blur(3px);
    display: grid;
    grid-template-rows: repeat(3,100px);
    grid-template-columns: repeat(3,100px);
    height: 70vh;
    width: 70vw;
    place-items: center;

    }
.box{
    border: 1px solid rgb(255, 253, 253);
    background-color: rgba(255, 255, 255, 0.062);
    backdrop-filter: blur(50px);
    height: 100px;
    width: 100px;
    cursor: pointer;
    font-size: 5em;
    text-align: center;
    color: #ffff;
}
#msg{
    font-size: 2.5em;
    display: flex;
    justify-content: space-evenly;
    color: #FFFFFF;
    text-shadow: 0 0 10px #20d220, 0 0 20px #20d220, 0 0 30px #20d220; 
    display: none;
    animation-name: fadeIn;
    animation-duration: 0.5s;
}
#resultcontainer{
    display: flex;
    align-items: center;
    justify-content: center;

}
#result{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: relative;
    border-radius: 25px;
    height: 70vh;
    width: 80vw;
    border: 2px,solid,black;
    background-color: rgba(255, 255, 255, 0.062);
    color: #FFFFFF;
    text-shadow: 0 0 10px #20d220, 0 0 20px #20d220, 0 0 30px #20d220;
    font-size: 5em;
    backdrop-filter: blur(5px);
    display: none;
    animation-name: fadeIn;
    animation-duration: 0.5s;
}
#resultmsg{
    text-align: center;
    justify-content: center;
}
#exit{
    position: absolute;
    top:20px;
    right: 20px;
    font-size: 1.5rem;
    height: 50px;
    width:50px;
    cursor: pointer;
    font-weight: bolder;
    color: white;
    border: solid 2px rgb(255, 255, 255);
    border-radius: 50px;
    background-color: rgba(255, 255, 255, 0.062);
    backdrop-filter: blur(20px);
}
#exit:hover{
    background-color: rgb(219, 6, 6);
}


@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}



@media screen and (max-width: 600px) {
    #heading{
        font-size: 3em;
        margin-top: 15%;
    }
    #newgame{
        height: 70px;
        width: 300px;
        top:83vh;
        right: auto;
    }
    #gameboard{
        height: auto;
        width: auto;
        display: flex;
        justify-content: center;
        align-content: center;
        animation-name: fadeIn;
        animation-duration: 0.5s;
    }
    #gameBoardContainer{
        height: 40vh;
        width:70vw;
        margin-top: 15%;
    }

    #msg{
        margin-top: 50px;
    }
    #selectionElements{
        height: 40vh;
        width:70vw;
        padding-right: 30px;
        margin-top: 10%;
        margin-left: -15px;
  
    }
    #selectionContainer{
        margin-bottom: 100px;
    }
    #msg{
        font-size: 2em;
        flex-wrap: wrap;
  
    }
    #msg1{
        order: 1;
    }
    #turn{
        order: 3;
        margin-top: 50px;
    }
    #msg2{
        order:2;
    }
    #result{
        height: 40vh;
        width:70vw;
        background-repeat: repeat-x;
        margin-bottom: 400px;
        margin-top: 100px;
    }
}