#logo{
   background-image: url(Assets/Logo.png);
   width: 10vw;
   height: 10vw;
   background-size: contain;
   border-radius: 75px;
}


body{
    background-color: black;
    


}
.nav2 {
    display: flex;
    flex-direction: column;
        justify-content: space-between;
        
       
        font-family: 'Bree Serif', serif;
}
@media screen and (max-width: 600px)
{
  .nav2{
    
    display:inline-block;
  }
  
  
}
@media screen and (max-width: 500px)
{
  .nav2{
    
    display:inline-block;
  }
  
  
}

h1{
    text-align: center;
    font-weight: 700;
    font-size: 3em;

}
#pic{
  position: relative;
width: 100%;
z-index: 0;
-webkit-filter: grayscale(60%); 
filter: grayscale(60%);

}
#pic:hover{
    display: flex;
    justify-content: center;
    align-content: center;
    z-index: 1;
    transition-duration: 1.5s;
    transform: scale(1.2);
    -webkit-filter: grayscale(0%); 
filter: grayscale(0%);

}
.thisItem5{
    font-size: larger;
    font-family: 'Bree Serif', serif;
    padding: 15px;
    border-radius: 10px;
    border-width: 0px;
    background-color: white;
    animation: fadeInAnimation ease 3s ;
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
    margin-left:100px;
  margin-top:-100px;
  position: relative;
}
.thisItem6{
  font-size: larger;
  font-family: 'Bree Serif', serif;
  padding: 15px;
  border-radius: 10px;
  border-width: 0px;
  background-color: white;
  animation: fadeInAnimation ease 3s ;
  animation-iteration-count: 1; 
  animation-fill-mode: forwards; 
  margin-left:180px;
  margin-top:-90px;
  position: relative;
}
.thisItem7{
  font-size: larger;
  font-family: 'Bree Serif', serif;
  padding: 15px;
  border-radius: 10px;
  border-width: 0px;
  background-color: white;
  animation: fadeInAnimation ease 3s ;
  animation-iteration-count: 1; 
  animation-fill-mode: forwards; 
  margin-left:320px;
  margin-top:-80px;
  position: relative;
}
.thisItem8{
  font-size: larger;
  font-family: 'Bree Serif', serif;
  padding: 15px;
  border-radius: 10px;
  border-width: 0px;
  background-color: white;
  animation: fadeInAnimation ease 3s ;
  animation-iteration-count: 1; 
  animation-fill-mode: forwards; 
  margin-left: 415px;
  margin-top:-70px;
  position: relative;
}


button:hover{
    background-color: rgb(245, 242, 223) ;
}
main{ 
    display: flex;
    justify-content: center;
}




.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px ;
  
  }
  
  /* Create four equal columns that sits next to each other */
  .column {
    flex: 25%;
    max-width: 25%;
    padding:0 3vw ;
    padding-bottom: 20px;
    
  }
  
  .column img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;

  }
  
  /* Responsive layout - makes a two column-layout instead of four columns */
  @media screen and (max-width: 800px) {
    .column {
      flex: 50%;
      max-width: 50%;
    }
  }
  
  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
    .column {
      flex: 100%;
      max-width: 100%;
    }
  }
  .resume{
    width: 35vw;
    margin-left:30vw;
    margin-top: 0vw;

  }
  .download{
      margin-left: 45vw;
  }
  #logo1{
      position: fixed;
      
    left: 10vh;
    width: 50vw;
    height: 50vw;
    background-size: cover;
    border-radius: 50vw;
    background-image: url(Assets/Logo.png);
   
    
 }
 @keyframes fadeInAnimation { 
    0% { 
        opacity: 0; 
    } 
    100% { 
        opacity: 1; 
     } 
} 

  .thisItem1{
    font-size: larger;
    font-family: 'Bree Serif', serif;
    padding: 25px;
    border-radius: 10px;
    border-width: 01px;
    background-color: white;
    position: relative;
    left: 10vw;
    top: 20vh;
    animation: fadeInAnimation ease 2s ;
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
  }
  .thisItem2{
    font-size: larger;
    font-family: 'Bree Serif', serif;
    padding: 25px;
    border-radius: 10px;
    border-width: 01px;
    background-color: white;
    position: relative;
    left: 10vw;
    top:30vh;
    animation: fadeInAnimation ease 3s ;
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
  }
  .thisItem3{
    font-size: larger;
    font-family: 'Bree Serif', serif;
    padding: 25px;
    border-radius: 10px;
    border-width: 01px;
    background-color: white;
    position: relative;
    left: 10vw;
    top:40vh;
    animation: fadeInAnimation ease 4s ;
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
  }
  .thisItem4{
    font-size: larger;
    font-family: 'Bree Serif', serif;
    padding: 25px;
    border-radius: 10px;
    border-width: 01px;
    background-color: white;
    position: relative;
    left: 10vw;
    top: 50vh;
    animation: fadeInAnimation ease 5s ;
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
  }
  #year{
    background-color: none;
    border: none;

    animation: fadeInAnimation ease 4s ;
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
    
  }
#year{
    font-size: 60px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: rgba(220, 199, 240, 0.911);;
    text-decoration: none;}
    #year1{
      font-size: 60px;
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      color: cornflowerblue;
      text-decoration: none;}
  #project{
  text-align: center;
  }
  #year:hover{
