rec.css

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: "proximanova";
  src: url("fonts/Mark\ Simonson\ -\ Proxima\ Nova\ Alt\ Bold.otf");
}

@font-face {
  font-family: "proximanova2";
  src: url("fonts/FontsFree-Net-proxima_nova_reg-webfont.ttf");
}

.container {
  width: 100%;
  height: 100vh;
  background: url("src/blur.jpeg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: all 0.5s ease-in-out;
  filter: blur(2px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.heading {
  color: white;
  font-size: 6em;
  font-family: proximanova;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  transition: all 0.5s ease-in-out;
  font-weight: bold;
  z-index: 3;
  opacity: 0;
}

.navbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 15px 50px;
  box-sizing: border-box;
  z-index: 2;
}

.logo {
  height: 100px;
  width: 100px;
  /* margin-top: 20px; */
  background-image: url("src/logo.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
}

.hamburger {
  width: 30px;
  height: auto;
  position: absolute;
  top: 5%;
  left: 95%;
  z-index: 5;
  transition: all 0.5s ease-in-out;
}
.hamburger > span {
  width: 100%;
  height: 4px;
  background-color: white;
  position: absolute;
  border-radius: 5px;
  z-index: 2;
  transition: all 0.5s ease-in-out;
}

.hand:nth-child(1) {
  transform: translateY(-1vh);
}

.hand:nth-child(3) {
  transform: translateY(1vh);
}

.midnav {
  width: 750px;
  height: 750px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url("src/10068-min.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: all 0.5s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.midnav > .mid-links {
  height: 40%;
  width: 30%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-flow: column;
  transition: all 0.5 ease-in-out;
}

.midnav > .mid-links a {
  font-family: sans-serif;
  text-decoration: none;
  color: #192024;
  font-size: 2em;
  transition: all 0.5 ease-in-out;
}

.mid-links a:hover {
  transform: scale(1.1);
}

.team-sec {
  width: 100%;
  height: 50vh;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
}

.team-sec > span {
  font-size: 2.5em;
  color: #192024;
  font-family: proximanova;
}

.team-sec > .positions {
  width: 100%;
  height: 80%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.team-sec > .positions > .work {
  width: 20%;
  height: 95%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-flow: column;
}

.team-sec > .positions > .work > .pic {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: all 0.5s ease-in-out;
}

.team-sec > .positions > .work > span {
  font-family: proximanova2;
  color: ç;
  font-weight: bold;
  font-size: 1.3em;
}

.instructions {
  height: 100vh;
  width: 100%;
  background-image: url("src/intr.jpeg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-flow: column;
}

.instructions > span {
  font-family: proximanova;
  font-size: 4em;
  color: #192024;
}

.instructions > .text {
  font-family: proximanova2;
  font-size: 1.5em;
  color: #192024;
  width: 80%;
  text-align: center;
  transition: all 0.5s ease-in-out;
}

.instructions > a {
  position: relative;
  font-size: 2em;
  color: white;
  text-decoration: none;
  font-family: proximanova2;
  background-color: #192024;
  padding: 20px 25px;
  /* border-radius: 10px; */
  transition: all 0.3s ease-in-out;
}

.instructions a:after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 0%;
  content: "Tasks";
  display: flex;
  justify-content: center;
  align-items: center;
  color: #192024;
  background: white;
  /* border-radius: 10px; */
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

.instructions > a:hover:after {
  opacity: 1;
  z-index: 1;
  height: 100%;
}

.announcements {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-flow: column;
}

.announcements > span {
  font-family: proximanova;
  font-size: 3em;
  color: #192024;
}

.announcements > .inner-text {
  width: 80%;
  height: 80%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-flow: column;
}

.footer {
  height: 50vh;
  width: 100%;
  background-color: #182232;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.footer > .su-logo {
  height: 300px;
  width: 300px;
  background-image: url("src/SU\ \ Tech\ Team\ Logo\ with\ white\ text.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  /* animation: float 6s ease-in-out infinite; */
}

.footer > .footer-text {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
  flex-flow: column;
}

.footer > .footer-text > span {
  font-family: proximanova2;
  font-size: 1.5em;
  color: white;
}

.footer > .footer-text > .copy-right {
  font-size: 0.7em;
}

.footer > .footer-text > .footer-social a {
  font-size: 2em;
}

.sidenavx {
  display: none;
}

@media (max-width: 600px) {
  .container {
    filter: blur(0px);
  }

  .navbar {
    padding: 10px 10px;
    justify-content: center;
  }
  .heading {
    font-size: 2em;
    width: 100%;
    text-align: center;
  }

  .team-sec {
    height: 180vh;
  }

  .team-sec > span {
    font-size: 1.5em;
  }
  .team-sec > .positions {
    flex-wrap: wrap;
    flex-flow: column;
    margin-top: 8vh;
    justify-content: space-evenly;
    height: 85%;
  }

  .team-sec > .positions > .work {
    width: 90%;
  }

  .team-sec > .positions > .work > .pic {
    width: 150px;
    height: 150px;
    margin-bottom: 1vh;
  }

  .team-sec > .positions > .work > span {
    font-size: 1.2em;
  }

  .navbar > .logo {
    height: 60px;
    width: 60px;
  }

  .hamburger,
  .midnav {
    display: none;
  }

  .instructions > .text {
    font-size: 1.1em;
  }

  .instructions > span {
    font-size: 2em;
  }

  .instructions > a {
    font-size: 1.7em;
    padding: 10px 15px;
  }

  .footer {
    flex-flow: column;
  }

  .footer > .su-logo {
    height: 120px;
    width: 120px;
  }

  .footer > .footer-text {
    align-items: center;
  }

  .footer > .footer-text > span {
    font-family: proximanova2;
    font-size: 0.7em;
    color: white;
  }

  .footer > .footer-text > .footer-social > .font-text {
    font-size: 1em;
  }

  .footer > .footer-text > .copy-right {
    font-size: 0.5em;
  }

  .footer > .footer-text > .footer-social a {
    font-size: 1.7em;
  }

  .announcements > span {
    font-family: proximanova;
    font-size: 2em;
    color: #192024;
  }

  .hamburgerx {
    width: 30px;
    height: auto;
    position: absolute;
    top: 3%;
    left: 3%;
  }
  .hamburgerx > span {
    width: 100%;
    height: 4px;
    background-color: white;
    position: absolute;
    border-radius: 5px;
    z-index: 8;
    transition: all 0.5s ease-in-out;
  }
  .sidenavx {
    height: 100%;
    width: 100vw;
    position: fixed;
    background-image: url("src/abstract-dark-halftone-background-design_1017-15505.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 7;
    transform: translateY(-100vh);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-flow: column;
    transition: all 0.5s ease-in-out;
  }

  .sidenavx > .ham-linksx {
    height: 40%;
    width: 60%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-flow: column;
    /* margin-top: 10vh; */
  }

  .sidenavx > .ham-linksx a {
    color: white;
    font-family: Helvetica;
    font-size: 2em;
    text-decoration: none;
  }

  .sidenavx > .ham-logox {
    width: 150px;
    height: 150px;
    background-image: url("src/SU\ \ Tech\ Team\ Logo\ wihtout\ text.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
}

@media (max-width: 376px) {
  .heading {
    font-size: 1.8em;
  }

  .navbar > .logo {
    height: 40px;
    width: 40px;
  }

  .team-sec > span {
    font-size: 1.2em;
  }

  .team-sec > .positions > .work > span {
    font-size: 1em;
  }

  .team-sec > .positions > .work > .pic {
    height: 100px;
    width: 100px;
  }

  .instructions > .text {
    font-size: 0.9em;
  }

  .footer > .su-logo {
    height: 90px;
    width: 90px;
  }

  .footer > .footer-text > span {
    font-family: proximanova2;
    font-size: 0.5em;
    color: white;
  }

  .footer > .footer-text > .footer-social > .font-text {
    font-size: 1.5em;
  }

  .footer > .footer-text > .copy-right {
    font-size: 0.3em;
  }

  .hamburgerx > span {
    height: 2.5px;
  }

  .hamburgerx {
    width: 22px;
  }

  .sidenavx > .ham-linksx a {
    font-size: 1.5em;
  }

  .sidenavx > .ham-logox {
    width: 120px;
    height: 120px;
  }
}