/*
  Austin Jenchi
  03/27/2021
  CSE 154 TA

  Some CSS styles for my about me page. Sets up styles for social icons,
  tips and tricks slideshow, and different styles of lists and cards for
  content.
*/

body {
  background-color: #333;
  font-family: "Source Sans Pro", sans-serif;
  color: white;
  margin-top: 10%;
  opacity: 0;
  transition: opacity 500ms ease;
  padding: 0 10vw;
  font-size: 14pt;
  overflow-x: hidden;
}

.fontawesome-i2svg-active body {
  opacity: 1;
}

header {
  font-size: 16pt;
}

header, header > div, .flexline, #slideshow, #projects, #projects section {
  display: flex;
}

header, .flexline, #projects {
  flex-wrap: wrap;
}

header > img {
  width: min(35vw, 200px);
  height: 100%;
  border-radius: 50%;
  margin-right: 16px;
  transition: border-radius 100ms ease;
  flex-shrink: 0;
}

header > img:hover {
  border-radius: 20%;
}

header h1, header .social-list svg {
  font-size: 1.7em;
}

header > div {
  flex-direction: column;
}

header > div > *, header address p {
  margin: 4px 0;
}

header address {
  font-style: normal;
}

header address svg {
  margin-right: 4px;
}

a {
  text-decoration: none;
  transition: border-bottom-color 100ms ease;
}

a, a:visited {
  color: inherit;
}

a:hover {
  border-bottom-color: #fff;
}

header a {
  border-bottom: 2px solid transparent;
}

.social-list {
  list-style: none;
  padding-left: 0;
  margin-top: auto;
}

.social-list li {
  display: inline;
  margin: 0 4px;
}

.social-discord {
  position: relative;
}

.discord-floater {
  background-color: #7289DA;
  border-radius: 5px;
  font-size: 1em;
  left: 50px;
  transform: scale(0);
  padding: 4px;
  position: absolute;
  top: -10px;
  transition: transform 100ms ease-out;
}

.social-discord:hover .discord-floater {
  transform: scale(1);
}

article, article::before, article::after {
  background-color: #191919;
}

article, #slideshow ol li {
  padding: 16px;
}

article, .oneline li, .flexline li, #slideshow ol {
  position: relative;
}

article {
  margin: 16px;
}

article::before, article::after, ol.oneline li::before, ol.flexline li::before, .counter li::before,
  #favorites li a::after, #slideshow ol li {
  position: absolute;
}

article::before, article::after, #slideshow ol li {
  top: 0;
}

article::before, article::after {
  content: "";
  height: 100%;
  display: block;
  width: 20%;
}

article::before {
  left: -20%;
}

article::after {
  right: -20%;
}

footer, .flexline li {
  text-align: center;
}

footer {
  padding: 8px;
  margin: 8px auto -8px auto;
  margin-top: 8px;
}

footer p, #projects section, #projects section h3, #projects section h4, .oneline li, .flexline li {
  margin: 4px;
}

.fa-linkedin {
  color: #0077b5;
}

.fa-discord {
  color: #7289DA;
}

.oneline, .flexline, #slideshow ol {
  list-style: none;
  padding: 0;
}

.oneline, .flexline {
  counter-reset: counter;
}

.flexline, #slideshow, #projects, #projects section {
  justify-content: center;
}

.flexline li {
  padding: 8px 16px;
}

.oneline li, .classes li[id] {
  background-repeat: no-repeat;
}

.oneline li, #projects section a {
  padding: 4px;
}

.oneline li {
  background-position: right bottom;
  background-size: 25%;
  min-height: 100px;
  min-width: 200px;
}

.oneline li, .flexline li, #projects section {
  background-color: #222;
}

.oneline li, .flexline li {
  border-radius: 5px;
  display: inline-block;
  counter-increment: counter;
}

ol.oneline li::before, ol.flexline li::before, #slideshow button {
  font-size: 4em;
}

ol.oneline li::before, ol.flexline li::before {
  margin-right: 4px;
  bottom: 0;
  color: #555;
  content: counter(counter);
  font-weight: 900;
  line-height: 1;
}

.strike {
  text-decoration: line-through;
}

.hidden {
  display: none;
}

.animate-on {
  animation: slide 1s 1 ease-in-out reverse both;
}

.animate-off {
  animation: slide 1s 1 ease-in-out both;
}

@keyframes slide {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(50vw);
  }
}

.classes {
  font-size: initial;
}

.classes li[id] {
  /* use id to signify that these li's have images based on id, so other flexlist's with li's with
  ids don't have extra padding */
  background-size: 32px;
  background-position: 4px center;
  padding-left: 40px;
}

#class-154 {
  /* Image citation: illustration created for the CSE 154 website, taken directly from the course
  website https://courses.cs.washington.edu/courses/cse154/19sp/ */
  background-image: url("https://courses.cs.washington.edu/courses/cse154/19sp/assets/homepage-illustration.svg");
  background-size: 28%;
}

