html, body {
  font-family: "Segoe UI",SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif;
  line-height: 1.5;
  font-size: 1.1rem;
  margin: 0;
 color: white;
 min-height: -webkit-fill-available;
 min-width: -webkit-fill-available;
 font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif

}

*{
cursor: none;
}
.main {
  margin-top: 8vh;
  max-width: 100vw;
  display: flex;
  align-items: center;

}
p1 {
 color: white
}
#bg {
 min-height: -webkit-fill-available;
 min-width: -webkit-fill-available;
 position: fixed;
 z-index:-1;
 margin: 0;
background: radial-gradient(circle, rgb(36, 39, 66) 0%, rgb(26, 26, 26) 100%);
}
/*calc(1vw + 1vh + 0.5vmin)
font-size: calc(1rem + 2vw)*/

.skillBox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  background: hsla(0, 0%, 20%, 1);
  border-radius: .5vw;
  height: fit-content;
  margin: 1vh;
  min-width: 200px;
  transition: .5s ease;
  width: 30%;
  }
  .skillBox div {
  align-items: center;
  height: fit-content;
  padding: 2%;
  text-align: center;
  width: 46%;
  }
  .skillBox div h4 {
  color: var(--light);
  font-family: var(--sans);
  margin: 0;
  padding: 0;
  }
  .skillBox img {
  border-radius: .5vw .5vw;
  filter: brightness(50%) grayscale(60%);
  height: auto;
  margin: 2%;
  transition: .5s ease;
  width: 46%;
  }
  .skillBox:hover {
  transform: scale3d(1.1,1.1,1.1) rotate(5deg);
  }
  .skillBox:hover img {
  filter: none;
  transform: scale3d(1.25,1.25,1.25)
  }
  
.navbar-div {
  font-size: calc(3vmin);
  font-weight: 350;
  color: white;
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 2%;
  margin-left: 2%;
}
nav {
  display: flex;
  background-color: black;
  width: 100%;
  height: 9vh;
  justify-content: right;
  margin: auto;
  padding: auto;
  margin-top: 0;
  position: fixed; 
 top: 0px;
 z-index: 2
}
.dropdown {
  margin-bottom: 0;
  height: 15px;
  width: auto;
}
.navbar-div:hover {
  color: #08b286;
  opacity: 0.5;
}
.subdiv {
  width: 50vw;
  height: 79vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 15vh;
}
.flex-image {
  position: absolute;
  z-index: 0;
  max-height: 100%;
  max-width: 45%;
  left: 50vw; 
}
#about_me img {
background: #000;
border: none;
border-radius: .5vw;
box-shadow: 10px 10px #53c96e;
height: 25vw;
transition: 1s ease;
width: auto;
margin-right: 5vw;

}

.container{
  padding: 75px 0;
  margin: 0 auto;
  width: 95%;
 }
.gallery-wrap {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 70vh;
  margin-bottom: 0px;
 }
#about_me img:hover {
box-shadow: 20px 20px #53c96e;
-webkit-transform: translate(-5px,-5px);
transform: translate(-5px,-5px);
}

.bigtext {
  font-weight: 600;
  font-size: calc(3vw + 3vh + 1.5vmin);
  color: white;
  z-index: 1;
}
.medtext {
 font-weight: 500;
 font-size: calc(1.1vw + 1.1vh + 0.5vmin);
 color: white
}
.small-green {
font-weight: 400; 
font-size: 25px;
 white-space: wrap; 
 color: #53c96e;
}
#aspects {
 font-weight: 600;
 font-size: calc(3vw + 3vh + 1.5vmin);
  white-space: wrap; 
  margin: 0 auto; 
  color: #53c96e;
}
#aspects::after {
  content: '|';
  margin-left: 5px;
  animation: blink 0.7s infinite;
}

@keyframes blink {
 0% { opacity: 0.2; }
  50% { opacity: 1; }
  100% {opacity: 0.2;}
}
#projects {
 height: 100vh;
 width: auto;
 color: white;
}
html,body{
 width: 100%;
 height: 100%;
}

.item {
 flex: 1;
 max-height: 100%;
 max-width: 100%;
 background-position: center;
 background-size: cover;
 background-repeat: none;
 transition: flex 0.8s ease;
 border-radius: 2px;
 border-color: black;
 border-style: solid;
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 background-color: white;
 &:hover{
   flex: 7;
   background-color: transparent;
 }
}
.cardImg {
 margin: 0;
 padding: 0;
 max-width:100%;
 max-height:100%;
 overflow: clip;
 object-fit: contain;
}
.sideText {
 display: none;
}
.item:hover .cardImg {
 object-fit: contain;
}
.item:hover .sideText {
 display: flex;
 flex-direction: column;
 flex-wrap: wrap;
 justify-content: space-evenly;
 overflow: hidden;
}
.center {
 text-align: center;
}
.flexbox-vertical {
 display: flex;
 flex-direction: column;
 flex-wrap: wrap;
 justify-content: space-evenly;
}
.goldborder {
border-color: gold;
border-width: 5px;
}

.column-2 {
padding-left:70px;
padding-right: 70px
}
.flexbox-horizontal {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
margin: auto;
}

.separator {
display: flex;
align-items: center;
text-align: center;
margin-left: 5%;
margin-right: 5%
}

.separator::before,
.separator::after {
content: '';
flex: 1;
border-bottom: 4px solid white;
}

.separator:not(:empty)::before {
margin-right: 50px;
}

.separator:not(:empty)::after {
margin-left: 50px;
}
body{
height: 300vh;
}
.cursor{
  position: fixed;
  height: 8px;
  width: 8px;
  border-radius: 50%;
  background-color: white;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 50;
}
.cursor-follower{
  position: fixed;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  border-radius: 50%;
  border: 3px solid #53c96e;
  z-index: 49;
  transition: 0.2s ease-out;
  pointer-events: none;
  will-change: all;
  transform: translate(-50%, -50%); 
}
.skillsContainer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 80vh;
justify-content: space-between;
margin: 2%;
max-width: 100%;
}
@media only screen and (max-width:500px) {
  #about_me {
    flex-direction: column;
    text-align: center;
  }
  .skillBox {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    background: hsla(0, 0%, 20%, 1);
    border-radius: .5vw;
    height: fit-content;
    margin: 1vh;
    min-width: 200px;
    transition: .5s ease;
    width: 100%;
  }
  .gallery-wrap {
    display: block;
    flex-direction: column;
    width: 100%;
    height: 70vh;
  
  }
  .container{
    height: fit-content;
    overflow: auto;
   }
  .item {
    flex: 1;
    max-height: 300vh;
    max-width: 100vh;
    background-position: center;
    background-size: cover;
    background-repeat: none;
    transition: flex 0.8s ease;
    border-radius: 2px;
    border-color: black;
    border-style: solid;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: white;
   }
   .item:hover {
      flex: 7;
      background-color: transparent;
   }
   .item:hover .sideText {
    max-width: 100%;
    overflow: visible;
   }
   #about_me img {
height: 50vw;
}
  ul {
    margin-right: 4%
  }
  }