.main{
    /* background-color: darkgray; */
    /* height: 585px; */
}

.topbar{
    display: flex;
    /* display: block; */
    justify-content:space-evenly;
    max-height: 69px;
    width: 100%;
    border-style: inset;
    background-color: lightgray;
    position: fixed;

    
    /* background-color: black; */
    
}

.shadow img {
    transition: .5s ease;
    }
    
    .shadow img:hover{
    box-shadow:
    1px 1px #373737,
    2px 2px #373737,
    3px 3px #373737,
    4px 4px #373737,
    5px 5px #373737,
    6px 6px #373737;
    -webkit-transform: translateX(-3px);
    transform: translateX(-3px);
    transition: .5s ease;
    }

h1{
    color: black;
    font-weight: bolder;
    text-align: center;
    margin-top: 95px;
    font-family: "Cherry Cream Soda";
    font-size: 3vw;
}

h2{
    color: black;
    font-weight: bolder;
    text-align: center;
    font-family: "Cherry Cream Soda";
    font-size: 2vw;
}

h3{
    font-family: "Cherry Cream Soda";
}


.buttons{
    
    display: flex;
    color: aliceblue;
    font-weight: bold;
    /* background-color: gray; */
    /* height: 30px; */
    /* margin-top: ;    */
    justify-content: space-around;
    
}

button{
    border: none;
    background-color: inherit;
    padding: 14px 28px;
    font-size: 2vw;
    cursor: pointer;
    display: inline-block;
    color: black;
    display: flex;
    font-family: "Patrick Hand SC";
    /* justify-content: space-around; */

}

p{
    text-align: center;
    /* font-weight: bold; */
    font-size: x-large;
    font-family: "Patrick Hand SC";
    /* font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
    max-width: max-content;
    margin: 0px;
    margin-top: 40px;
    color: black;
}
.infobox{
display: flex;
flex-direction: column;
align-items: center;
height: auto;
width: 100%;
/* box-shadow: 2px 2px 1px ; */

}

.h2{
    color: white;
    /* font-size: xx-large; */
    font-size: 1vw;
}



img{
    width: 20px;
    height: auto;
    /* align-items:center; */
    margin-top: 18px;
    /* margin-left: 40px; */
    /* padding: 10px; */
    
}
.pictures{
    /* align-items: center; */
    margin-left: 100px;
    /* display: flex; */
    /* justify-content: space-around; */
    /* padding-left: 20px; */
    margin-top: 12px;
    
}

.pictures > a{
    width: 20px;
    height: 20px;
}

.face{
    height: 100px;
    width: 100px;
    display: flex;
    margin: 0px;
    padding: 0px;
   border-radius: 40px;
   margin-top: 40px;
   
}

.github{
    /* margin-right: 10px; */
}

.aboutme{
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    height: 121%px;
    
}

.aboutme > img{
    height: 475px;
    width: 290px;
    padding-right: 20px;
    margin-left: 40px ;
    border-radius: 225px;

}

.aboutme > p{
    font-size: 2vw;
     max-width: 528px; 
    height: auto; 
}

.github{
    color: white;
    background-color: antiquewhite;

}

.skills{
    /* display: flex; */
    
}

.skillbox{
    display: flex;
flex-direction: column;
align-items: center;
height: 50%;
width: 100%;
}

.skills > h2{
    /* font-size: xx-large; */
    color: black;
    font-size: 2vw;
}

.myskills{
text-align:center;
display: flex;
/* justify-content: space-between; */
}

.skill1 > p{
/* font-size:larger; */
/* border-right: 5px; */
border-color: orange;
border-style: inset;
color: black;
font-size: 2vw;
/* width: 300px;
height:150px ; */
padding: 20px;
}

.skill2 > p{
/* font-size: larger; */
font-size: 2vw;
border-color: orange;
border-style:inset;
color: black;
/* width: 300px; */
/* height: 150px; */
padding: 20px;

}

.skill3 > p{
    /* font-size: larger; */
font-size: 2vw;
border-color: orange;
border-style: inset;
color: black;
/* height: 150px; */
/* width: 300px; */
padding: 20px;
}

.skills > h3{
    display: flex;
    justify-content: center;
    font-size: 17px;
    color: gray;
}

.grow{
    display: flex;
   justify-content: space-evenly;
   width: 100%;}

   .grow img{
    transition: 1s ease;
    }
    
    .grow img:hover{
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    transition: 1s ease;
    }


.proj-pic{
    width: 240px;
    height: 340px;
    /* padding-bottom: 10px; */
    background-color:antiquewhite;
    border-radius: 8%;
    box-shadow: 3px 3px 2px ;
    /* padding-bottom: 30px; */
    /* border-style: dashed; */
    /* border-color: burlywood; */
}

.projectbox{
    display: flex;
flex-direction: column;
align-items: center;
height: 485px;
width: 100%;
}

.proj1{
    display: flex;
    flex-direction: column;
    /* padding-left: 10px; */
    /* border-style: inset; */
    /* border-color: transparent; */
}

.theList{
    font-size: 25px;
}

 a{
    /* padding-top: 15px; */
    /* padding-bottom: 8px; */
    align-items: center;
    /* margin-left: 150px; */
    font-size: larger;
    color: black;
    font-size: 25px;
}

a:link {
    color: black;
    text-decoration: none;
}

a:visited {
    color: black;
    text-decoration: none;
}

a:hover {
    color: #80007f;
    text-decoration: none;
}



.contact-section{
    /* background-color: rgb(227, 203, 203); */
    padding-top: 75px;
}

.contact-section > h2{
    font-size: large;
    color: black;
    margin: 10px;

    /* display: flex; */
}

.contact-logo{
 
}

.logos{
    display: flex;
    justify-content: space-evenly;
    
}

.logos img{
transition: 1s ease;
}

.logos img:hover{
-webkit-transform: rotateZ(-10deg);
-ms-transform: rotateZ(-10deg);
transform: rotateZ(-10deg);
transition: 1s ease;
}

#link-logo:hover{
    animation: ease-in 0.5s;
}

@keyframes ease-in {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
  }

#github-logo{
    height: 70px;
    width: 70px;
}

#link-logo{
    height: 70px;
    width: 70px;
}

#mail-logo{
    height: 70px;
    width: 70px;
    
}