@media (min-width: 64em) {
  .card {
    margin-left: 20%;
    margin-right: 20%;
  }
}

@media (max-width: 760px) {
  .card {
    margin-left: 5%;
    margin-right: 5%;
  }
}

html {
  font-size: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  background: #282828;
  /* linear-gradient(180deg, #393939 0%, #06070c 100%) */
}

.btn--green {
  padding: 1em 2em 1em;
  background-color: #21D883;
  border: none;
  border-radius: 3rem;
  margin-top: 2rem;
}

@media (max-width: 63.9375em) {
  .change {
    margin-left: 20%;
    margin-right: 20%;
  }
}

#brand {
  color: #96EAC3;
  font-weight: bold;
}

.navbar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav__tag {
  position: relative;
  color: #FFF;
  -webkit-transition: all ease-out 0.25s;
  transition: all ease-out 0.25s;
}

.nav__tag:hover {
  color: rgba(242, 242, 242, 0.872);
}

.nav__tag:hover::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #21D883;
}

.welcomeMessage {
  color: white;
  font-size: large;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-right: 2rem;
}

.welcomeMessage__username {
  margin-left: 0.5rem;
  color: #ff5900;
}

.signupBody {
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1rem;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#39393980), to(#06070ca1)), url(https://images.unsplash.com/photo-1531545514256-b1400bc00f31?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1567&q=80);
  background-image: linear-gradient(180deg, #39393980 0%, #06070ca1 100%), url(https://images.unsplash.com/photo-1531545514256-b1400bc00f31?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1567&q=80);
  background-size: cover;
  background-position: center;
}

.signup_form {
  margin: 0 35% 0 35%;
}

.form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: rgba(242, 242, 242, 0.872);
  padding: 2rem;
  border-radius: 1rem;
  -webkit-box-shadow: 2px 2px 20px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 2px 2px 20px 10px rgba(0, 0, 0, 0.2);
}

.underline {
  width: 25rem;
  height: 2px;
  background-color: #21D883;
}

.dashBody {
  min-height: 100vh;
}

.dashboardGrid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 3fr;
      grid-template-columns: 1fr 3fr;
  margin-left: 11rem;
  margin-right: 2rem;
  margin-bottom: 10rem;
  gap: 1rem;
}

.dashHeader {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  margin: 1rem 0rem;
}

.dashHeader .dashHeader__content {
  color: #21D883;
}

.dashboardNav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  position: absolute;
  background-color: #333333;
  width: 10rem;
  height: auto;
  padding-top: 1rem;
  padding-bottom: 1rem;
  -webkit-box-shadow: 2px 2px 20px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 2px 2px 20px 10px rgba(0, 0, 0, 0.2);
}

.dashboardNav .dashboardNav__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.dashboardNav .dashboardNav__picture--container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-items: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-weight: bold;
  color: rgba(242, 242, 242, 0.872);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid #21D883;
  overflow: hidden;
  margin-top: 1rem;
}

.dashboardNav .dashboardNav--picture {
  width: 100%;
  background-color: #333333;
  -webkit-box-shadow: 2px 2px 20px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 2px 2px 20px 10px rgba(0, 0, 0, 0.2);
  margin-top: 1.5rem;
}

.dashboardNav .dashboardNav--username {
  margin-top: 0.5rem;
  color: #21D883;
  font-weight: bold;
}

.dashboardNav .dashboardNav__links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.dashboardNav .dashboardNav__links .dashboardNav--link {
  padding: 1rem 0rem 1rem 0rem;
  text-decoration: none;
  color: #FFF;
  font-weight: bold;
  margin-top: 1rem;
}

.dashboardNav .dashboardNav__links .dashboardNav--link:hover {
  color: rgba(242, 242, 242, 0.872);
}

.messages {
  width: 100%;
  height: 100%;
  background-color: #333333;
  -webkit-box-shadow: 2px 2px 20px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 2px 2px 20px 10px rgba(0, 0, 0, 0.2);
}

.messages .joinChatBtn:hover {
  color: #96EAC3;
  border: 1px solid #ffda07;
}

.messages .messages__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  color: #FFF;
}

