/**
 * ----------------------------------------
 * animation fade-in
 * ----------------------------------------
 */
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

body{
    box-sizing: border-box;
    font-family: Inter;
    margin: 0;
        -webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	    animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    max-width: 100%;
    
}

/* index.html */
header{
    background-image: url(images/gam-ol-background-3127102_1280.jpg);
    background-size: cover;
    padding: 4%;
    text-align: center;
    font-size: larger;
    filter: drop-shadow(1px 8px 10px rgb(163, 159, 158));
}

h1{
    color: rgb(255, 255, 255);
    text-shadow: 1px 1px 6px #000000;
}

h2{
    color: #7a8947;
    text-shadow: 2px 2px 2px #000000;
}

main{
    display: flex;
    flex-direction: row;
    gap: 6em;
    justify-content: space-evenly;
    max-inline-size: 1200px;
    margin-inline: auto;
    margin-block: 8em;
}

article{
    border: solid #bc6c25;
    border-radius: 10px;
    background-color: #fefae0;
    padding: 10px;
    text-align: center;
    filter: drop-shadow(8px 8px 5px #dadada);
}

.design{
    flex: 1;
}

.about{
    flex: 1;
}

.copywriting{
    flex: 1;
}


 a:link{
    color: #7a8947;
}

 a:visited{
    color: #455d2a;
    text-decoration: underline;
}

 a:hover{
    color: #b4c47e;
}

article h2{
    text-shadow: none;
    margin-block: 40%;
}

a{
    text-decoration: none;
}

footer{
    background-image: linear-gradient(to right, #687b2a, rgb(155, 196, 135));
    padding: 2%;
    text-align: center;
    font-size: larger;
    filter: drop-shadow(1px 8px 10px rgb(163, 159, 158));
}

ul{
    display: flex;
    justify-content: space-evenly;
}

/* Responsive Layout */

@media (max-width: 1000px){
    main{
        flex-direction: column;
        
    }
    main{
        max-inline-size: 900px;
        gap: 2em;
    }
}

/* Website Design */
.portfolio-wrapper{
    display: flex;

}

aside{
    border: #bc6c25 solid;
    background-color: #b4c47e;
    flex: 1;
    padding: 10px;
}

aside a:link{
    color: #f8f8f5;
}

aside a:visited{
    color: #e5eccf;
    text-decoration: underline;
}

aside a:hover{
    color: #f8faf2;
}

aside p{
    font-size: .97rem;
}

.portfolio-main{
    flex: 5;
    display: grid;
    grid-template-columns: 33% 33% 33%;
    gap: 8px;
    margin-left: 5px;
}

.portfolio-main h2{
    text-shadow: none;
}

.website-examples{
    border: solid rgb(181, 181, 181);
    padding: 3px;
img:hover {
    opacity: 0.5;
}

}

h3{
    color: #283618;
}

/* About Me Section */

.container{
    text-align: center;
    max-inline-size: 1200px;
    margin-inline: auto;
}

.about-header{
    background-image: url(images/shyla_marsare-footprints-8745530_1280.jpg);
}