/* Start Design */

html {
  overflow:                 hidden;
  scroll-behavior:          smooth;
  padding:                  0px 16px;
}

body {
  margin:                   0;
  background-color:       #0a2840;
  color:                    rgb(44, 62, 80);
  font-family:              'Oswald', sans-serif;
  line-height:              1.3;
  -webkit-font-smoothing:   antialiased;
}

header {
  grid-area:                head;
  height:                   60px;
  display:                  grid;
  grid-template-columns:    1fr auto;
  grid-gap:                 16px;
}

header > a {
  height:                   30px;
  line-height:              28px;
  text-decoration:          none;
  text-align:               left;
  padding:                  0;
  font-size:                x-large;
  margin:                   auto 0;
  font-style:               italic;
  color:                  whitesmoke;
}

main {
  /* overflow:                 hidden; */
  /* border-radius:            30px; */
  /* border:                   2px solid black; */
  color:                    var(--main_color);
}

section {
  border-radius:            8px;
  background-color:       antiquewhite;
}

/* End Design */

/* Start - Multi-Color Aesthetic */
body {
  background:           linear-gradient(124deg, #e8891d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
  background-size:      1800%;
  -webkit-animation:    rainbow 64s cubic-bezier(0.6,0.8,0.8,0.6) infinite;
  -z-animation:         rainbow 64s cubic-bezier(0.6,0.8,0.8,0.6) infinite;
  -o-animation:         rainbow 64s cubic-bezier(0.6,0.8,0.8,0.6) infinite;
  animation:            rainbow 64s cubic-bezier(0.6,0.8,0.8,0.6) infinite;
}

@keyframes rainbow {
  0% {
    background-position: 0% 100%;
  }
  50% {
    background-position: 100% 0%;
  }
  100% {
    background-position: 0% 100%;
  }
}

.background {
  padding:              16px;
  border-radius:        12px;
  background:           linear-gradient(124deg, #e8891d, #e8b71d, #e3e81d, #1de840, #1ddde8);
  background-size:      1800%;
  -webkit-animation:    rainbow 64s cubic-bezier(0.6,0.8,0.8,0.6) infinite;
  -z-animation:         rainbow 64s cubic-bezier(0.6,0.8,0.8,0.6) infinite;
  -o-animation:         rainbow 64s cubic-bezier(0.6,0.8,0.8,0.6) infinite;
  animation:            rainbow 64s cubic-bezier(0.6,0.8,0.8,0.6) infinite;
}