.analytics .analytics__background {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  background-color: #333333;
  -webkit-box-shadow: 2px 2px 20px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 2px 2px 20px 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  height: auto;
  padding: 1rem 0rem;
}

.analytics .analytics--chart {
  height: 80%;
  width: 80%;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Links inside the dropdown */
.dropdown-content {
  color: black;
  text-decoration: none;
  display: block;
}

.removeMentee {
  background-color: #ff5900;
  color: white;
  padding: .1rem .4rem;
  margin: .3rem .2rem;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #21D883;
  padding: 10px 10px;
  min-width: -webkit-fit-content;
  min-width: -moz-fit-content;
  min-width: fit-content;
  -webkit-box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.assignments {
  background-color: #333333;
  -webkit-box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  width: 100%;
  height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-bottom: 5rem;
}

.assignments form {
  width: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.assignments .assignments__title h3 {
  margin-top: 3rem;
  color: #21D883;
}

.assignments .noteInput {
  margin: 1rem 0rem;
  border: 1px solid #21D883;
  padding: .2rem;
  border-radius: 0em;
  width: 85%;
  height: auto;
  background-color: transparent;
  color: rgba(242, 242, 242, 0.872);
}

.assignments .noteSubmit {
  background-color: #ff5900;
  border: none;
  margin-top: 1rem;
  border-radius: 1.5rem;
  height: 2rem;
  color: white;
  font-size: 1rem;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-left: 2rem;
  padding-right: 2rem;
  margin-bottom: 4rem;
}

.assignments .noteList {
  margin: 2rem 0rem;
  width: 90%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.assignments .assignments-board {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.assignments .note-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 200px;
  height: 200px;
  border: 1px solid black;
  color: black;
  margin: 1rem;
  padding: .5rem;
  background-color: #e9e990;
}

.assignments .button-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem;
}

.assignments .remove-button,
.assignments .edit-button,
.assignments .update-button {
  height: 1.5rem;
  width: 1.5rem;
}

.assignments .update-button {
  background-color: #21D883;
  color: #FFF;
  border: none;
}

.assignments .hide {
  display: none;
}

.assignments .remove-button {
  background: #da0000;
  border: none;
  color: #FFF;
}

.assignments .edit-button {
  background-color: #FFF;
  border: none;
  color: black;
}

.assignments .menteeNumber {
  border: 1px solid white;
  border: 50%;
  color: white;
}

@media (max-width: 1200px) {
  .dashboardGrid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 2fr;
        grid-template-columns: 1fr 2fr;
    margin-left: 11rem;
    margin-right: 2rem;
    margin-bottom: 10rem;
    gap: 1rem;
  }
  .dashboardNav__head {
    display: none;
  }
}

@media (max-width: 1000px) {
  .dashboardGrid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    margin-left: 11rem;
    margin-right: 2rem;
    margin-bottom: 10rem;
    gap: 1rem;
  }
  .dashboardNav__head {
    display: none;
  }
  .assignments {
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

@media (max-width: 600px) {
  .dashboardGrid {
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    -ms-grid-rows: 50vh 1fr 2fr;
        grid-template-rows: 50vh 1fr 2fr;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
  .dashboardNav__head {
    display: none;
  }
  .dashboardNav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start;
    background-color: #333333;
    padding-top: none;
    width: 100%;
    -webkit-box-shadow: 2px 2px 20px 10px rgba(0, 0, 0, 0.2);
            box-shadow: 2px 2px 20px 10px rgba(0, 0, 0, 0.2);
    position: -webkit-sticky;
    position: sticky;
    z-index: 1001;
    top: 100px;
  }
  .dashboardNav .dashboardNav__head {
    display: none;
  }
  .dashboardNav .dashboardNav__picture--container {
    display: none;
  }
  .dashboardNav .dashboardNav--picture {
    display: none;
  }
  .dashboardNav .dashboardNav--username {
    display: none;
  }
  .dashboardNav .dashboardNav__links {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    width: 100%;
  }
  .dashboardNav .dashboardNav__links .dashboardNav--link {
    color: #FFF;
    font-weight: bold;
  }
  .dashboardNav .dashboardNav__links .dashboardNav--link:hover {
    color: rgba(242, 242, 242, 0.872);
  }
}

.board {
  background-color: #333333;
  -webkit-box-shadow: 2px 2px 20px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 2px 2px 20px 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  height: auto;
  color: #21D883;
  margin-bottom: 5rem;
  padding-top: 3rem;
}

.menteeInfo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 3rem;
}

.menteeHeader {
  color: var(--primary);
}

.menteeNumber {
  color: var(--lightGray);
}

.menteeNumberSize {
  font-size: 3rem;
}

.menteeList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.menteeCircle {
  background-color: var(--primary);
  border: .3rem solid green;
  border-radius: 50%;
  height: 6rem;
  width: 6rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.alignment {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/* 
.addContentLink {
  text-decoration: none;

  .addContent {
    @include flexCenter(row);
    width: 100%;
    margin-bottom: 1.5rem;

    .addContent__video {
      @include flexCenter(row);
      width: 95%;
      height: 15rem;
      border: 1px solid $lightGray;
      background-color: lighten(black, 20%);
      box-shadow: 2px 2px 20px 10px rgba(0, 0, 0, 0.2);
      opacity: 50%;

      .addContent--circle {
        @include flexCenter(row);
        width: 10rem;
        height: 10rem;
        border: 2px solid $lightGray;
        border-radius: 50%;

        .addContent--plus {
          font-size: 10rem;
          color: $lightGray;
        }
      }
    }
  }
  @include breakpoint-up(large) {
    display: flex;
    align-content: center;
    margin-left: 11rem;
    width: 20%;
  }
} */
/* .uploads {
  @include flexCenter(row);
  width: 100%;
  margin-bottom: 1.5rem;

  .uploaded__video {
    border: 1px solid $lightGray;
    box-shadow: 2px 2px 20px 10px rgba(0, 0, 0, 0.2);
    opacity: 50%;
  }
  @include breakpoint-up(large) {
    display: flex;
    align-content: center;
    margin-left: 11rem;
    width: 21%;
  }
} */
.profileContainer {
  margin: 0 10vw;
}

.page_title h1 {
  color: #21D883;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 4rem;
}

#firstname {
  margin-bottom: 10px;
}

#upload-photo {
  opacity: 0;
  position: absolute;
  z-index: -1;
}

.profileContainer textarea {
  resize: none;
}

.profileContainer textarea::-webkit-input-placeholder,
.profileContainer input::-webkit-input-placeholder,
.profileContainer select::-webkit-input-placeholder {
  color: rgba(242, 242, 242, 0.872);
}

.profileContainer textarea:-ms-input-placeholder,
.profileContainer input:-ms-input-placeholder,
.profileContainer select:-ms-input-placeholder {
  color: rgba(242, 242, 242, 0.872);
}

.profileContainer textarea::-ms-input-placeholder,
.profileContainer input::-ms-input-placeholder,
.profileContainer select::-ms-input-placeholder {
  color: rgba(242, 242, 242, 0.872);
}

.profileContainer textarea::placeholder,
.profileContainer input::placeholder,
.profileContainer select::placeholder {
  color: rgba(242, 242, 242, 0.872);
}

.profileContainer input,
.profileContainer select,
.profileContainer textarea {
  border: 1px solid #21D883;
  border-radius: .5em;
  width: 18rem;
  background-color: transparent;
  color: white;
}

.profileContainer textarea {
  padding-top: .3rem;
  padding-left: .3rem;
}

.profileContainer input,
.profileContainer select {
  height: 2.5rem;
}

.profileContainer select:focus,
.profileContainer textarea:focus,
.profileContainer input:focus {
  border: 2px solid white;
  background-color: transparent;
  color: white;
}

.label {
  font-weight: bold;
  color: rgba(242, 242, 242, 0.872);
}

.name {
  color: white;
}

.profile__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-items: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  font-weight: bold;
  color: rgba(242, 242, 242, 0.872);
  width: 350px;
  height: 350px;
  border-radius: 50%;
  border: 2px solid #21D883;
  overflow: hidden;
  position: relative;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.profile__head:hover #changeAvatar {
  opacity: 1;
}

.profile__head:hover {
  cursor: pointer;
  border-bottom: 5rem solid #21D883;
}

.profile__head .profile__pic {
  width: 100%;
}

.profile__head .profile__pic:hover {
  -webkit-filter: brightness(60%);
          filter: brightness(60%);
}

#changeAvatar {
  position: absolute;
  opacity: 0;
  top: 50%;
  bottom: 50%;
  left: 20%;
  right: 50%;
  margin: auto;
  width: 300px;
  font-size: 2rem;
  z-index: 1;
  color: white;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.bg-modal {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  display: none;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 2;
}

.bg-modal .modal-content {
  width: 600px;
  height: 300px;
  background-color: rgba(242, 242, 242, 0.872);
  border-radius: 2em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem;
}

.bg-modal .modal-content .modal--item {
  text-decoration: none;
  margin: auto 0 auto 0;
}

.bg-modal .modal-content .modal--item:hover {
  cursor: pointer;
}

.bg-modal .modal-content .modal--item button {
  border: none;
  background-color: transparent;
  color: black;
}

#cancel {
  color: gray;
}

