@import url("https://fonts.googleapis.com/css2?family=Bungee+Hairline&family=Rajdhani:wght@300;400;500;600;700&display=swap");

html {
  height: 100%;
}

body {
  font-family: "Rajdhani";
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  background-color: rgb(246, 160, 190);
  animation-name: background-colors;
  animation-iteration-count: infinite;
  animation-duration: 10s;
}

h1 a {
  font-family: "Bungee Hairline";
  font-size: 58px;
  text-decoration: none;
  color: black;
  transition: color 500ms;
}

h1 a:hover {
  color: white;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 800px;
}

h2 {
  font-size: 25px;
  color: rgb(65, 61, 61);
  text-decoration: none;
}

p {
  padding: 10px;
  border-radius: 10px;
  font-size: 20px;
}

img {
  width: 100%;
}

nav {
  width: 100%;
}

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: space-around;
}

nav li a {
  font-family: "Rajdhani";
  font-size: 30px;
  text-decoration: none;
  color: black;
  transition: color 500ms;
}

nav li a:hover {
  color: white;
}

.picture-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.picture-gallery img {
  padding: 10px;
}

.box {
  border: 5px solid rgb(78, 110, 215);
  border-radius: 20px;
  animation-name: colors;
  animation-iteration-count: infinite;
  animation-duration: 10s;
  margin-bottom: 20px;
  min-width: 400px;
}

@keyframes colors {
  0% {
    border-color: rgb(78, 110, 215);
  }
  33% {
    border-color: rgb(239, 81, 253);
  }
  66% {
    border-color: rgb(84, 59, 210);
  }
}

@keyframes background-colors {
  0% {
    background-color: rgb(246, 160, 190);
  }
  33% {
    background-color: rgb(181, 161, 245);
  }
  66% {
    background-color: rgb(116, 176, 219);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes spin-reverse {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

.homepage {
  overflow: hidden;
  margin: 0;
}

.sidebar {
  width: 33%;
}

.about {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  height: 100%;
}

.brain {
  height: 500px;
  width: auto;
  animation: spin 5s infinite linear;
}

.column {
  display: flex;
  flex-direction: column;
  margin-top: 60px;
}

.row {
  display: flex;
  flex-direction: row;
  max-height: 300px;
  justify-content: space-around;
  align-items: center;
}

.pill {
  animation: spin 4s infinite linear;
  max-width: 100px;
}

.pill:nth-child(1) {
  animation: spin-reverse 2s infinite linear;
}

.pill:nth-child(3) {
  animation: spin 2s infinite linear;
}