@import url("https://use.typekit.net/tgu4kjs.css");
 

/*---------------------- About me Section ----------------------*/


.title {
    background-color: #f2ebdf;
    display:flex;
    gap: 0px;
    flex-direction: column;
}

.about {
    font-family: "Salted", sans-serif;
    font-size: 20pt;
    text-align: center;
    margin-bottom: -50px;
    color: #d94848;

}

.sae {
    font-family: "gambado-sans-forte", sans-serif;
    font-size: 80pt;
    text-align: center;
    flex: 0;
    margin-top: -240px;
    color: #d94848;

}

.parent1 {

    background-color: #f2ebdf;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0px;
    height: 50%;

}
 .left-section {
    grid-area: 1/1/span 2/span 1;
    display: flex;
    flex-direction: column;
    gap: 300px;
    padding: 30px 0px 5px 10px;
    text-align: center;
    font-family: "Salted", sans-serif;
    font-size: 22pt;
    color: #d94848;
    padding: 30px;
 }

 .center-section {
    grid-area: 1/2/span 2/ span 1;
    margin-bottom: 200px;
    align-items: center;
    justify-content: center;
 }

 .right-section {
    grid-area: 1/3/span 2/ span 1;
    display: flex;
    flex-direction: column;
    gap: 300px;
    text-align: center;
    font-family: "Salted", sans-serif;
    font-size: 22pt;
    color: #d94848;
    padding: 30px;
    margin-bottom: 200px;
}



    

/*--------------------- My Nieces  ----------------------*/

.parent2-title {
 background-color: #66add9;
}

.my-nieces {
    text-align: center;
    font-family: "gambado-sans-forte", sans-serif;
    margin-top: -50px;
    margin-bottom: -350px;
    font-size: 38pt;
    color: #f2ebdf;
    padding: 50px;
}

.parent2 {
    background-color: #66add9;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 0px;
    margin-top: 100px;
    margin-bottom: 50px;
}


h4 {
    color: #f2ebdf;
    font-size: 28pt;
    font-family: "Marvin", sans-serif;
}


.left-section2 {
    grid-area: 1 ;
    display: flex;
    flex-direction: column;
    text-align: center;
    color: #f2ebdf;
    text-align: center;
    font-family: "Salted", sans-serif;
    font-size: 22pt;
    padding: 20px;
    
}

.right-section2 {
    grid-area: 1  ;
    display: flex;
    flex-direction: column;
    text-align: center;
    color: #f2ebdf;
    text-align: center;
    font-family: "Salted", sans-serif;
    font-size: 22pt;
    padding: 20px;
    margin-bottom: 300px;
}




/*----------------------Hobbies ----------------------*/

.parent3-title {
 background-color: #f2ebdf;
}

.my-hobbies {
    text-align: center;
    font-family: "gambado-sans-forte", sans-serif;
    margin-top: -50px;
    margin-bottom: -400px;
    font-size: 38pt;
    color: #66add9;
    padding: 50px;
}

.parent3 {

    background-color: #f2ebdf;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0px;
    height: 50%;

}
 .left-section3 {
    grid-area: 1/1/span 2/span 1;
    display: flex;
    flex-direction: column;
    gap: 200px;
    padding: 100px 0px 5px 10px;
    text-align: center;
    font-family: "Salted", sans-serif;
    font-size: 22pt;
    color: #66add9;
    padding: 30px;
    margin-top: 10em;
 }

 .center-section3 {
    grid-area: 1/2/span 2/ span 1;
    align-content: center;
 }

 .right-section3 {
    grid-area: 1/3/span 2/ span 1;
    display: flex;
    flex-direction: column;
    gap: 300px;
    text-align: center;
    font-family: "Salted", sans-serif;
    font-size: 22pt;
    color: #66add9;
    padding: 30px;
    margin-top: 10em;
    margin-bottom: 300px;
    
}




/*----------------------My Work Section ----------------------*/

.parent4-title {
    background-color: #f2cd5e;
}

.work {
    text-align: center;
    font-family: "gambado-sans-forte", sans-serif;
    font-size: 38pt;
    color: #d94848;
    padding: 50px;
}

.parent4 {
    background-color: #f2cd5e;
}

@keyframes loop {
        0% {transform: translateX(0%);}
        100% {transform: translateX(-100%);}
}

#continuous{
        background-color: #f2cd5e;
        padding: 5% 2%;
}

#container {
        width: 100%;
        display: flex;
        position: relative;
        overflow: hidden;
        white-space: nowrap;
        color: #f2cd5e;
        margin-bottom: 5%;
        margin-top: -9%;
        
}

#container .scroll {
        background:#f2cd5e;
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: fit-content;
        white-space: nowrap;
        animation: loop 15s linear infinite;
        padding: 10%;
        gap: 20px;
}




/*----------------------Contact Section ----------------------*/

.contact-title {
    background-color: #f2ebdf;
    font-family: "Salted", sans-serif;
    color: #66add9;
    font-size: 24pt;
    text-align: center;
    margin-bottom: -350px;
    margin-top: -40px;
    padding: 50px;
}

.parent5 {
    background-color: #f2ebdf;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: -50px;
    padding: 20px;
    margin-bottom: 0px;
}

button {
    border: 0;
    padding: 40%;
    background-color:#f2ebdf00;
    min-width: 30px;

}