#deleteAvatar {
  color: red;
}

#uploadAvatar {
  color: black;
}

.checkbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  color: red;
  width: 8rem;
}

.profile_inputs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-column-gap: 1.5rem;
          column-gap: 1.5rem;
  row-gap: 1rem;
  margin-left: 1rem;
}

.profile_info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: #333333;
  -webkit-box-shadow: 2px 2px 20px 10px rgba(0, 0, 0, 0.1);
          box-shadow: 2px 2px 20px 10px rgba(0, 0, 0, 0.1);
  padding: 2rem;
}

@media screen and (max-width: 1400px) {
  .profileContainer {
    margin: 0rem 5vw;
  }
}

@media (max-width: 800px) {
  .profile_info {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .profile__head {
    width: 250px;
    height: 250px;
  }
  #changeAvatar {
    position: absolute;
    opacity: 0;
    top: 40%;
    bottom: 50%;
    left: 35%;
    right: 50%;
    margin: auto;
    width: 100px;
    font-size: 1.5rem;
  }
}

#city,
#state {
  margin-bottom: 10px;
}

.buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.deleteProfile {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #333333;
  -webkit-box-shadow: 2px 2px 20px 10px rgba(0, 0, 0, 0.1);
          box-shadow: 2px 2px 20px 10px rgba(0, 0, 0, 0.1);
  height: 10rem;
}

