html{ 
    font-family:Verdana, Tahoma, sans-serif;
    scroll-behavior: smooth !important;
    max-width: 100%;

}
.center{ 
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.myName{ 
    display: block;
    width: 100vw;
    height: 100vh;  
    margin: 0; 
    padding: 0; 
    max-width: 100%;
    background-color: 
    #fefefc;
    

}
#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 80%;
  min-height: 80%;
  opacity: 10%;
  left: 50%;
  top: 50%;
  transform: translate(-60%, -50%);


}
.myBlogPost{ 
    display: block;
    width: 100vw;  
    height: auto; 
    margin: 0; 
    padding-bottom: 10px; 
    max-width: 100%;
    background-color: white;
}
#intro{
    font-weight: 450;   
    font-family: helvetica, sans-serif; 
    font-size: 2.4rem; ;
}
#intro1{
    font-size: 1.2rem;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;

}


.nav-bar{ 
    position: sticky;
    height: 40px; 
    width: 98vw;
    margin: 0; 
    padding: 0; 
    top: 0;
    z-index: 1;
    background-color: rgba(0,0,0,0);

 
}

ul.nav-bar li{
    float: right;
    display: inline-block;
    padding: 5px 5vw;   
    font-size: 1rem;  
    margin-top: 5px; 
    color: black; 
}

.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    margin: auto;
    border-top: 30px solid black;
    position: relative;
    display: relative; 
    animation: down 2s infinite; 
    top: 100px;
    animation-delay: 0.5s
  }

  @keyframes down{
    0% {opacity: 0.1; transform: translateY(0px);}
    10%{opacity: 1; transform: translateY(3px);}
    30%{opacity: 1; transform: translateY(6px);}
    50%{opactity: 0.5; transform: translateY(15px);}
    100% {opacity:0; transform: translateY(30px);} 
 } 
.contactbar{ 
  position: sticky; 
  float: left; 
  top: 23%; 
  transform: translateY(50%);
  z-index: 2; 
  display: block;
}
.contactbar div img{ 
  width: 3vw; 
  height: 3vw; 
  transform: translate(-0.5vw,0.75vw);
  float:right; 
  padding-left: 0.5vw;
  
}
.contactbar div{ 
  width: 10vw; 
  height: 4.5vw;
  transition: transform 1s;
  transform: translateX(-6vw);
  margin:0; 
  text-align: center; 
  line-height: 4.5vw;
  filter: saturate(75%);

  
}
#github{ 
  background-color:black; 
}
#linkedin{ 
  background-color:#0a66c2 ;
}
#email{ 
  background-color: mediumturquoise; 
}
.contactbar p{ 
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  width: 5vw;
  color: white;

  font-size: 1.2vw;
  display: inline-block;
  position: relative;

  
}

.contactbar div:hover{ 

  transform: translateX(0); 
}
.Aboutme{ 
    text-align: center;
    background-color:  #fffAF0;
    margin: 0;  
    padding: 0; 
    position: relative;
    height: 100vh;
    display: block;
}

div.Aboutme h1{
    font-weight: 450;
    margin: 0;
    position:relative; 
    top:20%;


}

.project_page{ 
    display:block; 
    background-color: #FFFAFA;
    text-align: center;
    position: relative; 
    height: auto;
    clear: both;
    overflow: auto;
}
.projectdisplaycontainer{ 
  display:flex; 
  justify-content:space-evenly;
}
.projectdisplay{ 
  width: 20vw; 
  height: 25vh; 
  background-color: white; 
  border-radius: 10px; 
  border: solid black 1px;
  margin-bottom: 10vh;


}
.projectdisplay img{ 
  overflow: hidden;
  width: 100%;
  height: 100%;
  object-fit: cover;  
  border-radius: 10px; 
}
.projectdisplay:hover{ 
  box-shadow: 0 0 20px rgba(33,33,33,.2); 
}
#technologies-container{ 
  display:flex; 
  justify-content:space-evenly;
  padding-bottom: 5vh; 
}
.techused{
  width: 20vw; 
  height: 25vh; 
  background-color: white; 
  border-radius: 10px; 
  border: solid black 1px;
}
.techused img{ 
  overflow: hidden;
  width: 60%;
  height: 60%;
  object-fit: contain;  
  padding-top: 3vh; 
  margin: auto;
}
.techused:hover{ 
  box-shadow: 0 0 20px rgba(33,33,33,.2); 
}
li a{ 
    color: black; 
    text-decoration: none;
    
}
#myphoto{
    border-radius: 50%;
    height: 15vw; 
    width:auto;

}
.desc{
    display: flex; 
    justify-content: space-evenly;
    padding-bottom: 100px; 
    position: relative; 
    top: 30%

}
#info{ 
    width: 25%; 
    font-size: 1.2rem;
}
.projects{ 
    display:grid; 
    grid-template-columns: 45vw 45vw;
    grid-template-rows: 200px 20px; 
    column-gap: 4vw; 
    justify-items: center;

}


  .blog-grid-item {
    text-align: center;
    display: inline-block;
    vertical-align: top;    

  }
  .contact{ 
    background-color: wheat; 
  }
  .license{ 
    float: left; 
    color: lightcoral;
    background-color: wheat; 
    font-size: 0.75rem;  
    min-width: 100%; 
    position: relative; 
  }
  div.contact h2{ 
    margin: 0; 
    padding: 20px 0px 20px 0px; 
    font-weight: 450; 
    text-align: center;
  }
  .link-space{ 
    display: flex; 
    justify-content: center; 
    gap: 50px;
  }
  .links{ 
    border: 2px solid black; 
    height: 30px; 
    width: 90px; 
    text-align: center;
    margin-top: 20px;
    margin-bottom: 50px; 
    border-radius: 10px;  
    color: black; 
    text-decoration: none;  
    position:relative; 
    display: flex; 
    justify-content:center;
    align-items:center;

  }
  .contact-link{ 
    color: black; 
    text-decoration: none;  
  }

