/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
@font-face {
  font-family: Rodin;
  src :url('../Rodin.otf');
}
body {
  background: radial-gradient(ellipse, #212121 0%, #171717 100%);
  min-height: 100vh;
  color: #DDD;
  font-family: Rodin;
  margin: 0 auto;
  max-width: 1600px;
}
h1 {
  font-family: Impact;
  -webkit-text-stroke: 1px #1F1F1F;
  letter-spacing: 10px;
  max-width: 100vh;
  text-align: center;
  animation: grow 2.5s ease-in-out infinite;
  min-height: 80px;
  max-height: 80px;
  height: 80px;
}
.headbit {
  height: 80px;
  border: 10px solid rgba(0,0,0,0);
}
.intro {
  background-color: #222;
  border: 2px solid #111;
  padding: 20px;
}
.mainsite {
  background-color: #1A1A1A;
  background: radial-gradient(ellipse, #212121 0%, #2D282D 100%);
  max-width: 800px;
  margin: 10px 80px;
  padding: 40px;
  border-radius: 0px 0px 80px 80px;
  border: 4px dotted #111;
  transition: 1s ease;
}
.mainsite:hover {
  background-color: #2F2;
  background: radial-gradient(ellipse, #212121 0%, #2F2A2F 100%);
}
p:hover {
  background-color: rgba(0,0,0,0.5);
}
p {
  background-color: rgba(0,0,0,0);
  width: max-content;
  box-sizing: border-box;
}
.spinner {
  width: 200px;
  height: 200px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid blue;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes grow {
  0% { font-size: 20px }
  50% {font-size: 40px }
  100% {font-size: 20px }
}