:root {
    /* Colores claros */
    --azul-claro: #4FC3F7;
    --azul-claro-mas-oscuro: #29B6F6;
    --dorado-metalico: #FFD700;
    --dorado-metalico-mas-oscuro: #FFC107;
}

body {
    margin: 0;
    padding: 0;
}

.header {
    background: linear-gradient(90deg, var(--azul-claro), var(--dorado-metalico));
    color: rgb(0, 68, 68);
    padding: 20px 0;
    opacity: 0.8;
    text-transform: uppercase;
    font-family: "Pacifico";
    font-weight: bold;
    border-radius: 10px;

}

.container {
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    margin: 0;
    font-size: 2rem;
}

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

.main-nav ul li {
    display: inline-block;
    margin-left: 20px;
}

.main-nav ul li:first-child {
    margin-left: 0;
}

.main-nav ul li a {
    color: darkcyan;
    text-decoration: none;
    transition: color 0.3s ease;
}

.main-nav ul li a:hover {
    color: purple;
}

.mapCuriosity {
    position: relative;
    width: 100%;
    height: 105vh;
    overflow: hidden;
}

.mapConsumption{
    position: relative;
    width: 100%;
    height: 103vh;
    overflow: hidden;
}
   

iframe{
    width: 100%;
    height: 105vh;
    border: solid black 1px;
}
.transition1{
    height: 5vh;
    background: linear-gradient(to top, black 20%, white);
}
.transition2{
    height: 10vh;
    background: linear-gradient(to bottom, black, white);
}

footer.header{
    border-radius: 0px;
}
/***********************************************************************************************************************************/

@media screen and (min-width: 501) and (max-width: 1099px) {
    .aesthetic {
        position: absolute;
        top: -8vh;
        left: -15vh;
    }

    .header {
        background: linear-gradient(90deg, var(--azul-claro), var(--dorado-metalico));
        color: red;
    }

    .logo {
        font-size: 1.4rem;

    }


    /*******************************************************************************************************************************/

}

@media screen and (max-width: 500px) {
    .aesthetic {
        position: absolute;
        left: -100vw;
        top: -43vh;
        width: 240vw;
        height: 115vh;
    }

    .header {
        background: linear-gradient(90deg, var(--azul-claro), var(--dorado-metalico));
        color: purple;
    }

    .logo {
        font-size: 0.8rem;

    }

    .main-nav ul li {
        font-size: 0.8rem;
    }

    .curiosidades {
        visibility: hidden;
        font-size: 0.2rem;
        position: absolute;
        top: 65vh;
        right: 47vw;
        height: 30vh;
        padding: 10px;
        width: 42vw;
    }

    .tip,
    .curiosidad {
        font-size: 1rem;
    }

    .svgIslandia {
        transform: scale(0.9);
        top: -3vh;
        left: -35vw;
        width: 235vw;
    }

    .portugal {
        transform: scale(1) translate(-12vw, -1.9em);
    }

    .britania {
        transform: scale(1) translate(-14vw, -1.2vh);
    }

    .irlandaNorte {
        transform: translate(17vw, 5vh);
    }

    .ceuta {
        transform: scale(0.3) translate(148vw, 140vh);
    }

    .melilla {
        transform: scale(0.3) translate(155vw, 145vh);
    }

    .Canarias {
        transform: scale(0.05) translate(650vw, 850vh);
    }

    .noruega {
        transform: scale(1) translate(-13vw, -1em);
    }

    .madeira {
        transform: scale(1.5) translate(-20vw, -23vh);
    }

    .mi-clase {
        position: absolute;
        transform: scale(0.5);
        font-size: 1.3rem !important;
        height: fit-content;
        width: 75vw !important;
        top: 44vh !important;
        left: 35vw !important;

    }

    .banderita {
        border: 0.1rem solid midnightblue;
        padding: 0;
        margin-left: 35%;
        position: static;
        top: 0;
        left: 0;
    }

    .curiosidades {
        visibility: visible;
        width: 49vw !important;
        height: fit-content !important;
        left: 1.5vw;
        bottom: 0.5vh;
        padding: 5px;

    }

    .tipPequeno {
        font-size: 1.2rem !important;
    }

    .tip {
        font-size: 1.5rem !important;
    }

    .curiosidad {
        font-size: 0.75rem !important;
        padding-top: 0.5vh;
    }
}

@media screen and (max-width: 400px) {
    .portugal {
        transform: scale(1) translate(-15vw, -0.9em);
    }
}

/*************************************************************************************************************************************/

@media screen and (max-width: 500px) {

    .tip2,
    .curiosidad2 {
        font-size: 1rem;
    }

    .svgIslandia2 {
        transform: scale(0.9);
        top: -3vh;
        left: -35vw;
        width: 235vw;
    }

    .mi-clase2 {
        position: absolute;
        transform: scale(0.5);
        font-size: 1.3rem !important;
        height: 65vh;
        width: 75vw !important;
        top: 150vh !important;
        left: 35vw !important;
        display:block !important;
        
    }
    .mi-clase2 p {
        font-size: 2rem;
    }

    .banderita2 {
        border: 0.1rem solid midnightblue;
        padding: 0;
        margin-left: 35%;
        position: static;
        top: 0;
        left: 0;
    }

    .curiosidades2 {
        visibility: visible;
        width: 49vw !important;
        height: fit-content !important;
        left: 2vw;
        bottom: 0.5vh;
        padding: 5px;
        font-size: 0.2rem;
        top: 60vh;
        right: 47vw;
    }

    .tip2 {
        font-size: 1.5rem !important;
    }

    .curiosidad2 {
        font-size: 0.75rem !important;
        padding-top: 0.5vh;
    }
}