style.css

* {
    box-sizing: border-box;
}

@font-face {
    font-family: 'Tron';
    src: url(./tron/TRON.TTF);
    font-weight: bold;
}

body {
    margin: 0;
    padding: 0;
    background-image: url("images/background.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 100vh;
    width: 100vw;
    font-family: 'Tron', sans-serif;
    color: #fff;
    overflow-x: hidden;
}

main {
    width: 95vw;
    height: 95vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: 1s;
}

aside {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    width: 20vw;
    height: 35vw;
    padding: 15px;
    border: 1px solid rgba(45, 205, 229, 1);
    border-radius: 5px;
    text-align: center;
    color: white;
    font-size: 2vw;
}

.discs, .counter{
    font-size: 2em;
    font-family: 'Rationale', sans-serif;
    font-weight: bold;
    margin: 10%;
}

.discs {
    margin-top: 15%;
}

.leftAside {
    left: 3%;
}
.rightAside {
    right: 3%;
}

.playerStats {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 90%;
}

.glowBlue {
    box-shadow: 0 0 20px #fff, 0 0 40px #2dcde5, 0 0 60px #2dcde5, 0 0 80px #2dcde5;
}

.glowOrange {
    box-shadow: 0 0 20px #fff, 0 0 40px #FF9900, 0 0 60px #FF9900, 0 0 80px #FF9900;
}



#gameboard {
    width: 42vw;
    height: 42vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

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

.cell {
    width: 11.5%;
    height: 92%;
    border: 1px solid rgba(45, 205, 229, 1);
    display: inline-block;
    float: left;
    font-size: 2.5vw;
    text-align: center;
    margin: .5%;
    border-radius: 5px;
    user-select: none;
}

h2 {
    font-size: 6vmin;
}


/* ---------------- neon effect ---------------- */

.chip {
    width: 100%;
    height: 100%;
}

.hideChip {
    display:none;
}

.chipGhostOutline {
    display: inline-block;
    opacity: 0.15;
    cursor: pointer;
}

.cell:hover .chipGhostOutline {
    opacity: 0.3;
}

.blue {
    text-shadow: 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #2dcde5, 0 0 70px #2dcde5, 0 0 80px #2dcde5, 0 0 100px #2dcde5, 0 0 150px #2dcde5;
}

.chip.blue {
    transform: rotateY(0deg);
}

.orange {
    text-shadow: 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF9900, 0 0 70px #FF9900, 0 0 80px #FF9900, 0 0 100px #FF9900, 0 0 150px #FF9900;
}

.chip.orange {
    transform: rotateY(180deg);
}


.counter1, .counter2 {
    font-family: 'Rationale', sans-serif;
    font-size: 3vw;
}



/* ------------------ intro modal ----------------------*/

.introModalContainer {
    position: fixed;
    z-index: 100;
    width: 100%;
    height: 100%;
    color: white;
    transition: 1s;
}

.introModalHeader {
    font-size: 4vw;
    text-align: center;
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.playerBox {
    transform: translate(-50%, -50%);
    width: 20%;
    height: 30%;
    text-align: center;
    position: fixed;
    border: 1px solid #2dcde5;
    border-radius: 5px;
}

.playerBox1 a span {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
}

.playerBox1:hover, .playerBox1Win:hover {
    box-shadow: 0 0 20px #fff, 0 0 40px #2dcde5, 0 0 60px #2dcde5, 0 0 80px #2dcde5;
    cursor: pointer;
}

.playerBox1Clicked{
    box-shadow: 0 0 20px #fff, 0 0 40px #2dcde5, 0 0 60px #2dcde5, 0 0 80px #2dcde5;
}

.playerBox2 a span {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
}

.playerBox2:hover, .playerBox2Win:hover {
    box-shadow: 0 0 20px #fff, 0 0 40px #FF9900, 0 0 60px #FF9900, 0 0 80px #FF9900;
    cursor: pointer;
}

.playerBox2Clicked{
    box-shadow: 0 0 20px #fff, 0 0 40px #FF9900, 0 0 60px #FF9900, 0 0 80px #FF9900;
}

.playerBox1 {
    top: 50%;
    left: 12%;
    background-image: url('images/tronAvitar.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.playerBox2 {
    top: 50%;
    left: 88%;
    background-image: url('images/cluAvitar.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.playerName {
    position: relative;
    font-size: 4vw;
    top: 90%;
}

.directions {
    width: 50vw;
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #2dcde5;
    font-family: 'Rationale', sans-serif;
    padding: 2%;
    border-radius: 5px;
}

.directionsList > li {
    font-size: 3vh;
    padding-bottom: 3%;
    list-style: none;
}

.howToPlay {
    text-align: center;
    margin: 0;
}

.multiButton, .singleButton {
    width: 20%;
    border-radius: 5px;
    outline: none;
    position: absolute;
    top: 90vh;
    transform: translate(-50%, -50%);
    border: none;
    font-family: 'Rationale', sans-serif;
    font-size: 3vw;
    font-weight: bold;
    padding: 5px;
    background-color: rgb(255, 255, 255);
}

.multiButton{
    left: 63%;
}

.singleButton {
    left: 37%;
}

.multiButton:hover, .singleButton:hover {
    opacity: .5;
    cursor: pointer;
}


/************** win modal **************/


.winModalContent {
    position: fixed;
    z-index: 100;
    width: 100%;
    height: 100%;
    color: white;
    background-image: url("images/winModalBG.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: scale(0);
    transition: .75s;
}

.winnerModalHeader {
    margin-top: 4vw;
    font-size: 10vmin;
    text-align: center;
}

.playAgain {
    font-family: 'Rationale', sans-serif;
    font-size: 10vmin;
    text-align: center;
}

.playerBox1Win {
    top: 65%;
    left: 30%;
    background-image: url('images/tronAvitar.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 2px solid white;
}

.playerBox1WinClicked{
    box-shadow: 0 0 20px #fff, 0 0 40px #2dcde5, 0 0 60px #2dcde5, 0 0 80px #2dcde5;
}

.playerBox2Win {
    top: 65%;
    left: 70%;
    background-image: url('images/cluAvitar.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 2px solid white;
}

.playerBox2WinClicked{
    box-shadow: 0 0 20px #fff, 0 0 40px #FF9900, 0 0 60px #FF9900, 0 0 80px #FF9900;
}

.cell {
    -webkit-transition: top 1.2s linear;
    transition: top 1.2s linear;
}

.cell .chip {
    color: #fff;
    font-size: 1em;
    text-align: center;
    -moz-box-sizing: border-box;
    position: absolute;
    top: auto;
    left: 0;
    -webkit-transition: -webkit-transform 0.5s linear;
    transition: transform 0.5s linear;
}

.rotateY90 {
    transform: rotateY(90deg) !important;
}

.cell, .cell div {
    position: relative;
}

.cell div{
    color: #fff;
    font-size: 1em;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
}
.directionsList {
    margin-top: 1px;
    padding-left: 0;
}

@media screen and (max-width: 768px){

    /**********************************/
    /******** intro modal *************/
    /**********************************/
    .introModalHeader {
        font-size: 6vw;
        top: 6%;
    }

    .multiButton, .singleButton {
        top: 92%;
        font-size: 3.5vw;
        width: 23%;
    }

    .directions {
        width: 90vw;
        top: 61%;
        height: 50%;
    }

    .directionsList {
        margin-top: 1px;
    }

    .directionsList > li {
        font-size: 2.25vh;
    }

    .playerBox1, .playerBox2 {
        width: 30%;
        height: 15%;
        top: 21%;
    }

    .playerBox2 {
        left: 70%;
    }

    .playerBox1 {
        left: 30%;
    }

    .playerName {
        top: 93%;
        font-size: 4vmin;
    }


    /**********************************/
    /******** Game Board  *************/
    /**********************************/
    main {
        width: 100vw;
        height: 100vh;
        position: relative;
    }

    #gameboard {
        width: 55vw;
        height: 55vw;
    }

    aside {
        width: 60vw;
        height: 15vh;
        top: initial;
        margin: auto;
        background-color: black;
    }

    .cell .chip {
        font-size: 3vmin;
    }

    .discs {
        margin: 0;
        font-size: 5vmin;
    }

    .leftAside {
        top: 5%;
        left: 50%;
        transform: translate(-50%, 0);
    }

    .rightAside {
        bottom: 5%;
        left: 50%;
        transform: translate(-50%, 0);
    }

    .playerStats {
        height: auto;
    }

    .playerStats .blue, .playerStats .orange {
        display: inline-block;
        font-size: 5vmin;
        float: left;
        margin-top: 3%;
        padding-left: 3%;
    }

    .playerStats div {
        display: inline-block;
        margin-top: 2%;
        margin-left: 15%;
    }

    .counter1, .counter2 {
        font-size: 6vmin;
        margin: 0;
    }

    /**********************************/
    /******** win modal *************/
    /**********************************/

    .winnerModalHeader {
        font-size: 9vmin;
    }

    .playAgain {
        text-shadow: 2px 2px black;
        padding: 1%;
    }

    .winModalContent .playerBox {
        width: 35%;
        height: 25%;
    }

    @media only screen and (orientation: landscape) {
          #gameboard {
              width: 55vh;
              height: 55vh;
          }
          .directions {
              width: 55vw;
          }
          .playerBox1, .playerBox2 {
              width: 15%;
          }
          aside {
              position: absolute;
              transform: translate(0, -50%);
              width: 15vw;
              height: 35vw;
              border: 1px solid rgba(45, 205, 229, 1);
              border-radius: 5px;
          }
          .rightAside {
              right: 3%;
              top: 50%;
              bottom: initial;
              left: initial;
              transform: translate(0, -50%);
          }

          .leftAside {
              left: 3%;
              top: 50%;
              transform: translate(0, -50%);
          }

          .playerStats .blue, .playerStats .orange {
              display: block;
              float: none;
              font-size: 3vmin;
          }

          .playerStats div {
              display: block;
              margin: 0;
          }

          .winModalContent .playerBox {
              width: 25%;
              height: 30%;
          }

          .orange {
              text-shadow: 0 0 10px #FF9900, 0 0 15px #FF9900, 0 0 20px #FF9900, 0 0 35px #FF9900, 0 0 40px #FF9900, 0 0 50px #FF9900, 0 0 75px #FF9900;
          }

          .blue {
              text-shadow: 0 0 10px #2dcde5, 0 0 15px #2dcde5, 0 0 20px #2dcde5, 0 0 35px #2dcde5, 0 0 40px #2dcde5, 0 0 50px #2dcde5, 0 0 75px #2dcde5;
          }
    }
}

@media screen and (max-width: 450px){
    body {
        min-height: 550px;
    }

    #gameboard {
        width: 75vw;
        height: 75vw;
    }

    .container {
        min-height: 550px;
    }

    .winnerModalHeader {
        margin-top: 15vw;
    }

    .winModalContent .playerBox {
        top: 60%;
    }

    .cell .chip {
        font-size: 4vmin;
    }

    .orange {
        text-shadow: 0 0 10px #FF9900, 0 0 15px #FF9900, 0 0 20px #FF9900, 0 0 35px #FF9900, 0 0 40px #FF9900, 0 0 50px #FF9900, 0 0 75px #FF9900;
    }

    .blue {
        text-shadow: 0 0 10px #2dcde5, 0 0 15px #2dcde5, 0 0 20px #2dcde5, 0 0 35px #2dcde5, 0 0 40px #2dcde5, 0 0 50px #2dcde5, 0 0 75px #2dcde5;
    }
}