div.captions div, div.captions p{
    float: left;    
}

.blog-grid{ 
    display: grid;
    grid-template-columns: repeat(5, minmax(15vw, 10vw)); 
    grid-template-rows: repeat(auto-fit, minmax(25vw, 1fr)); 
    column-gap: 10vw; 
    justify-items: center;
}

#post-header{ 
    margin-left: 50px; 

}
#post-content{ 
    width: 55vw; 
    margin: 0 auto; 
}
#blog-icon{ 
        width: 100%; 
        height: 100%; 
        object-fit: fill;
}
.sidebar{ 
  height:0;
  width: 0; 
}
.sidebarlist{ 
height: 0; 
width:0 ;  
margin: 0 ;
visibility: hidden;
}


@media only screen and (max-width: 600px) {


    ul.nav-bar li a{
        display: none; 
    }
    div.Aboutme h1{
        font-weight: 450;
        margin: 0; 
        padding: 50px 0 50px 0;
        font-size: 1.5em; 
    
    }
    .hamburger-icon{ 
        cursor: pointer;
        position: sticky;
        top: 3px; 
        right: 5vw;  
        display: inline;
        float:right;  
        margin-right: 10px; 
        z-index: 3; 

    }
    .bar1{ 

    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;


    }
    .bar2{

    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;


    transition: 0.4s;
    }
    .bar3{

    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;


    }
    /* Rotate first bar */
.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
    background-color: white; 
  }
  
  /* Fade out the second bar */
  .change .bar2 {
    opacity: 0;
    background-color: white; 
  }
  
  /* Rotate last bar */
  .change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
    background-color: white; 
  }
  .sidebar{ 
    position: fixed; 
    background-color: black; 
    right: -40vw; 
    height: 100%; 
    width: 40vw; 
    transition: 1s;
    z-index: 2; 
    max-width: 100%; 
    visibility: hidden;
  }
  .sidebarlist{ 
    right: -40vw; 
    transition: 1s; 
    list-style: none; 
    visibility: hidden;
    margin-top: 15vw; 
    text-decoration: none; 
    
  }
  .change .sidebar{ 
    transform: translateX(-40vw); 
    visibility:visible;
  }
  .change .sidebarlist{ 
    visibility: visible; 
    
  }
  .desc{
    display: block;  
    padding-bottom: 100px; 
    top: auto;
}
  .Aboutme{ 
  height: auto; 
}
div.Aboutme h1{
  top: auto;  
}
#intro{
  font-weight: 450;   
  font-family: helvetica, sans-serif; 
  font-size: 1.75rem;
  white-space:nowrap; 
}
#intro1{
  font-size: 1rem;
  white-space:nowrap; 
}
#info{ 
  margin: auto;
  width: 70%; 
}
#myphoto{ 
  padding-bottom: 5vw; 
}
#myVideo {

  height:60%;
}
.project_page{ 
  display:block; 
  background-color: blanchedalmond;
  text-align: center;
  position: relative; 
  height: 100%;
}
.projectdisplaycontainer{ 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.projectdisplay{ 
  width: 60vw;
  height: 40vh;
  background-color: white;
  border-radius: 10px;
  margin: 3vh;

}
.projectdisplay img{ 
  height: 40vh; 
  width: 60vw; 
  border-radius: 10px; 
}
.contactbar{ 
  visibility: hidden;
}
}