#class-163 {
  /* Image citation: Python logo is trademark the Python Software Foundation.
  this rendition is created by the Tango! project team, who have released it
  under license CC BY-SA 3.0 on wikimedia: https://commons.wikimedia.org/wiki/File:Python.svg */
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/0/0a/Python.svg");
  background-size: 32%;
}

#class-200 {
  /* Image citation: iSchool logo is owned by UW iSchool, https://ischool.uw.edu/about/logos-guidelines */
  background-image: url("img/classes/ischool.svg");
}

#class-308 {
  /* Image citation: Found on Google Images hosted by Pngtree http://bit.ly/2MRksVr */
  background-image: url("img/classes/matrix.png");
}

#pdrops {
  position: absolute;
  right: 7%;
  top: calc(-1 * 147.97 * 30vw / 399);
  width: 30vw;
  transition: top 500ms ease;
}

.fontawesome-i2svg-active #pdrops {
  top: 0;
}

#slideshow ol li, #projects section a {
  background-color: #F79A4A;
  transition: background-color 1s ease-in-out;
}

#slideshow ol li {
  left: 0;
}

#slideshow ol {
  height: 40vh;
  margin: 0;
  overflow: hidden;
  width: 90%;
}

#slideshow ol li {
  height: 100%;
  overflow: hidden auto;
}

#slideshow ol li h3 {
  font-size: 2em;
  margin-top: 0.7em;
}

#slideshow ol li p {
  font-size: 1.5em;
}

#slideshow button {
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  transition: transform 250ms ease-in-out, color 100ms ease-in-out;
}

#slideshow button#btn-left:hover {
  transform: translateX(-20px);
}

#slideshow button#btn-right:hover {
  transform: translateX(20px);
}

#slideshow button:focus {
  outline: none;
}

#projects section {
  align-items: center;
  background-size: cover;
  border-radius: 8px;
  flex-direction: column;
  flex-grow: 1;
  height: 150px;
  min-width: 400px;
}

#projects section:hover {
  transform: scale(1.2);
  z-index: 10;
}

#projects section h4 {
  color: #ccc;
}

#projects section a {
  border-radius: 4px;
  transition: background-color 250ms ease-in-out;
}

#projects section a:hover {
  background-color: #b96f13;
}

#projects section:nth-child(1) {
  /* fake overlay with gradient (image) */
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url("img/cps/wyvern.png");
}

#projects section:nth-child(2) {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url("img/cps/super-launch-star.png");
}

#projects section:nth-child(3) {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url("img/cps/astro.png");
}

#projects section:nth-child(4) {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url("img/cps/cookie.png");
}

#projects section:nth-child(5) {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url("img/cps/dulce-de-leche.png");
}

#game-grid {
  display: grid;
  grid-template-columns: repeat(7, 10vw);
  grid-template-rows: repeat(2, 10vw);
  grid-gap: 8px;
  justify-content: center;
  position: relative;
}

#game-grid > a > div, #anime-list > *, .game-card {
  background-color: #F79A4A;
}

#game-grid > * {
  grid-column: span 2;
}

#game-grid img, #anime-list img {
  transition: transform 50ms ease-out;
}

#game-grid img {
  width: 100%;
}

#game-grid :not(#game-wacca) div > img:hover {
  transform: scale(1.1) rotate(-2.5deg) translate(-10px, -10px);
}

#game-grid .game-big, #game-wacca {
  grid-row: span 2;
}

#game-grid .game-big:hover div > img {
  transform: scale(1.05) rotate(-2.5deg) translate(-20px, -20px);
}

#game-wacca {
  grid-column: span 1;
}

#game-wacca div:first {
  position: relative;
}

#game-wacca img:nth-of-type(2) {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  transition-duration: 250ms;
}

#game-wacca:hover img:nth-of-type(2) {
  transform: rotate(350deg) scale(1.5);
}

.game-card {
  position: absolute;
  left: 10vw;
  right: 10vw;
  top: 22vw;
  transition: opacity 500ms ease-in-out;
  opacity: 0;
  visibility: hidden;
  z-index: 999;
}

#game-grid > *:hover .game-card {
  opacity: 1;
  visibility: visible;
}

#anime-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

#anime-list > *, #anime-list img {
  height: 30vh;
  margin: auto;
}

#anime-list > *:hover img {
  transform: translateY(10px);
}

@media screen and (max-width: 1000px) {
  #game-grid {
    grid-template-columns: repeat(2, 30vw);
    grid-template-rows: repeat(6, 30vw);
  }

  #game-wacca {
    grid-column: span 2;
  }

  #game-wacca div:first-of-type {
    background: url('img/games/wacca-square.png') no-repeat;
    background-size: cover;
    padding-left: 100%;
    height: 100%;
  }

  #anime-list {
    justify-content: center;
  }

  #anime-list > * {
    margin: 8px;
  }

  .game-card {
    display: none;
  }
}

@media screen and (min-width: 1140px) {
  #game-grid a[href*="genshin"] .game-card {
    left: 15vw;
    right: 15vw;
  }
}

@media screen and (min-width: 1630px) {
  #game-grid .game-card {
    left: 20vw !important;
    right: 20vw !important;
  }
}