body {
  background-color: floralwhite;

  padding: 0px;
  margin: 0px;

  font-family: "Inter", serif;
}

.banner {
  display: flex;

  height: 100px;
  min-width: 850px;
  padding: 25px;

  background: linear-gradient(
    90deg,
    #e40303,
    #ff8c00,
    #ffed00,
    #008026,
    #004dff,
    #750787
  );
}

.banner__logo {
  height: 100%;
}

.banner__logo img {
  object-fit: contain;
  height: 100%;
}

.banner__season {
  margin-left: 20%;
  width: 100%;
}

.season__image {
  height: 100px;
  width: 100%;
}

.announcements {
  display: flex;
  align-items: center;
  position: relative;
  background: black;
  height: 3.5ex;
  width: 100%;
  min-width: 900px;
  overflow: hidden;
  position: sticky;
  top: 10px;
  z-index: 1;
}

.announcements__text {
  font-family: monospace;
  color: white;
  width: 100%;
  position: absolute;
  right: -100%;
  text-wrap: nowrap;
}

.animation {
  animation-name: move;
  animation-timing-function: linear;
  animation-duration: 18s;
  animation-iteration-count: infinite;
  animation-delay: 0s;
}

.animation--delay {
  animation-delay: 6s;
}

.animation--delay2 {
  animation-delay: 12s;
}

@keyframes move {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-200%);
  }
}

.body__container {
  display: flex;
}

.container__column {
  display: flex;
  flex-direction: column;
  padding-left: 10%;
  width: 100vw;
}

.profile__nav {
  position: sticky;
  top: 50px;
  background-color: gainsboro;
  border: solid whitesmoke;
  border-radius: 5px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: none;
  height: 90vh;
  min-height: 700px;
  width: 500px;
  min-width: 200px;
  margin-left: auto;
  margin-top: 10px;
  overflow: scroll;
}

.profile__picture img {
  margin-left: auto;
  margin-right: auto;
  display: block;
  padding-top: 10px;
  height: 200px;
  width: 200px;
  object-fit: cover;
  border-radius: 50%;
}

.nav__select {
  padding: 10px;
  margin-top: 25px;
  margin-left: 10%;
  margin-right: 10%;
  background-color: whitesmoke;
  border: solid thin white;
  border-radius: 5px;
  
  text-align: center;
  font-size: larger;
  cursor: pointer;
}

.nav__select--moderate {
  background-color: orange;
}

.nav__select:hover {
  border: solid thin #324e2a;
}

.featured {
  width: 90%;
  margin-top: 10px;
}

.featured__label {
  font-size: xx-large;
  color: black;
}

.featured__main {
  display: flex;
  height: 50vh;
  min-height: 300px;
  min-width: 600px;
  background-color: white;
  border: solid thin white;
  border-radius: 5px;

  font-family: monospace;
  overflow: scroll;
}

.featured__main:hover {
  cursor: pointer;
}

.main__author {
  display: flex;
  flex-direction: column;
  padding-left: 25px;
  padding-top: 10px;
}

.author__profilepicture {
  height: 60%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25%;
}

.profilepicture--main {
  height: 200px;
  width: 200px;
  object-fit: cover;
  border-radius: 50%;
}

.author__username {
  text-align: center;
  font-size: xxx-large;
  margin-top: 15px;
}

.main__blog {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
}

.title__label {
  text-align: center;
}

.blog__preview {
  height: 100%;

  padding-right: 3%;
  padding-top: 3%;
  padding-left: 3%;
  margin-right: 5%;
  margin-left: 25px;
  margin-bottom: 5%;
  border: solid thin black;
  border-radius: 5px;

  overflow: scroll;
  cursor: text;
}

.preview__text {
  white-space: pre-wrap;
}

.featured__sub {
  display: flex;
  margin-top: 30px;
  margin-bottom: 30px;
  
  font-family: monospace;
}

.sub__post {
  display: flex;
  flex-direction: column;
  width: 33.33%;
  height: 12vh;
  min-height: 140px;

  border: solid thin white;
  border-radius: 5px;
  background-color: white;

  text-align: center;
  overflow: scroll;
  cursor: pointer;
}

.sub__post--center {
  margin-left: 1.5%;
  margin-right: 1.5%;
}

.featured__user {
  display: flex;
  width: 50%;
  height: 200px;
  max-height: 200px;
  min-width: 350px;
  margin-top: 30px;
  margin-right: 10%;
  padding: 10px;

  border-style: solid;
  border-image: linear-gradient( to right, red 0%, orange 16%, yellow 32%, green 48%, blue 64%, indigo 80%, violet 100% ) 1;
  background-color: white;
}

.featured__user:hover {
  border-image: linear-gradient( to right, violet 0%, indigo 16%, blue 32%, green 48%, yellow 64%, orange 80%, red 100% ) 1;

  cursor: pointer;
}

.user__profilepicture {
  height: 100%;
}

.user__profilepicture img {
  width: 100px;
  height: 100px;
  margin-top: 50%;
  object-fit: cover;
  border-radius: 50%;
}

.featured__column {
  height: 300px;
  margin-left: 30px;
}

.featured__labels {
}

.user__label {
  text-decoration: underline;
}

.featured__quote {
  overflow: scroll;
  border: solid thin black;
  height: 100px;
}

.quote blockquote {
  overflow: scroll;
}

.resources-container {
  display: flex;
  width: 90%;
  margin-top: 30px;
}

.resources {
  width: 50%;
}

.resources__label {
  text-decoration: underline;
  text-align: center;
}

.resources__posts {
  padding-left: 10%;
  padding-right: 10%;
}

.resources__posts li {
  padding-bottom: 10px;
}