.deleteProfile button {
  height: 4rem;
  width: 10rem;
}

.submit_cancel_container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-column-gap: 2rem;
          column-gap: 2rem;
}

.loginBody {
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1rem;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#39393980), to(#06070ca1)), url(https://images.unsplash.com/photo-1573497491208-6b1acb260507?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1500&q=80);
  background-image: linear-gradient(180deg, #39393980 0%, #06070ca1 100%), url(https://images.unsplash.com/photo-1573497491208-6b1acb260507?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1500&q=80);
  background-size: cover;
  background-position: top;
}

.forgotPassword {
  color: #0051ff;
  font-size: .8rem;
}

.user_form {
  margin-left: 35%;
  margin-right: 35%;
}

@media (max-width: 1232px) {
  .user_form {
    margin-left: 20%;
    margin-right: 20%;
  }
}

@media (max-width: 760px) {
  .user_form {
    margin-left: 5%;
    margin-right: 5%;
  }
}

#spacing-line {
  padding: 2rem;
  border-bottom: 2px solid black;
}

#terms_of_use,
#create_profile_link {
  margin-left: .5rem;
}

.underlineContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.listBody {
  min-height: 100vh;
}

ul {
  list-style-type: none;
  margin-left: 0;
  padding: 0;
}

.listContainer {
  width: 70vw;
  margin-left: 15vw;
  margin-right: 15vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.information {
  margin-top: 3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.sliderAndButtonsContainer {
  margin-top: 0rem;
}

.profileInformation {
  max-width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.mentor_component {
  width: 100%;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
      grid-template-columns: 1fr 1fr;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border: 1px solid white;
  border-radius: 0.5em;
  padding: 10px;
  background-color: #242424;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.mentor_component:hover {
  -webkit-transform: translateX(20px);
          transform: translateX(20px);
  border: 1px solid #ff5900;
  border-radius: 1em;
  background-color: #181818;
  cursor: pointer;
}

.mentorInformation {
  margin-left: 5rem;
}

.mentorInformation__name {
  text-decoration: none;
  color: #21D883;
  font-size: 1rem;
  padding-left: 1em;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.mentorInformation__name:hover {
  color: #21D883;
}

.mentorInformation__jobTitle {
  text-decoration: none;
  padding-right: 1em;
  color: #FFF;
}

.mentorInformation__jobTitle:hover {
  color: rgba(242, 242, 242, 0.872);
}

#profile_access {
  margin-left: 5rem;
}

.mentorsList {
  color: rgba(242, 242, 242, 0.872);
}

#cluster {
  width: 40%;
  height: 50vh;
  border-radius: 2em;
  border: 2px solid #21D883;
  position: -webkit-sticky;
  position: sticky;
  top: 100px;
}

.mentor_component:nth-last-of-type(1) {
  margin-bottom: 100px;
}

/* --------------------------------RESPONSIVENESS --------------------------------- */
@media (max-width: 1400px) {
  #cluster {
    width: 60%;
  }
}

@media (max-width: 1200px) {
  .listContainer {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  #cluster {
    height: 35vh;
    width: 50vw;
  }
  .mentorInformation {
    margin-left: 0rem;
  }
  .mentor_component:first-of-type {
    margin-top: 3rem;
  }
}

@media (max-width: 1200px) {
  #cluster {
    width: 100%;
  }
}

