*{
  /* border:1px solid red; */
}

html, body{
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5vh;
  padding: 0px;
  margin: 0px;
  z-index:-999;
  /* url(https://imgur.com/7ZTQd1i) */
  /* font-family: 'Open Sans', sans-serif; */
}

#copyright{
  border: none;
  position: fixed;
  left: 10px;
  bottom: -5px;
  z-index: 999;
}

#particles-js{
height: 100vh;
width: 100vw;
position: fixed;
/* background-image:linear-gradient(white,transparent,transparent,transparent),url('https://imgur.com/7ZTQd1i'); */
/* border: 1px solid darkgray; */
/* z-index: -1; */
}

.background::before {
  content : "";
  display: block;
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-image:url(https://images.unsplash.com/photo-1449247709967-d4461a6a6103?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=1053a3cdbabdd85102b762b3a05966ae&auto=format&fit=crop&w=1651&q=80);
  background-size: cover;
  background-repeat:no-repeat;
  width: 100%;
  height: 100%;
  opacity : 0.35;
  z-index: -999;
}

.background{
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* position: relative; */
} 


#statement{
  font-family: 'Ubuntu', sans-serif;
  z-index: -1 ;
  /* height: 50vw; */
  font-weight: bold;
  position: absolute;
  left: auto; 
  padding: 20vh;
  top: 20vh;
  font-size: 7vh;
  color: black;
  /* text-align: center; */
  text-shadow: 1.5px 1.5px rgba(0, 0,0, 0.25);
}


#aside{
  width: 100vw;
  height: 10vh;
  display: flex;
  /* flex-direction: column; */
  justify-content: center;
  /* align-items: center; */
  position: fixed;
  top: 0;
  left: auto; 
  font-size: 1.85vh;
  font-weight: 900;
  background: rgba(232, 231, 231,0.45);
  color:rgb(3, 3, 3);
  z-index: 999 ;
}
#aside-bottom{
  width: 100vw;
  height: 10vh;
  display: flex;
  /* flex-direction: column; */
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: auto; 
  font-size: 2vh;
  font-weight: 900;
  background: rgba(232, 231, 231,0.5);
  color:rgb(3, 3, 3);
  z-index: 999 ;
}
#content{
  margin:10px;
}

#icon{
  opacity: 1;
  /* width:3.25vh; */
  height:3.0vh;
  z-index: 0 ;
  text-align: center;
  margin: 3px;
}

#olee{
  background: transparent;
  position: relative;
  top: 115px;
  left: auto;
  width:40vh;
  height:30vh;
  z-index: 0;
  border-radius:3vh;
  border: 1px solid white;
  display:none;
}

#youtube01{
  background: transparent;
  position: relative;
  top: 80px;
  text-align: center;
  left: auto;
  text-decoration: none;
  z-index: 0;
  display:none;
}

.descriptions{
  width: 15vh;
  height: 5vh;
  cursor: pointer;
  margin-bottom: 3vh;
  font-family: 'Montserrat', sans-serif;
  border: 1px solid darkgray;
  font-size: 2.25vh;
  transform: translateY(2px)
}
 .allworks{
  position: absolute;
  top: 11.5vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center; 
  display: none;
  z-index: 0 ;
}
.work{
  z-index: 0 ;
  margin:3.5px;
  border: 1px solid darkgray;
  overflow: hidden;
  height:35vh;
  width:35vh;
  text-decoration: none;
  /* box-shadow: 3px 3px rgba(0, 0,0, 0.1); */
}
.projectInfo{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: flex-start; 
  z-index: 0 ;
  margin:3.5px;
  border: 1px solid darkgray;
  /* display: none; */
  height:35vh;
  width:35vh;
  background: white;
  font-size: 2vh;
  position: relative;
  text-decoration: none;
  /* box-shadow: 3px 3px rgba(0, 0,0, 0.1); */
}
.project{
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center; 
}
#aside a{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width:15vh;
  color: black;
  cursor: pointer;
}
#aside a:link{
  /* Applies to all unvisited links */
  text-decoration:  none;
  color: black
  } 
  #aside a:hover{
  border-bottom:5px solid darkgray;
  background: rgba(0, 0,0, 0.045)
}

#aside-bottom a {
  margin: 10px;
}
.resume{
  font-size: 1.85vh;
}z
@media only screen and (max-width: 3600px)
  {
    #olee{
      background: transparent;
      margin-top:-100px;
      font-size: 1.75vh ;
      cursor: pointer;
      text-decoration: none;
      color:black;
    }
   
}

@media only screen and (max-width: 1000px)
  {
    #olee{
      background: transparent;
      top: 225px;
      left: auto;
      z-index: 0 ;
    }
    #statement{
      height: 50vh;
      width: 90vw;
      text-align: right;
      top: 0px;
      margin-right: 50px;
      padding: 30vh;
      overflow-x: hidden;
      }
  
    .allworks{
      top: 15vh;
    flex-direction: row;
    }

      .work{
        z-index: 0;
        margin:3.5px;
        border: 1px solid darkgray;
        overflow-x: hidden;
        height:40vh;
        width:40vh;
        box-shadow: 3px 3px rgba(0, 0,0, 0.1);
      }
      .projectInfo{
        z-index: 0 ;
        font-size: 2vh;
        margin:3.5px;
        display:none;
        border: 1px solid darkgray;
        /* overflow: hidden; */
        height:20vh;
        width:40vh;
        box-shadow: 3px 3px rgba(0, 0,0, 0.1);
      }
    #icon{
      opacity: 1;
      /* width:3.25vh; */
      height:3vh;
      z-index: 0 ;
      margin: 5px;
      text-align: center;
      /* flex:1; */
    }
    #aside{
      justify-content: center;
    }
    #aside-bottom{
      width: 100vw;
      height: 12vh;
      z-index: 999 ;
      background: rgba(232, 231, 231,0.8);
    }
    #aside a{
      width:13vh;
    }
}