@font-face {
  font-family: Elstob;
  src: url(fonts/Elstob/Elstob.ttf);
}

@font-face {
  font-family: Elstob;
  src: url(fonts/Elstob/Elstob-Italic.ttf);
  font-style: italic;
}

@font-face {
  font-family: STKaiti;
  src: url(fonts/STKaiti.ttf)
}

* {
  font-family: Elstob;
}

*:lang(zh) {
  font-family: STKaiti;
}

body {
  display: grid;
  grid-template-rows: repeat(3, auto);
}

header {
  grid-row: 1;
}

h1 { 
  text-align: center;
  font-size: 4rem;
}

main {
  grid-row: 2;
  margin-left: 10vw;
  margin-right: 10vw;
}

footer {
  grid-row: 3;
}

td {
  border: 1px solid black;
}

/* === LINKS === */
a {
  color: darkred;
}

a:hover {
  text-decoration: none;
}

a:not([href]) {
  color: gray;
  text-decoration: line-through;
}

/* === HALF DIVIDE === */ 
body.half {
  grid-template-columns: repeat(2, 1fr);
}

body.half main {
  display: block;
  margin: 0;
}

.left { grid-column: 1; }
.right { grid-column: 2; }

/* === IMAGE MAPS === */
a.rotate img {
    position: absolute;
}

.rotate:hover img {
    transform: rotate(5deg);
}

.rotate p {
    opacity: 0%;
}

.rotate:hover p {
    opacity: 100%;
    background-color: white;
}

.image-bg {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 1em;
    border-radius: 100px;
}

.image-link {
    position: absolute;
    background-color: white;
    color: black;
    font-size: 2em;
}

/* === ADDITIONAL CLASSES === */ 
.center {
  text-align: center;
}