:root {
  --off-white: #d5d3d3;
  --custom-gray: #556062;
  --off-black: #111118;
  --orig-blue: rgb(60, 119, 193);
}

@font-face {
  font-family: importedFont;
  src: url(Roboto-Regular.ttf);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  font-family: importedFont;
  scroll-behavior: smooth;
}

body {
  background: var(--off-black);
  height: 100%;
  overflow-x: hidden;
}

.myResume {
  display: none;
  position: absolute;
  position: fixed;
  top: 0;
  left: 0;
  height: 90vh;
  width: 50vw;
  margin: 5vh 25vw;
}

.closeButton {
  z-index: 2;
  cursor: pointer;
  display: none;
  height: 3vw;
  width: 3vw;
  position: absolute;
  position: fixed;
  top: 5%;
  right: 20%;
}

.topSection {
  height: 60vh;
  width: 60vw;
  margin: 20vh 20vw;
}

.topSection .intro {
  position: relative;
  font-size: 4vw;
  color: var(--custom-gray);
}

.topSection .headline {
  position: relative;
  font-size: 8vw;
  color: var(--off-white);
}

.notFound {
  position: relative;
  text-align: center;
  font-size: 5vw;
  color: var(--off-white);
}

.topSection .tagline {
  position: relative;
  font-size: 3vw;
  color: var(--custom-gray);
}

.gradient {
  color: transparent;
  font-weight: bold;
  background: linear-gradient(-45deg, var(--off-white), var(--orig-blue) 60%);
  background-clip: text;
  -webkit-background-clip: text;
}

.aboutMe {
  color: var(--off-white);
  margin: 3vh 3vw;
  font-size: 2vw;
}

.content h2 {
  color: var(--off-white);
  font-size: 3vw;
}

.content {
  margin: 10% 20%;
}

/* Side Logos */

.sideLogos {
  z-index: 1;
  position: fixed;
  bottom: 0;
  left: 0;
  margin: 4vh;
  line-height: 6vh;
  color: var(--off-white);
  cursor: pointer;
}

.sideImg {
  height: 2.5vw;
  width: 2.5vw;
  transition: transform ease-in-out 0.25s;
}

.sideImg:hover {
  filter: invert(39%) sepia(89%) saturate(409%) hue-rotate(173deg)
    brightness(92%) contrast(92%);
}

/* mobile view */
@media (max-width: 900px) {
  .wrapper {
    overflow: hidden;
  }
  .topSection {
    height: 80vh;
    width: 80vw;
    margin: 10vh 10vw;
  }
  .verticalCenterMobile {
    margin: 0;
    position: absolute;
    top: 35%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .topSection .intro {
    font-size: 8vw;
  }
  .topSection .headline {
    font-size: 15vw;
  }
  .notFound {
    font-size: 10vw;
  }
  .topSection .tagline {
    font-size: 7vw;
  }
  .sideLogos {
    position: absolute;
    top: 0;
    right: 0;
    bottom: auto;
    left: auto;
    float: right;
    columns: 3;
  }
  .sideImg {
    height: 7vw;
    width: 7vw;
  }
  .myResume {
    height: 80vh;
    width: 100vw;
    margin: 10vh 0vw;
  }
  .closeButton {
    height: 8vh;
    width: 8vh;
    top: auto;
    right: 3%;
    bottom: 2%;
  }
  .aboutMe {
    font-size: 6vw;
  }
  .content h2 {
    font-size: 8vw;
    text-align: center;
  }
  .content {
    margin: 30% 5%;
    text-align: center;
  }
}