.explore__link {
  text-decoration: none;
  color: #21D883;
}

.explore__link:hover {
  color: #ff5900;
}

.explore__header {
  color: #FFF;
  border-bottom: 0.3rem solid #21D883;
}

.subject {
  text-decoration: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 2rem;
  font-weight: bold;
  color: white;
  width: 13rem;
  height: 13rem;
  background-position: center;
  background-size: cover;
  border: 2px solid #21D883;
  margin: 1rem;
  padding: 1rem;
  -webkit-transition: background-position 3s ease-in-out, border .3s ease-in-out, border-radius .3s ease-in-out, color .3s ease-in-out, font-size .3s ease-in-out;
  transition: background-position 3s ease-in-out, border .3s ease-in-out, border-radius .3s ease-in-out, color .3s ease-in-out, font-size .3s ease-in-out;
}

.subject:hover {
  background-position: 25% 75%;
  border: 3px solid #ffda07;
  border-radius: 1em;
  color: #ffda07;
  font-size: 2.2rem;
  cursor: pointer;
}

#psychology {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#39393980), to(#06070c82)), url(https://images.unsplash.com/photo-1517346665566-17b938c7f3ad?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80);
  background-image: linear-gradient(180deg, #39393980 0%, #06070c82 100%), url(https://images.unsplash.com/photo-1517346665566-17b938c7f3ad?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80);
}

#engineering {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#39393980), to(#06070c82)), url(https://images.unsplash.com/photo-1581094480465-4e6c25fb4a52?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80);
  background-image: linear-gradient(180deg, #39393980 0%, #06070c82 100%), url(https://images.unsplash.com/photo-1581094480465-4e6c25fb4a52?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80);
}

#biology {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#39393980), to(#06070c82)), url(https://images.unsplash.com/photo-1567427018141-0584cfcbf1b8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80);
  background-image: linear-gradient(180deg, #39393980 0%, #06070c82 100%), url(https://images.unsplash.com/photo-1567427018141-0584cfcbf1b8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80);
}

#physics {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#39393980), to(#06070c82)), url(https://images.unsplash.com/photo-1576319155264-99536e0be1ee?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1275&q=80);
  background-image: linear-gradient(180deg, #39393980 0%, #06070c82 100%), url(https://images.unsplash.com/photo-1576319155264-99536e0be1ee?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1275&q=80);
}

#arts {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#39393980), to(#06070c82)), url(https://images.unsplash.com/photo-1556321360-f492c2ffea64?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80);
  background-image: linear-gradient(180deg, #39393980 0%, #06070c82 100%), url(https://images.unsplash.com/photo-1556321360-f492c2ffea64?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80);
}

