* {
    
    box-sizing: border-box;
    font-family: 'Comfortaa', cursive, sans-serif;

}
html {
    font-size:16px;
    scroll-behavior: smooth;
}
body {
    margin:0;
    padding:0;
    display:flex;
    flex-direction: column;
    align-items: stretch;
}
header {
    width:100%;
    background-color:#3d115f;	
    display:flex;
    flex-direction: column;
    height:auto;
   
    
}
.intro {
    display:flex;
    flex-direction:column;
align-items:center;
width:100%;
margin:10px;
}

.intro p {
    color:white;
}
.navbar {
     display:flex;
    justify-content: space-between;
    align-items:center; 
    color:#ccf381;

    
}

.brand-title {
    font-size:1.5rem;
    margin:.5rem;
}
.brand-title a{
color:#ccf381;
text-decoration: none;
}
.navbar-links ul {
    margin:0;
    padding:0;
    display:flex;
   
}
.navbar-links li {
    list-style: none;
}
.navbar-links li a {
    text-decoration: none;
    color:white;
    padding:1rem;
}
.navbar-links a:hover {
    color:#ccf381;
}

.toggle-button{
     position:absolute; 
    top:.75rem; 
    right:3rem; 
    text-align: right;
    display:none;
    width:30px;
    height:20px;
    justify-content: space-between;
    flex-direction: column;
    align-items: flex-end;
    
    
    
}

.toggle-button .bar {
    height:3px;
    width:100%;
    background-color: white;
    border-radius:10px;
    
   
 
}

.img-me {
    width:100%;
    height:auto;
    padding:0.25rem;
}

#about {
 padding:10px;
 
 
}

 #about:scrolled-content {
    display: flex;
    
    animation: fadeInUp; /* referring directly to the animation's @keyframe declaration */
    animation-duration: 2s;
} 
#experience {
    background-color:hsl(45, 29%, 98.2%);


    padding:1rem;
    width:100%;
    height:auto;
}
#experience h3 {
    color:#3d115f;
}
#experience h2 {
    color:#ccf381;
}
#experience p {
    color:#3d115f;
}

#contact {
    display:flex;
    flex-direction:column;
    align-items:center;
    background-color: #3d115f;
    padding:2rem;
}
#contact p {
    color:white;
}
#contact p {
    text-align:center;
}

.contact-button {
    background-color:#3d115f;
    border:1px solid #ccf381;
    cursor: pointer;
    padding:10px;
    
    color:black;
}

.contact-button a {
    text-decoration: none;
    color:white;
}

/* .contact-button:hover {
    background-color:#ccf381;
} */
h1, h2{
    color:#ccf381;
}
.img-container {
    

    padding:30px;
 }
 .img-container h1 {
    text-align: center;
 }
 .img-container img {
    width:100%;
    height:auto;
 }
 .img-container h2 {
    text-align:center;

 }
 .twitter {
    background-color:hsl(45, 29%, 98.2%);

 }
 
 .button{
    border: 1px solid black;
    
    background-color: #3d115f;
    text-decoration: none;
    padding:10px;

 }
 .button a {
    text-decoration: none;
    color:white;

 }
 .button-primary a:hover {
    color:#ccf381;

 }
 .case-studies {
    display:flex;
    flex-wrap:wrap;
    
 }
 .card {
    display:flex;
    /* justify-content: space-between; */
    margin:10px;
    flex-wrap: wrap;
    animation: fadeIn; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s;
    
}

.card-item {
    margin:10px;
        box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
    
    background-color:white;
    
    display:flex;
    flex-direction: column;
    align-items: center;
    max-width:800px;
    margin:20px;

}

.card-item:hover {
    display: flex;
    
  animation: pulse; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s; /* don't forget to set a duration! */
}

.button-primary {
    border: 1px solid black;
    background-color: purple;
    
   padding:10px;
   margin-bottom: 20px;
}

.button-primary a {
    text-decoration: none;
    color:white;
    text-transform: uppercase;
}


 #projects {
    padding:1rem;
 }

 .custom h1 {
    padding:20px;
    text-align:center;
 }
 .img-size {
    margin:auto;
 }
 

 #stack {
    display:flex;
    flex-wrap:wrap;
   
 }
 
.home-image {
    margin:auto;
}
.hey {
    
    margin:auto;
}

.resume {
    border: 2px solid #3d115f;
    background-color: white;
    padding:20px;
    margin-right:30px;
    width:20%;
    
    

}
.resume-button{
    display:flex;
    height:auto;
    justify-content: center;
}
.resume a {
    text-decoration: none;
    color:#3d115f;
    font-weight: bold;
}
.resume:hover {
    background-color:#3d115f;
    color:white;
}
.resume a:hover{
    color:white;
}
@media only screen and (max-width:480px) {
    .toggle-button {
        display:flex;
    }
    .navbar-links {
        display:none;
    }
    .navbar {
        flex-direction:column;
        align-items:center;
    }
    .brand-title {
        align-self:flex-start;
    }
    .navbar-links ul{
        flex-direction:column;
       
    }
    .navbar-links li  {
        padding: .25rem;
    }
    .navbar-links a{
        text-decoration: none;
    }
    .navbar-links.active {
        display:flex;
    }
    .resume{
        width:50%;
    }

   
}
@media only screen and (min-width:1000px) {
    .intro h1, h2 {
        font-size:2rem;
    }
    .toggle-button {
        display:none;
    }
    #about {
        display:flex;
        /* align-items: center; */
    }
    #about-inner {
        width:100%;
    }
  
    .img-me {
        height:75%;
        width:77%;
        border-radius: 10px;
        /* margin-top:1.5rem;
        margin-left:1.5 rem; */
        
    }
    #about p {
        font-size:1.23rem
    }
    #contact {
        width:100%;
    }
    #contact h1 {
        font-size:1.7rem;
    }
    .contact-button {
        font-size:1.5rem;
        
    }
    .img-size {
        width:600px;
     }
     .case-study {
        padding:90px;
       
       
    
     }
     .custom {
        
        padding:90px;
     } 
}

@media only screen and (min-width:768px) {
    .toggle-button {
        display:none;
    }
   /* .case-study {
    width:700px;
   }
   .custom {
    width:700px;
   } */
}