@import url('https://fonts.googleapis.com/css2?family=Agbalumo&family=Varela+Round&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{
    --azul-default: #1252D3;
    --rosa-default: #FCBBC3;
    --verde-default: #A0DB8F;
    --amarillo-default: #FEF9C2;
    --naranja-default: #FF7133;
}
html{
    scroll-behavior: smooth;
}
body{
background-color: var(--rosa-default);
font-family: 'Poppins', sans-serif;
margin: 0;
}
header{
height: auto;
margin-left: auto;
margin-right: auto;
font-size: large;
}
h1{
    width: auto;
    padding-bottom: 10px;
    padding-left: 5%;
    font-family: 'Agbalumo', sans-serif;
    color: var(--azul-default);
}
h2 {
    font-family: 'Amiri', sans-serif;
    font-size: 52px;
    margin: 8px 0px;
}
h3{
    font-size: 32px;
}
h4{
    font-size: 24px;
    margin-left: 13%;
    margin-right: 7%;
}
h3, h4{
    font-family: 'Poppins', sans-serif;
    margin-top: 10px;
    margin-bottom: 10px;
}
.section{
    padding-top: 10px;
    padding-bottom: 10px;
}
.site-header{
    height: 150px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-bottom: 10px;
}
.section-intro{
    padding-bottom: 200px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    background-image: url(data/fondo-intro.png);
    background-size: cover;
    background-position: top;
}
.star-image img{
    height: 300px;
    width: auto;
    display: inline-block;
    transform-origin: center;
    transition: transform 600ms ease;
}

.star-image:hover img{
    transform: rotate(180deg);
}
.section-about{
    height: 600px;
    background-image: url(data/fondo-about.png);
    background-size: cover;
    background-position: bottom;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
}

.section-about .star-image{
    margin-left: auto;
    margin-right: 3%;
}

.section-about .star-image img{
    opacity: 0;
}

.section-about .star-image.is-visible img{
    animation: aboutStarFade 1200ms ease-in-out;
    opacity: 0.9;
}

@keyframes aboutStarFade{
    0%{ opacity: 0; }
    50%{ opacity: 1; }
    100%{ opacity: 0.9; }
}

@media (max-width: 768px){
    .section-about{
        flex-direction: column;
        height: auto;
    }

    .section-about .star-image{
        align-self: flex-end;
        margin-right: 3%;
    }
}
.site-nav{
    margin-left: 10%;
    margin-right: 10%;
}

.site-nav ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

nav a{
    width: auto;
    height: auto;
    padding-bottom: 5px;
    text-decoration: none;
}
nav li{
    width: auto;
    padding: 10px;
    margin-left: 0;
    margin-right: auto;
    margin-bottom: 10px;
    font-size: medium;
    display: inline-block;
}
article, p{
    font-size: medium;
    margin-left: 7%;
    margin-right: 7%;
    margin-bottom: 5px;
    padding-bottom: 5px;
}
article img{
    margin-left: 3%;
    margin-right: auto;
    padding-bottom: 10px;
}
article a{
    width: auto;
    height: auto;
    margin-left: 0;
    margin-right: 0;
    padding-bottom: 5px;
    text-decoration: none;
    color: blueviolet;
}
div{
    margin-left: 3%;
    margin-right: 3%;
    margin-bottom: 10px;
}

footer{
    width: auto;
    height: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 45%;
    padding-right: auto;
}