style.css

.main-board{
    display:flex;
    width:100%;
    height:100%;

    margin:0 auto;
    flex-direction:column;
    box-sizing: border-box;

}
.row{
    width:100%;
    height:12.5%;

    display:flex;
}

.col{
    width:12.5%;
    height:100%;
    border: 1px solid white;
    background-color:#6E9E00;
    position:relative;

}

.test{
    animation:bgc 0.5s linear;
}

@keyframes bgc{
    0%{
        background-color: #6E9E00;
    }
    50%{
        background-color: yellow;
    }
    100%{
        background-color: #6E9E00;
    }
}

.black-tiles{
    border-radius:50%;
    width:70%;
    padding-bottom:70%;
    position:absolute;
    margin: 0 auto;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(to bottom right, black, #565656);
    box-shadow: 1px 1px 6px;

}
.black-tiles::after{
    content:"";
    position:absolute;
    top:2px;
    border-radius:50%;
    left:2px;
    width:56%;
    height:35%;
    background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0));
    transform:rotate(-32deg);
}


.white-tiles{
    border-radius:50%;
    width:70%;
    padding-bottom:70%;
    position:absolute;
    margin: 0 auto;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    background:linear-gradient(to bottom right, #BABABA, white);
    box-shadow: 1px 1px 14px;

}

.white-tiles::after{
    content:"";
    position:absolute;
    top:2px;
    border-radius:50%;
    left:2px;
    width:56%;
    height:35%;
    background: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,0));
    transform:rotate(-32deg);
}




body{
    background-image:url("https://wallpaper-gallery.net/images/wood-background-wallpaper/wood-background-wallpaper-24.jpg");
    background-size: cover;
    min-width:650px;
    font-family: 'Archivo Black', sans-serif;
}

button{
    font-family: 'DM Serif Display', serif;
}

.header{
    font-family: 'Archivo Black', sans-serif;
    font-size:77px;
    margin-bottom:10px;
    color: yellow;
    letter-spacing: 2px;
    text-align:center;

}

.score-container{
    display:flex;
    width:70%;
    margin: 0 auto;
    height:175px;

    margin-top:10px;
    min-width:650px;
    visibility:hidden;
}

.score-inner-container{
    width:50%;
    height:100%;
    position:relative;

}

.score-tile{
   width:80px;
   height:80%;
   margin:0 auto;
   border-radius:75%;
   position: absolute;
   top:50%;
   left:50%;
   transform: translate(-50%,-50%);
   box-shadow: 1px 1px 18px;
   font-family: 'Indie Flower', cursive;


}

.score-black{
    background-color: #333534;
    color:white;
    box-sizing: border-box;

    background: linear-gradient(to bottom right, black, #565656);
}

.score-black:after{
    content:"";
    position:absolute;
    top:6px;
    border-radius:50%;
    left:3px;
    width:56%;
    height:35%;
    background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0));
    transform:rotate(-35deg);
}

.score-white{
    background-color: white;
    color:black;
    box-sizing: border-box;

    background: linear-gradient(to bottom right, #BABABA, white);
}

.score-white::after{
    content:"";
    position:absolute;
    top:6px;
    border-radius:50%;
    left:3px;
    width:56%;
    height:35%;
    background: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,0));
    transform:rotate(-35deg);
}

.score-tile-inner{
    margin:0 auto;
    border-radius:75%;
    width:75%;
    height:75%;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%)
}

.score-black-inner{
    background-color: #535353;
}

.score-white-inner{
    border:1px solid black;
}

.score{
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    font-size:50px;

}

.name{
    margin: 10px auto;
    text-align:center;
    box-sizing: border-box;
    border:1px solid black;
    width:250px;
    border-radius:22px;
    padding:8px;
    color:white;
    font-weight:bold;
    font-size:19px;
    background: linear-gradient(to bottom ,black, grey);
    position:relative;
    height:37px;
    box-shadow: 2px 2px 3px black;
    font-family: 'Indie Flower', cursive;
    line-height: 21px;
    letter-spacing: 3px;
}