#trades {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#39393980), to(#06070c82)), url(https://images.unsplash.com/photo-1473621038790-b778b4750efe?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1952&q=80);
  background-image: linear-gradient(180deg, #39393980 0%, #06070c82 100%), url(https://images.unsplash.com/photo-1473621038790-b778b4750efe?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1952&q=80);
}

#content-creation {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#39393980), to(#06070c82)), url(https://images.unsplash.com/photo-1599999904375-417412f2813c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1300&q=80);
  background-image: linear-gradient(180deg, #39393980 0%, #06070c82 100%), url(https://images.unsplash.com/photo-1599999904375-417412f2813c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1300&q=80);
}

#business {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#39393980), to(#06070c82)), url(https://images.unsplash.com/photo-1577415124269-fc1140a69e91?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1300&q=80);
  background-image: linear-gradient(180deg, #39393980 0%, #06070c82 100%), url(https://images.unsplash.com/photo-1577415124269-fc1140a69e91?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1300&q=80);
}

.container {
  margin-bottom: 5rem;
}

.showBody {
  margin: 5rem 10%;
}

.showContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 3rem;
}

.prevPicNext {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-right: 2rem;
}

.navigation {
  background-color: #21D883;
  border: none;
}

.avatar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-items: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-weight: bold;
  color: rgba(242, 242, 242, 0.872);
  height: 15rem;
  width: 15rem;
  border-radius: 50%;
  border: 3px solid #21D883;
  overflow: hidden;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.avatar__image {
  z-index: 1;
  max-width: 100%;
}

.showPg__name {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #FFF;
}

.comp_edu_field {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.information {
  color: white;
}

.unique_info {
  font-weight: lighter;
  line-height: 2rem;
}

#job_title {
  margin-top: 0.5rem;
  font-weight: lighter;
  letter-spacing: 0.2rem;
  color: white;
}

.progress_bar_container {
  width: 25rem;
}

.progress_color {
  background: #ff5900;
}

.messageRequest_Container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.msg_map_container {
  position: relative;
}

#request_btn {
  background-color: #ff5900;
  border: none;
  border-radius: 3rem;
  height: 4rem;
  color: white;
  font-size: 1.5rem;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-left: 2rem;
  padding-right: 2rem;
}

#request_btn:hover {
  border: 2px solid white;
}

#map {
  width: 400px;
  height: 300px;
  border-radius: 5em;
  border: 2px solid #21D883;
}

.mapboxgl-popup {
  max-width: 200px;
}

.mapboxgl-popup-content {
  color: white;
  background-color: #343434;
  border-radius: 2em;
  border: 1px solid #ff5900;
  -webkit-box-shadow: 2px 2px 20px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 2px 2px 20px 10px rgba(0, 0, 0, 0.2);
}

.mapboxgl-popup-content a {
  font-size: 1rem;
  text-decoration: none;
  color: #ff5900;
}

.mentee_slots {
  width: 80%;
}

#mentee_slot_label {
  color: white;
  font-size: 1.5rem;
}

.profileInformation {
  font-size: 1rem;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.line__styling {
  width: 25rem;
  height: 2px;
  background-color: #21D883;
  width: 100%;
}

.privateMsgBtn {
  background-color: #96EAC3;
  border: none;
  border-radius: 3rem;
  height: 4rem;
  color: #2e2e2e;
  font-size: 1.5rem;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-left: 2rem;
  padding-right: 2rem;
  margin-left: 3rem;
}

.submitBtn {
  margin-bottom: 10rem;
}

#reviews {
  background-color: #333333;
  -webkit-box-shadow: 2px 2px 20px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 2px 2px 20px 10px rgba(0, 0, 0, 0.2);
  padding: 5rem;
  margin-top: 10rem;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[2];
      grid-template-columns: repeat(2, 1fr);
}

.sliderAndButtonsContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-bottom: 5rem;
}

/* ----------------------------------------------- RESPONSIVE DESIGN ----------------------------------------------- */
@media (max-width: 1200px) {
  .myBtn,
  #request_btn {
    font-size: 1rem;
  }
}

