@import url('../requirements/requirements.css');

body {
    background-color: var(--white);
}

section {
    display: flex;
    overflow: hidden;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4em 0;
}

section .title {
    margin-bottom: 1em;
    text-align: center;
    width: 80%;
}

section .title h1 {
    font-size: 3rem;
    font-family: var(--fira);
    color: var(--red);
    text-shadow: .1em .1em 0 var(--white);
    animation: fadeIn 1s ease-in-out;
}

section .title h3 {
    font-size: 1rem;
    font-family: var(--palanquin);
    color: var(--brown);
    text-shadow: .1em .1em 0 var(--white);
    animation: fadeInLeft 1s ease-in-out;
}

section iframe {
    box-shadow: .5em .5em 0 var(--darkblue);
    width: 80%;
    transition: all .5s ease-in-out;
    border: none;
    background: linear-gradient(90deg, var(--blue), var(--darkblue));
    margin-bottom: 3em;
}

section iframe:hover {
    transform: translateX(.5em) translateY(.5em);
    box-shadow: 0 0 0 var(--darkblue);
}

.curved-bg {
    filter: blur(3px);
    animation: appear 1s ease-in-out;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    background-color: #fdf0e6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80'%3E%3Cpath fill='%23669bbc' fill-opacity='1' d='M14 16H9v-2h5V9.87a4 4 0 1 1 2 0V14h5v2h-5v15.95A10 10 0 0 0 23.66 27l-3.46-2 8.2-2.2-2.9 5a12 12 0 0 1-21 0l-2.89-5 8.2 2.2-3.47 2A10 10 0 0 0 14 31.95V16zm40 40h-5v-2h5v-4.13a4 4 0 1 1 2 0V54h5v2h-5v15.95A10 10 0 0 0 63.66 67l-3.47-2 8.2-2.2-2.88 5a12 12 0 0 1-21.02 0l-2.88-5 8.2 2.2-3.47 2A10 10 0 0 0 54 71.95V56zm-39 6a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm40-40a2 2 0 1 1 0-4 2 2 0 0 1 0 4zM15 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm40 40a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'%3E%3C/path%3E%3C/svg%3E");
    background-size: contain;
    pointer-events: none;
    /* Permite que los eventos del mouse pasen a través de este elemento */
}


/*RESPONSIVE*/

@media (max-width: 1200px) {
    section iframe {
        width: 90%;
    }
}