html {
  width: 100dvw;
  overflow-x: hidden;
}

body {
  position: relative;
  max-width: 100%;
  margin: 0;
}

.main {
  position: relative;
  height: 100vh;
  width: 100vw;
}

.index2 {
  position: absolute;
  background-color: rgb(41, 19, 139);
  color: white;
  font-size: 22px;
  border-radius: 10px;
  z-index: 150;
  height: 50px;
  width: 200px;
}

.index2:hover {
  background-color: rgb(55, 27, 180);
}

.index2:active {
  transform: scale(0.95);
}

#programming, #programming-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
}

#programming {
  background-image: url('img-home/new_index_code.png');
  background-size: 75%;
  background-position: 0% 0%;
}



#programming-button {
  background-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  clip-path: polygon(evenodd, 61% 0%, 100% 0%, 100% 18.8%, 39% 100%, 0 100%, 0 81.2%);
  z-index: 150;
}



#career, #career-overlay, #career-border, #career-button {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  clip-path: polygon(0% 0%, 0% 80%, 60% 0%);
}



#career {
  background-image: url('img-home/Degrees.jpg');
  background-size: 75%;
  background-position: 0% 0%;
}


#music, #music-overlay, #music-button, #music-border {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100vh;
  width: 100vw;
  clip-path: polygon(100% 20%, 40% 100%, 100% 100%);
}

#music {
  background-image: url('img-home/IMG_4093.JPG');
  background-size: 75%;
  background-position: 0% 0%;
}

#music-border, #career-border {
  background-color: black;
  height: 102vh;
  width: 102vw;
}


article {
  background-color: rgba(180, 180, 180, 0);
  border: none;
  
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 4vw;
  font-weight: 600;
}

button {
  background-color: transparent;
}

#career-text {
  position: absolute;
  color: white;
  text-shadow: 4px 4px 5px black;
  top: 18vh;
  left: 8vw;
  z-index: 10;
}

#programming-text {
  position: absolute;
  color: white;
  text-shadow: 4px 4px 5px black;
  top: 45vh;
  left: 38vw;
  z-index: 0;
}

#music-text {
  position: absolute;
  color: white;
  text-shadow: 4px 4px 5px black;
  top: 72vh;
  left: 69vw;
  z-index: 140;
}

#career-button, #music-button {
  z-index: 140;
}



#career-overlay, #programming-overlay, #music-overlay {
  background-color: rgb(0, 0, 0, 0.5);
}