@media (max-width: 1000px) {
  .showContainer,
  .sliderAndButtonsContainer {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .avatar-name-title {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
  .sliderAndButtonsContainer {
    gap: 2rem;
  }
  .prevPicNext {
    margin-right: 0rem;
  }
}

@media (max-width: 800px) {
  .profileInformation {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

@media (max-width: 550px) {
  #job_title {
    font-size: 1rem;
  }
  #map {
    width: 300px;
    height: 300px;
  }
  .messageRequest_Container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .privateMsgBtn {
    margin-left: 0rem;
  }
  .sliderAndButtonsContainer {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }
  .progress_bar_container {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}

@media (max-width: 500px) {
  .avatar {
    height: 10rem;
    width: 10rem;
    margin-top: 2rem;
  }
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}

footer .footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: left;
      -ms-flex-pack: left;
          justify-content: left;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #2e2e2e;
  height: 5vh;
}

footer .footer .footer__text {
  margin-left: 2rem;
  color: gray;
}

#mentorButton,
#menteeButton {
  height: 30rem;
  width: 20rem;
  background: black;
  background-size: cover;
  background-position: center;
  border: 2px solid #21d883;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

#header {
  border-bottom: 3px solid #21d883;
}

.contained {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 2rem;
}

#menteeButton:hover,
#mentorButton:hover {
  border: 2px solid yellow;
  border-radius: 4em;
  -webkit-transform: scale(1.1, 1.1);
          transform: scale(1.1, 1.1);
}

.category_title {
  color: white;
  font-size: 3rem;
  font-weight: bold;
}

#header {
  color: white;
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 3rem;
}

#mentorButton {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.49)), to(rgba(0, 0, 0, 0.49))), url(https://images.unsplash.com/flagged/photo-1559475555-b26777ed3ab4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=675&q=80);
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.49), rgba(0, 0, 0, 0.49)), url(https://images.unsplash.com/flagged/photo-1559475555-b26777ed3ab4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=675&q=80);
}

#menteeButton {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.49)), to(rgba(0, 0, 0, 0.49))), url(https://images.unsplash.com/photo-1514369118554-e20d93546b30?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80);
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.49), rgba(0, 0, 0, 0.49)), url(https://images.unsplash.com/photo-1514369118554-e20d93546b30?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80);
}

.introduction_container {
  margin: 0 2rem 0 2rem;
  padding: 0 4rem 0 4rem;
  color: white;
}

#tierSystem {
  color: #21d883;
}

dt {
  font-size: 2rem;
  color: #21d883;
}

dd {
  font-size: 1.5rem;
  color: white;
  margin-bottom: 2rem;
}

.sun {
  margin-left: 2rem;
}

@media (max-width: 600px) {
  .introduction_container {
    margin: 0 0 0 0;
    padding: 0 2rem 0 2rem;
  }
}

.faqBody {
  min-height: 100vh;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.45)), to(rgba(0, 0, 0, 0.45))), url(https://images.unsplash.com/photo-1591710635498-283fe28f75e2?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1048&q=80);
  background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url(https://images.unsplash.com/photo-1591710635498-283fe28f75e2?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1048&q=80);
  background-size: cover;
  background-position: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.faq-title {
  margin-top: 5rem;
  color: #21D883;
}

dt {
  font-size: 1.2rem;
  color: #FFF;
}

.accordion,
.accordion-button {
  color: #ededed;
}

.accordion-button {
  border: 1px solid #21D883;
}

.accordion-button:not(.collapsed) {
  background-color: #282828;
  color: #21D883;
}

.accordion-collapse {
  background-color: #282828;
  color: rgba(242, 242, 242, 0.872);
}

.faqContainer {
  width: 45%;
}

@media (max-width: 700px) {
  .faqBody {
    display: inline;
  }
  .faqContainer {
    width: 80%;
  }
}

.home-content {
  height: 100vh;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.7)), to(rgba(0, 0, 0, 0.7))), url(https://images.unsplash.com/photo-1522881193457-37ae97c905bf?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80);
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(https://images.unsplash.com/photo-1522881193457-37ae97c905bf?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80);
  background-size: cover;
  background-position: center;
}

#welcome-msg {
  color: #FFF;
}

.btn {
  margin-top: 1rem;
  font-weight: bold;
}
/*# sourceMappingURL=style.css.map */