@charset "UTF-8";

html {
   box-sizing: border-box;
}

*, *:before, *:after {
   box-sizing: inherit;
}

html, body {
   margin: auto;
   width: 100%;
   height: 97%; /* if set to 100% it goes off the screen */
   display: flex;
   background-color: #3D6B99;
   color: white;
   flex-direction: row;
   justify-content: space-around;
}

fieldset {
   width: 100%;
   height: 100%;
   border-radius: 10px;
   border-width: 3px;
   border-color: #FF6740;
   border-style: solid;
}

legend {
   padding: 4px;
   border-radius: 10px;
   border-width: 3px;
   border-color: #FF6740;
   border-style: solid;
}

#left {
   width: 65%;
   height: 100%;
}

img{
   padding: 3px;
   height: 130px;
   cursor: pointer;
}

.disabled {
   cursor: default;
   opacity: 0.5;
}

.aiSelected {
   border-style: solid;
   border-width: 3px;
   border-color: #FF6740;
   border-radius: 10px;
   padding: 0px;
}

#gameBoard {
   width:100%;
   height:95%;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.row {
   display: flex;
   flex-direction: row;
   justify-content: center;
}


#right {
   width: 25%;
   height: 100%;
}

a {
   color: white;
}

@media only screen and (max-width: 1160px) {
   body{
      flex-direction: column;
      width: 94%;
      height: fit-content;
   }

   img {
      height: 110px;
   }

   #left {
      position: relative;
      margin-top: 20px;
      width: 100%;
      height: fit-content;
   }

   #right {
      position: relative;
      padding-top: 10px;
      margin-bottom: 20px;
      width: 100%;
      height: fit-content;
   }
}