/* General */

body {
  background: #8a8;
  color: #141;
}

main {
  height: 612px;
  width: 666px;
  margin: auto;
  padding: 2rem;
  border: 4px solid #575;
  border-radius: 20px;
  background-color: #dfd;
  position: absolute;
  inset: 0;
}

.indexMain {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.square {
  display: block;
  height: 240px;
  width: 240px;
  background-size: initial;
  justify-self: center;
  align-self: center;
}

.txtSquare {
  font-size: 2em;
  text-align: center;
}
.square:hover, .txtSquare:hover {text-decoration: none;}

.square:nth-child(3):last-child {
  grid-column: span 2;
  width: 100%;
}

@keyframes gif {to {background-position: 0 100%;}}

/* Art */

.music {background-image: url("img/music.png");}
.music:hover {animation: gif steps(11) 1s infinite;}

.writing {background-image: url("img/writing.png");}
.writing:hover {animation: gif steps(6) 1.1s forwards;}

.gallery {background-image: url("img/gallery.png");}
.gallery:hover {animation: gif steps(6) 1.1s forwards;}

/* Math */

.b2048 {
  color: #f00;
  background-color: #002;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.b2048:hover {animation: bg2048 1s infinite alternate;}
@keyframes bg2048 {
  from {background-color: #002}
  to {background-color: #004}
}

.homestuck {background-image: url('img/homestuck.png');}
.homestuck:hover {animation: gif steps(11) 1s infinite;}

.nothing {background-image: url("/testbutton.png");}

/*.gridgame {background-image: url("img/gridgame.png")}
.gridgame:hover {animation: gif steps(9) 1.2s forwards;}*/

/* MOBILE */

#mobile {
  display: none;
}

@media (max-width: 700px) {
  main, .backButton, .indexMain {
    display: none;
  }
  #mobile {
    font-size: 2em;
    width: 10em;
    height: 20em;
    position: fixed;
    left: calc(50% - 5em);
    top: calc(50% - 10em);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; 
    border: 4px solid #575;
    border-radius: 20px;
    background-color: #dfd;
  }
}