.home-title {
  font-family: brandon-grotesque-bold;
  font-size: 9.4vw;
  color: rgb(230, 230, 230);
  /* opacity: 0.85; */
}

.home-subtitle {
  font-family: brandon-grotesque;
  font-size: 2.95vw;
  color: rgb(230, 230, 230);
}

.home-img-dark {
  filter: brightness(70%);
  min-width: 100vw;
  max-height:  100vh;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.home-img-container {
  margin: 0;
  position: relative;
  text-align: center;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -80%);
}

.bottom-centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(0vw, 25vh);
}

.about-propic {
  width: 20vw;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.about-black-container {
  margin: 0;
  padding-left: 25vw;
  padding-right: 25vw;
  padding-bottom: 20vh;
  background-color: rgb(12,13,13);
  width: 100%;
}

.skills-container {
  margin: 0;
  padding-left: 25vw;
  padding-right: 25vw;
  padding-bottom: 20vh;
  padding-top: 5vh;
  background-color: rgb(230, 230, 230);
}

.work-container {
  margin: 0;
  padding-left: 25vw;
  padding-right: 25vw;
  padding-bottom: 20vh;
  padding-top: 5vh;
}

.simple-expand-skill {
  transition: transform .2s;
  height: 5vw;
}

.skills-divider {
  height: 35vh;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100vw; /* Full width */
  height: 100vh;
  max-width: inherit;
  overflow: auto;
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
  background-color: rgb(230, 230, 230);
  margin: auto;
  margin-bottom: 10rem;
  padding-top: 1rem;
  padding-bottom: 5rem;
  padding-left: 3rem;
  padding-right: 3rem;
  border: 1px solid #888;
  width: 30vw;
}

@media screen and (max-width:1700px) {
  .work-container {
    margin: 0;
    padding-left: 10vw;
    padding-right: 10vw;
    padding-bottom: 20vh;
    padding-top: 5vh;
  }

  .skills-container {
    margin: 0;
    padding-left: 20vw;
    padding-right: 20vw;
    padding-bottom: 20vh;
    padding-top: 5vh;
    background-color: rgb(230, 230, 230);
  }

  .simple-expand-skill {
    transition: transform .2s;
    height: 7vw;
  }

  .skills-divider {
    height: 30vh;
  }

  .modal-content {
    background-color: rgb(230, 230, 230);
    margin: auto;
    margin-bottom: 10rem;
    padding-top: 1rem;
    padding-bottom: 5rem;
    padding-left: 3rem;
    padding-right: 3rem;
    border: 1px solid #888;
    width: 50vw;
  }
}

@media screen and (max-width:800px) {
  .skills-container {
    margin: 0;
    padding-left: 5vw;
    padding-right: 5vw;
    padding-bottom: 20vh;
    padding-top: 5vh;
    background-color: rgb(230, 230, 230);
  }

  .work-container {
    margin: 0;
    padding-left: 2vw;
    padding-right: 2vw;
    padding-bottom: 20vh;
    padding-top: 5vh;
  }

  .simple-expand-skill {
    transition: transform .2s;
    height: 10vw;
  }

  .skills-divider {
    height: 23vh;
  }

  .modal-content {
    background-color: rgb(230, 230, 230);
    margin: auto;
    margin-bottom: 10rem;
    padding-top: 1rem;
    padding-bottom: 5rem;
    padding-left: 3rem;
    padding-right: 3rem;
    border: 1px solid #888;
    width: 90vw;
  }
}

.expand {
  position: relative;
  width: 100%;
  transition: transform .2s;
}

.img {
  max-width: 300px;
}

.simple-expand {
  transition: transform .2s;
}

.simple-down {
  transition: transform 0.7s;
}

.overlay {
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7); /* Black see-through */
  color: #f1f1f1;
  width: 100%;
  height: 100%;
  transition: .5s ease;
  opacity: 0;
  color: white;
  text-align: center;
  vertical-align: middle;
}

