body{
    margin: 0;
    padding: 0;
    -webkit-appearance:none;
}
.left{
    float: left;
}
.right{
    float: right;
}
.wrapper{
    /*border: 2px solid palevioletred;*/
    box-sizing: border-box;
    height: 100vh;
    width: 100vw;
    display: grid;
    grid-template-rows: 100px 1fr 55px;
}
/*--------------------------------------navbar--------------------------------------*/
.navbar{
    /*border: 1px solid salmon;*/
    box-sizing: border-box;
    grid-row: 1/2;
    background-color: #35323299;;
}
.navbar h1{
    font-family: 'Archivo', sans-serif;
    font-size: 28px;
    color: whitesmoke;
}
/* ------ Logo ------*/
.logo{
    width: 200px;
    text-align: center;
    margin-top: -10px;
    margin-left: 44vw;
}
#titleRock{
    margin-left: 10px;

}
#titlePaper{
    margin-left: -5px;
    margin-top: -25px;
}
#titleScissors{
    margin-left: -37px;
    margin-top: -25px;
}
.separators{
    width: 50px;
    height: 84px;
    margin-top: -109px;
    margin-left: 122px;
    overflow: hidden;
}
#titleSeparator{
    margin-top: 1px;
    font-size: 80px;
    font-weight: lighter;
}
#titleSeparator2{
    margin-top: -125px;
    margin-left: 18px;
    font-size: 80px;
    font-weight: lighter;
}
#titleSeparator3{
    margin-top: -125px;
    margin-left: 33px;
    font-size: 80px;
    font-weight: lighter;
}
/*--------------------------------------main--------------------------------------*/
.main{
    box-sizing: border-box;
    background-color: #8883;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-row-gap: 15px;
}
.rules{
    grid-column: 7/8;
    margin-top: 10px;
    margin-left: 35%;
    height: 30px;
    width: 100px;
}
.rules label::before{
    font-family: "Font Awesome 5 Free"
}
.rules label{
    font-family: 'Oswald', sans-serif;
    font-size: 15px;
    font-weight: bold;
}
.rules:hover label{
    color: #1A73E8;    
}
.rules:hover label + .popup{
    display: block;
}
.pcHeader{
    grid-column: 4/5;
    grid-row: 1/2;
    font-size: 32px;
}
.header{
    text-align: center;
    margin: auto;
    color: #0009;
    font-family: 'Oswald', sans-serif;
}
.computerChoice{
    grid-column: 4/5;
    grid-row: 2/3;
    border: .5px solid #3336;
    background: whitesmoke;
    box-sizing: border-box;
    margin: auto;
    height: 140px;
    width: 140px;
}
.computerChoice>i{
    font-size: 100px;
    margin-left: 28px;
    margin-top: 15px;
    color: #0009;
}
.vsHeader{
    grid-column: 4/5;
    grid-row: 3/4;
    font-size: 40px;
    font-weight: normal;
}
.tabsContainer{
    grid-column: 3/6;
    grid-row: 4/5;
    margin-left: -40px;
}
.tabsList{
    display: grid;
    grid-template-columns: repeat(3 , 1fr);
}
.tabsList>li{
    display: inline-block;
}
div>label:hover{
    cursor: pointer;
    color: #3339;
}
input[type=radio]{
    display: none;
}
.rock{
    grid-column: 1/2;
    margin: auto;
}
.paper{
    grid-column: 2/3;
    margin: auto;
}
.scissors{
    grid-column: 3/4;
    margin: auto;
}
div>label{
    font-size: 75px;
    color: #3336;
}
.tabsContainer .tabsList input[type=radio]:checked + label {
    color: #1A73E8;
}

/*--------------------------------------buttons--------------------------------------*/
.play-btn{
    grid-column: 4/5;
    grid-row: 5/6;
    border: .5px solid #3336;
    font-size: 18px;
    margin: auto;
    width: 200px;
    height: 50px;
    text-align: center;
}
.play-btn:hover{
    cursor: pointer;
}
/*--------------------------------------footer--------------------------------------*/
.footer{
    background-color: whitesmoke;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.footer *{
    grid-column: 4/5;
    margin: auto;
    margin-right: 25px;
    font-family: 'Archivo', sans-serif;
    font-weight: bolder;
    font-size: 13px;
}
.footer a{
    color: #1A73E8;
    text-decoration: none;
    font-family: 'Oswald', sans-serif;
    font-weight: bold;
}
.footer a:hover{
    color: rgb(24, 101, 202);
}


/*--------------------------------------tooltip--------------------------------------*/
/*Modified version of tooltip from: 
http://krasimirtsonev.com/blog/article/CSS-before-and-after-pseudo-elements-in-practice
*/
.popup {
    display: none;
    float: left;
    width: 340px;
    background: #727272;
    padding: 10px;
    border-radius: 6px;
    color: #FFF;
    position: relative;
    font-size: 14px;
    line-height: 20px;
    margin-left: -190px;
    width: auto;
    margin-top: 15px;
}
.popup:before {
    content: "";
    display: block;
    width: 0; 
    height: 0; 
    border-top: 12px solid transparent;
    border-right: 12px solid #727272; 
    position: absolute;
    top: -12px;
    left: 180px;
}


/*--------------------------------------Loader--------------------------------------*/
/*Loader from: 
https://codepen.io/RRoberts/pen/pEXWEp
_Damn those are nice css loaders_
*/

/* ALL LOADERS */

.loader{
    display: none;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    position: relative;
    margin: 0 auto;
    margin-top: 30px;
  }

  /* LOADER 2 */

#loader-2 span{
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: #3498db;
    margin: 35px 5px;
  }
  
  #loader-2 span:nth-child(1){
    animation: bounce 1s ease-in-out infinite;
  }
  
  #loader-2 span:nth-child(2){
    animation: bounce 1s ease-in-out 0.33s infinite;
  }
  
  #loader-2 span:nth-child(3){
    animation: bounce 1s ease-in-out 0.66s infinite;
  }
  
  @keyframes bounce{
    0%, 75%, 100%{
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0);
    }
  
    25%{
      -webkit-transform: translateY(-20px);
      -ms-transform: translateY(-20px);
      -o-transform: translateY(-20px);
      transform: translateY(-20px);
    }
  }


  .alert {
    padding: 20px;
    background-color: #ffff;
    color: white;
    opacity: 1;
    transition: opacity 0.6s;
    margin-bottom: 15px;
    height: 85px;
    text-align: center;
}

.alert.red {background-color: #f44336;}
.alert.success {background-color: #4CAF50;}
.alert.warning {background-color: #ff9800;}

.closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.closebtn:hover {
    color: black;
}

.alertContainer{
    position: absolute;
    width: 100vw;
    box-sizing: border-box;
    margin-top: 110px;
}
.alert i{
    margin-left: 25px;
    font-size: 45px;
}