font-size:70px;

  }
  #year1:hover{
    font-size:70px;
  }
  .cards { height: 100%; padding: 0; margin: 0; }
  .card { width: 50%; height: 50%; float: left; }
  #div1 { background: black }
  #div2 { background: black }
  #div3 { background: black}
  #div4 { background: black }

  #cards{
    position: relative;
    width:70%;
    z-index: 0;
    padding: 15px;
    margin-left: 50px;
    -webkit-filter: grayscale(60%); 
filter: grayscale(60%);
border-radius: 30px;
border-color: beige;

  }
  #cards:hover{
    transition-duration: 1.5s;
	transform: scale(1.3);
   z-index:1;
    /* width: 80%; */
    -webkit-filter: grayscale(0%); 
filter: grayscale(0%);
  }
  #menu{
    width: 50%;
    position: relative;
    z-index: 0;
    filter: grayscale(60%);
  }
  .menu{
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
  }
  #menu:hover{
    z-index: 1;
    transition-duration: 1.5s;
	transform: scale(1.3);
   
    -webkit-filter: grayscale(0%); 
filter: grayscale(0%);
  }
  h1{
    color: white;
  }
  #about{
    color:white;
  }


  #pic1{
    position: relative;
    /* padding: 20px ; */
    width:200px;
    height:250px;
    /* border-radius: 50px; */
    z-index: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.8),rgba(255, 255, 255, 0.8)), url(Assets/Cinderella/01.png);
    background-size: cover;
    font-size: x-small;
    margin-left: 40px;
    
  }
  #pic1:hover{
    background-image: url(Assets/Cinderella/01.png);
   
    transform: scale(1.1);
    z-index: 1;
    transition-duration: 1.5s;
   
   
  /* border-style: dotted; */
  }
  
  #pic2{
    position: relative;
    /* padding: 20px; */
    width:200px;
    height:250px;
    /* border-radius: 50px; */
    z-index: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.8),rgba(255, 255, 255, 0.8)), url(Assets/Cards/cardback.png);
    background-size: cover;
    background-repeat: no-repeat;
    font-size: medium; 
    margin-left: 40px;
    
  }
  #pic2:hover{
    background-image: url(Assets/Cards/cardback.png);
    
    transform: scale(1.1);
    background-repeat: no-repeat;
    z-index: 1;
    transition-duration: 1.5s;
  }
  
  #pic3{
    position: relative;
    /* padding: 20px; */
    width:200px;
    height:250px;
    /* border-radius: 40px; */
    z-index: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.8),rgba(255, 255, 255, 0.8)), url(Assets/Projects/11.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    font-size: medium;
    margin-left: 40px;
  }
  #pic3:hover{
    background-image: url(Assets/Projects/11.png);
  
    background-repeat: no-repeat;
    transform: scale(1.1);
    z-index: 1;
    transition-duration: 1.5s;
    
  }

  
  #pic5{
    position: relative;
    /* padding: 20px; */
    width:200px;
    height:250px;
    /* border-radius: 50px; */
    z-index: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.8),rgba(255, 255, 255, 0.8)), url(Assets/Projects/9.jpg);
    background-size: cover;
    
    font-size: medium;
    margin-left: 40px;
    
  }
  #pic5:hover{
    background-image: url(Assets/Projects/9.jpg);
    
   
    transform: scale(1.1);
    z-index: 1;
    transition-duration: 1.5s;
  }
  
   .text{
     font-size: x-large;
     background-color: rgb(245, 242, 223) ;
   padding: 5px;
    text-decoration: none;
    color: black;
    text-align: justify;
    font-family: 'Bree Serif', serif;
   }
   .about{
     font-size: xx-large;
     font-family: 'Bree Serif', serif;
     color: white;
    
   }
   .projecty{
     display:flex;
     flex-direction: row;
   }

   @media screen and (max-width: 600px){
    
    .thisItem5 , .thisItem6 , .thisItem7 , .thisItem8 {
      margin-top: 0px;
      margin-left: 0px;
    }
    .projecty{
      display: inline-block;
      margin-left: 0px;
    }
    
    
    }
    @media screen and (max-width: 500px){
    
      .thisItem5 , .thisItem6 , .thisItem7 , .thisItem8 {
        margin-top: 0px;
        margin-left: 0px;
      }
      .projecty{
        display: inline-block;
        margin-left: 0px;
      }
      
      
      }
      
  
   .dropbtn {
     background-color: black;
    padding: none;
    border: none;
    cursor: pointer;
    float:right;
    
    
  }
  
  .dropbtn:hover, .dropbtn:focus {
    background-color: black;
    border-color: black;
  }
  
  .dropdown {
    position: relative;
    display: inline-block;
    float: right; 
  }
  
  .dropdown-content {
    display: none;
    position: relative;
    background-color: #f1f1f1;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    float:right;  
    

  }
  
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-family: 'Bree Serif', serif;
  }
  
  .dropdown a:hover {background-color: rgb(245, 242, 223);}
  
  .show {display: block;}

  #divy {
    width: 35px;
    height: 5px;
    background-color: white;
    margin: 6px 0;
  }
  
  h2{
    color: white ;
    text-align: center;
  }