.glow{
    height:100%;
    border:1px solid black;
    width:100px;
    margin:0 auto;
    position:relative;
    border-radius:50%;
    background: linear-gradient(#14ffe9,#ffeb3b,#ff00e0);
    animation: animate 0.5s linear infinite;
}

@keyframes animate{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

.glow span{
    position: absolute;
    width:100%;
    height:100%;
    border-radius:50%;
    background:linear-gradient(#14ffe9,#ffeb3b,#ff00e0);

}

.glow span:nth-child(1){
    filter:blur(5px);
}

.glow span:nth-child(2){
    filter:blur(10px);
}

.glow span:nth-child(3){
    filter:blur(25px);
}

.glow span:nth-child(4){
    filter:blur(50px);
}

.tile-container{
    position:relative;
    height:100px;
}

#glow-2{
    visibility: hidden;
}

.main-container{
    width:100%;
    height:420px;
    display:flex;
    justify-content: center;
}

.board-frame{

    width: 420px;
    height: 420px;
    padding: 30px;
    box-sizing: border-box;
    background: black;
    box-shadow: 1px 1px 18px;
    border-radius:15px;
    position:relative;
        border-bottom: 5px solid black;
    border-right: 5px solid black;

}

#bot-name{
    background: linear-gradient(to bottom ,#b5b4b3, white);
    color:black;
}

.main-page-container{
    display:flex;
    width:390px;
    height:100%;
    flex-direction: column;
    justify-content: space-around;
    margin:0 auto;
    padding:0;


}

.selections{
    padding: 15px 25px;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  outline: none;
  font-family: 'Archivo Black', sans-serif;
  background: linear-gradient(to bottom ,#ff920b , #F5E49B);
 border:none;
  border-radius: 15px;
  position:relative;
  width:68%;
  margin: 0 auto;
  color:black;
  font-weight:bold;
  box-shadow:6px 6px 6px black;
  transition: all .05s linear;
border-bottom:4px solid #8e7400;
letter-spacing:3px;
}

.selections:hover{

    color:white;
    text-shadow: 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff;

}

.selections:active{
    box-shadow: 2px 2px 2px black;
    border-bottom:1px solid #8e7400;
    transform: translateY(3px);
}

.main-player{
    font-size:20px;
    height:39px;
}

#player-1-input{
    margin: 0 auto;
    width:80%;
    height:55px;

    display:block;
    padding:14px;
    font-size:30px;
    color:black;
    box-sizing: border-box;
    outline:none;
    background:none;
    border:none;
    border-bottom:2px solid black;
    text-align:center;
        font-family: 'Archivo Black', sans-serif;
        font-weight:normal;
}

.player2{
    background: linear-gradient(to bottom ,#b5b4b3, white);
    color:black;
}

#player-2-input{
    margin: 0 auto;
    width:80%;
    height:55px;

    display:block;
    padding:14px;
    font-size:30px;
    color:black;
    box-sizing: border-box;
    outline:none;
    background:none;
    border:none;
    border-bottom:2px solid black;
    text-align:center;
        font-family: 'Archivo Black', sans-serif;
        font-weight:normal;

}

.predictor{
    border:1px solid black;
    width:7px;
    height:7px;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background-color:grey;
}

.square{
    position:relative;
}

.dark-shroud{
    position:absolute;
    background-color: rgba(0,0,0,0.8);
    border:1px solid black;
    width:100%;
    top:0;
    left:0;
    padding-bottom:100%;
    visibility:hidden;
    opacity: 0;



}

.result-container{
    border: 1px solid white;
    width: 386px;
    height:264px;
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    display:flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 15px 25px;
    font-size: 24px;
    text-align: center;
    cursor: pointer;
    outline: none;

    background: linear-gradient(to bottom ,#ff920b , #F5E49B);
    border:none;
    border-radius: 15px;
    opacity:0;


}

.result-selections{
    box-shadow:6px 6px 6px black;
    transition: all .05s linear;
    border-bottom:4px solid #035b00;
    outline:none;
    background: linear-gradient(to bottom ,#035b00 , #84f280);


}

.result-selections:hover{
    color:white;
    text-shadow: 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff

}

.result-selections:active{
    box-shadow: 2px 2px 2px black;
    border-bottom:1px solid #8e7400;
    transform: translateY(3px);
}

.win-lose-draw{
    position:fixed;
    left:50%;
    top:20%;
    transform:translate(-50%,-50%);
    color:#ffca00;

    width:100%;
    text-align:center;
    font-size:70px;
    text-shadow: 1px 1px 1px #856900,
        1px 2px 1px #856900,
        1px 3px 1px #856900,
        1px 4px 1px #856900,
        1px 5px 1px #856900,
        1px 6px 1px #856900,
        1px 7px 1px #856900,
        1px 8px 1px #856900,
        1px 9px 1px #856900,
        1px 10px 1px #856900,
    1px 18px 6px rgba(16,16,16,0.4),
    1px 22px 10px rgba(16,16,16,0.2),
    1px 25px 35px rgba(16,16,16,0.2),
    1px 30px 60px rgba(16,16,16,0.4);
    opacity:0;


}

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

.arrow{
    width:40px;
    height:40px;
    position:absolute;
    top:10px;
    right:10px;
    background-color:white;
    border-radius:50%;
    cursor:pointer;
}

.h-markers-container{
    line-height:30px;
    position: absolute;
    display: flex;
    width: 360px;
    box-sizing: border-box;
    height: 30px;
    top: 0;
    flex-wrap: nowrap;
}

.h-markers{
    height: 100%;

    box-sizing: border-box;
    width: 100%;
    color:white;
    text-align:center;

}


.v-markers-container{

    line-height:40px;
    position: absolute;
    display: flex;
    width: 32px;
    box-sizing: border-box;
    height: 363px;
    top: 29px;
    left: -1px;
    flex-direction: column;
    flex-wrap: nowrap;
}

.v-markers{
    height: 100%;

    box-sizing: border-box;
    width: 100%;
    color:white;
    text-align:center;

}

.last-move-display-container{
    width:154px;
    margin-left:20px;
    box-sizing: border-box;
    background: linear-gradient(to bottom ,#9b9a9a , #9b9a9a);
    border: none;
    border-radius: 15px;
    position: relative;
    box-shadow: 4px 4px 4px black;
    display: inline-block;
    padding: 10px;
    border-bottom:2px solid #414141;
    border-right:3px solid #414141;
    overflow:hidden;

}

.last-move-slot{
    width: 100%;
    border: none;
    border-bottom:3px solid black;
    border-right:2px solid black;
    height: 60px;
    border-radius: 5px;
    box-sizing: border-box;
    margin-bottom:5px;
    background:linear-gradient(white,#bfbab6);
    box-shadow: 2px 2px 4px black;
    position:relative;
    display:flex;
    justify-content: center;
    align-items:center;
    opacity:0;
    animation:fadein 1s forwards;

}

.last-move-tile-black{
    border-radius:50%;
    width:40px;
    height:40px;
    background: linear-gradient(to bottom right, black, #565656);
    box-shadow: 1px 1px 6px;
}

.last-move-tile-white{
    border-radius:50%;
    width:40px;
    height:40px;
    background: linear-gradient(to bottom right, #BABABA, white);
    box-shadow: 1px 1px 6px;
}

/*.last-move-tile-black:after{
    content:"";
    position:absolute;
    top:13px;
    border-radius:50%;
    left:19px;
    width:20%;
    height:27%;
    background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0));
    transform:rotate(-38deg);

}

.last-move-tile-white:after{
    content:"";
    position:absolute;
    top:11px;
    border-radius:50%;
    left:18px;
    width:20%;
    height:27%;
    background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0));
    transform:rotate(-38deg);

}*/

.last-move-number{
    padding-left: 20px;
    font-size: 29px;
    font-weight: bold;
}

.black-letter{
    color:grey;
    text-shadow: 1px 1px 1px black,
        1px 2px 1px black,
        1px 3px 1px black,
        1px 4px 1px black,
        1px 5px 1px black,
        1px 6px 1px black,
        1px 7px 1px black,
        1px 8px 1px black,
        1px 9px 1px black,
        1px 10px 1px black,
    1px 18px 6px rgba(16,16,16,0.4),
    1px 22px 10px rgba(16,16,16,0.2),
    1px 25px 35px rgba(16,16,16,0.2),
    1px 30px 60px rgba(16,16,16,0.4);

}

.white-letter{
    color:white;
    text-shadow: 1px 1px 1px black,
        1px 2px 1px black,
        1px 3px 1px black,
        1px 4px 1px black,
        1px 5px 1px black,
        1px 6px 1px black,
        1px 7px 1px black,
        1px 8px 1px black,
        1px 9px 1px black,
        1px 10px 1px black,
    1px 18px 6px rgba(16,16,16,0.4),
    1px 22px 10px rgba(16,16,16,0.2),
    1px 25px 35px rgba(16,16,16,0.2),
    1px 30px 60px rgba(16,16,16,0.4);

}

.settings{
    position: absolute;
    width: 40px;
    top: 10px;
    right: 10px;
    visibility:hidden;
    cursor:pointer;
}