* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.container{
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#menu {
  position: absolute;
  top:0;
  left:0;
  cursor: pointer;
}

.icon {
  padding: 15px;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 100px;
}

.follow {
  display: flex;
  margin-top: 20px; 
}

.link {
  filter: invert(17%) sepia(100%) saturate(50%) hue-rotate(20deg) brightness(90%) contrast(50%);
  -webkit-filter: invert(17%) sepia(100%) saturate(50%) hue-rotate(20deg) brightness(90%) contrast(50%);
}

.link:hover {
  filter: none;
  -webkit-filter: none;
}

.sidenav a, .sidenav p {
  padding: 8px 8px 8px 10px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover, .sidenav p {
  color: #f1f1f1;
}

#gamemode {
  margin-top: 5px;
  margin-left: 10px;
  color: #e7e7e7;
}

input, label {
  margin-bottom: 8px;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 15px;
  font-size: 40px;
  margin-left: 50px;
}

.scoreboard {
  width: 50%;
  justify-content: space-evenly;
  display: flex;
  margin-bottom: 1em;
  font-size: 1.2rem;
}

p{
  font-size:1.5rem;
}

.container {
  box-shadow: 0px 3px 6px #888888 inset;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center; */
  background:rgb(9, 139, 146);
}

h1 {
  font-size: 4rem;
  margin-bottom: 0.35em;
  animation: anim 2.5s forwards;
  margin-top: 0.15em;
}

@keyframes anim{
  0% {text-decoration: none;}
  10% {background-color: lightcoral; color:black; border-radius: 20px;}
  20% {background-color: #eee; text-decoration: none; color: black;}
  30% {background-color: crimson; color:black; border-radius: 0px;}
  40% {background-color:#eee; text-decoration: none; color:black;}
  50% {background-color:yellow; color:black; border-radius: 20px;}
  60% {background-color: #eee; text-decoration: none; color:black;}
  70% {background-color:darkseagreen; color:black; border-radius: 0px;}
  80% {background-color: #eee; color:black; text-decoration: line-through black;}
  90% {background-color: black; border-radius:20px; color: #eee;}
  100% {background-color:rgb(9, 139, 146); color:black; text-decoration: underline black;}
}

h2 {
  margin-top: 1em;
  font-size: 2rem;
  margin-bottom: 0.5em;
  text-align: center;
  width:100%;
}

.play-area {
  display: grid;
  width: 300px;
  height: 300px;
  grid-template-columns: auto auto auto;
}

.block {
  display: flex;
  width: 100px;
  height: 100px;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: bold;
  border: 3px solid black;
  transition: background 0.2s ease-in-out;
}

.block:hover {
  cursor: pointer;
  background: #0ff30f;
}

.occupied:hover {
  background: #ff3a3a;
  cursor: not-allowed;
}

.win {
  background: #0ff30f;
}

.win:hover {
  background: #0ff30f;
}

#\30,
#\31,
#\32 {
  border-top: none;
}

#\30,
#\33,
#\36 {
  border-left: none;
}

#\36,
#\37,
#\38 {
  border-bottom: none;
}

#\32,
#\35,
#\38 {
  border-right: none;
}

button {
  outline: none;
  border: 4px solid green;
  padding: 10px 20px;
  font-size: 1.5rem;
  font-weight: bold;
  background: none;
  transition: all 0.2s ease-in-out;
  border-radius: 10px;
}

button:hover {
  cursor: pointer;
  background: green;
  color: white;
}

button:focus{
  outline: none;
  background: green;
  color: white;
}

#reset {
  margin-left: 10px;
  margin-top: 15px;
  font-size: 1rem;
  color: white;
}

#reset:hover {
  color: black;
}

#reset:focus{
  color: black;
}

.playerWin {
  color:white;
  background-color: black;
}

.computerWin {
  color: red !important;
  background-color: black;
}

.draw {
  color: orange !important;
  background-color: black;
}

@media only screen and (max-width: 600px) {
  h1 {
    font-size: 3rem;
    margin-bottom: 0.35em;
    margin-top: 1em;
  }

  h2 {
    margin-top: 1em;
    font-size: 2.1rem;
  }
  
  p{
    font-size: 2.1rem;
    margin-top:0;
  }

  .scoreboard{
    width:80%;
    font-size: 1.1rem;
  }

  .occupied:hover {
    background: none;
  }

  .occupied:active {
    background: #ff3a3a;
  }

  .win:hover {
    background: #0ff30f;
  }

  .icon {
    padding: 12px;
  }
}