@import url(https://fonts.bunny.net/css?family=teachers:400,400i);

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 10px;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: black;
  align-items: center;
  text-align: center;
  color: whitesmoke;
  font-family: "Teachers", sans-serif;
}

header {
  width: 100%;
}

h1 {
  margin: 3.7vw 7vw 5vw;
  border-top: solid thin;
  border-bottom: solid thin;
  padding: 2vw 0 2.3vw;
  color: goldenrod;
  font-size: 2.9rem;
}

section {
  display: flex;
  margin-bottom: 3.7vw;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

input {
  width: 11rem;
  border: ridge darkgray;
  border-radius: 3px;
  padding-left: 3px;
  background-color: whitesmoke;
  line-height: 1.7em;
  color: navy;
  font-family: "Teachers", sans-serif;
  font-size: 1.3rem;
}

button {
  border: outset goldenrod;
  border-radius: 3px;
  padding: 0 3px 1px;
  background-color: navy;
  line-height: 1.7em;
  color: goldenrod;
  font-size: 1.5rem;
  font-variant: small-caps;
  font-weight: bold;
  letter-spacing: 0.7px;
  transition: 150ms ease-out;
}

button:hover {
  border-color: midnightblue;
  background-color: goldenrod;
  color: navy;
}

button:active {
  border-style: inset;
}

/* h3 style set in /scripts/script.js */

ul {
  padding: 0 6.1vw 0 6.7vw;
}

li {
  margin-bottom: 3.7vw;
}

p,
li {
  text-align: justify;
  line-height: 1.5em;
  font-size: 1.5rem;
  letter-spacing: 0.2px;
}

small {
  color: gainsboro;
}

.syn-ant {
  margin: 2.3vw 0 1.1vw;
  line-height: 1.3em;
  color: #c59112;
  font-size: 1.3rem;
}

footer {
  height: 50px;
  margin-top: auto;
  align-content: center;
  color: #aaa;
  font-family: monospace;
  letter-spacing: 0.2px;
  animation: jump 3s ease-in-out infinite;
}

#juliogitlab {
  color: goldenrod;
  font-size: 1.1em;
  font-weight: bold;
  text-decoration: none;
  transition: 250ms ease-out;
}

#juliogitlab:visited {
  color: darkgoldenrod;
}

#juliogitlab:hover {
  color: gold;
  font-size: 1.3em;
  letter-spacing: 0.3px;
  transition-duration: 350ms;
}

body {
  min-width: 320px;
}

@media (min-width: 540px) {
  h1 {
    margin: 2vw 7vw 3vw;
    padding: 1.1vw 0 1.3vw;
    font-size: 3.1rem;
  }

  section {
    margin-bottom: 2vw;
  }

  input {
    width: 13rem;
    font-size: 1.5rem;
  }

  button {
    font-size: 1.7rem;
  }

  li {
    margin-bottom: 2vw;
  }

  .syn-ant {
    margin: 1.3vw 0 0.5vw;
  }

  footer {
    height: 60px;
  }
}

@media (min-width: 940px) and (min-height: 600px) {
  h1 {
    margin: 1.3vw 7vw 2.3vw;
    padding: 0.7vw 0 1vw;
    font-size: 3.7vw;
  }

  section {
    margin-bottom: 1.3vw;
    gap: 7px;
  }

  input {
    width: 17rem;
    font-size: 1.7rem;
  }

  button {
    padding: 0 5px 1px;
    font-size: 2rem;
    letter-spacing: 1px;
  }

  ul {
    padding: 0 7.3vw 0 7.9vw;
  }

  li {
    margin-bottom: 1.3vw;
  }

  p,
  li {
    font-size: 1.7rem;
    letter-spacing: 0.3px;
  }

  .syn-ant {
    margin: 1vw 0 0.3vw;
    font-size: 1.5rem;
  }

  footer {
    height: 70px;
    font-size: 1.3rem;
  }
}

@keyframes jump {
  0%,
  10%,
  20% {
    transform: translateY(0);
  }

  5%,
  15% {
    transform: translateY(-5px);
  }
}