.expand:hover {
  transform: scale(1.03);
  cursor: pointer;
}

.expand:hover .overlay {
  opacity: 1;
}

.simple-expand:hover {
  transform: scale(1.1);
}

.simple-down:hover {
  transform: translate(0,1.5rem);
}

.close {
  color: #aaaaaa;
  text-align: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.title {
  padding-top: 10vh;
  padding-bottom: 10vh;
  font-family: brandon-grotesque;
  font-size: 3rem;
  text-align: center;
}

.white-body {
  font-family: montserrat-light;
  color: rgb(219, 219, 219);
  font-size: 1.1rem;
}

.white-emph {
  font-family: montserrat-bold;
  color: rgb(219, 219, 219);
  font-size: 1.2rem;
}

.black-subheader {
  font-family: brandon-grotesque-light;
  color: rgb(12,13,13);
  font-size: 2rem;
}

.black-sub {
  font-family: brandon-grotesque-light;
  color: rgb(12,13,13);
  font-size: 1.5rem;
}

.black-body {
  font-family: montserrat-light;
  color: rgb(219, 219, 219);
  font-size: 1.1rem;
}

.tag {
  background-color: rgb(215,125,127);
  border: 1px solid rgb(215,125,127);
  color: rgb(255,255,255);
  border-radius: 5px;
  font-family: montserrat-light;
  font-size: 0.85rem;
}

/* .tag {
  background-color: transparent;
  border: 1px solid rgb(215,125,127);
  color: rgb(215,125,127);
  border-radius: 5px;
  font-family: montserrat-light;
  font-size: 0.85rem;
} */

.link {
  background-color: rgb(80, 80, 80);
  border: none;
  color: rgb(240, 240, 240);
  border-radius: 10px;
  font-family: brandon-grotesque-light;
  font-size: 1rem;
  padding: 0.5rem;
  width: fit-content;
  height: fit-content;
  transition: transform .2s;
}

.link:hover {
  transform: scale(1.06);
}

.link-clear:hover {
  transform: scale(1.06);
}

.link-clear {
  background-color: transparent;
  border: 1px solid rgb(215,125,127);
  color: rgb(215,125,127);
  border-radius: 10px;
  font-family: brandon-grotesque-light;
  font-size: 1.2rem;
  padding: 0.5rem;
  width: fit-content;
  transition: transform .2s;
}

.header-with-link-container {
  display: flex;
  justify-content: space-between;
}

.file-link {
  background-color: rgb(80, 80, 80);
  border: none;
  color: rgb(240, 240, 240);
  border-radius: 10px;
  font-family: brandon-grotesque-light;
  font-size: 1.5rem;
  padding: 0.5rem;
  width: fit-content;
  height: fit-content;
  transition: transform .2s;
}

.file-link:hover {
  transform: scale(1.06);
}

.file-links-container {
  display: flex;
  justify-content: center;
  gap: 2vw;
}

body {
  background-color: rgb(219, 219, 219);
  overflow: auto;
}

body.modal-open {
  overflow-y: hidden;
  position: fixed;
}

@font-face {
  font-family: brandon-grotesque;
  src: url(../fonts/Rubik/Rubik-Medium.ttf);
}

@font-face {
  font-family: brandon-grotesque-bold;
  src: url(../fonts/Rubik/Rubik-SemiBold.ttf);
}

@font-face {
  font-family: brandon-grotesque-light;
  src: url(../fonts/Rubik/Rubik-Light.ttf);
}

@font-face {
  font-family: montserrat-light;
  src: url(../fonts/Montserrat/Montserrat-Light.ttf);
}

@font-face {
  font-family: montserrat-bold;
  src: url(../fonts/Montserrat/Montserrat-SemiBold.ttf);
}

@font-face {
  font-family: montserrat-medium;
  src: url(../fonts/Montserrat/Montserrat-medium.ttf);
}