/*
  Donovan Kong
  CSE 154 TA

  CSS to manage the theme of my website. Styles individual cards that have an image
  on one side and text to another side, with different inline styles depending on context
  and automated light/dark theme depending on system or browser.
*/

body {
  background-color: rgb(245,245,245);
  margin: 0px;
  font-family: 'Lato', sans-serif;
}

.links {
  color: black;
}

.card h1 {
  font-size: 3em;
  margin-bottom: 0;
}
.card:nth-child(1) p {
  font-size: 1.5em;
  margin-top: 0;
}

.card:nth-child(1) a {
  border-bottom: 1px solid transparent;
  transition: border-bottom 300ms;
}

.card:nth-child(1) a:hover {
  border-bottom: 1px solid currentColor;
}

.card {
  display: flex;
  width: 80%;
  margin: auto;
  margin-top: 50px;
  justify-content: center;
  animation: fadeinAnimation ease 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes fadeinAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.card h2 {
  font-size: 30px;
}

.card article {
  width: 30.5%;
}

.notinverse {
  margin-left: 2%;
}

.inverse {
  margin-right: 2%;
}

.card img {
  height: 30%;
  width: 30%;
  border-radius: 30px;
}

.card:last-child {
  margin-bottom: 3em;
}

.right {
  text-align: right;
}

.card:nth-child(1) a, .card:nth-child(1) p {
  border-bottom: 1px solid transparent;
  transition: border-bottom 300ms;
  font-size: 24px;
  text-decoration: none;
  color: black;
}

#header-stuff a:hover {
  border-bottom: 1px solid currentColor;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: rgb(50,50,50);
    color: white;
  }

  .card:nth-child(1) a, .card:nth-child(1) p {
    color: white;
  }

  .links {
    color: white;
  }
}