@font-face {
    font-family: Inter;
    src: url('./../fuente/static/Inter-Regular.ttf');
}

.attribution { 
    font-size: 11px; text-align: center; 
    position: absolute;
    margin-top: 100vh;
}
.attribution a { 
    color: hsl(228, 45%, 44%); 
}

body {
    font-family: Inter, Arial, Helvetica, sans-serif;        
    background-image: url('./../images/pattern-curve.svg'), url('./../images/pattern-quotes.svg'), url('./../images/pattern-bg.svg');
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: left 1vw top 80vh, left 18vw top 20vh, left 50vw top 1vh; 
    background-size: 40%, 8%, 40%;   
    display: flex;
    justify-content: center;
    align-items: center;
}

main {
    margin-top: 5vh;
}

section {
    display: flex;
    justify-content: center;
    align-items: center;
}

figure img {
    height: 70vh;
    width: 36vw;    
}

article {
    width: 40vw;
}

.comillas {
    font-size: 28px;
    font-weight: lighter;
    color: hsl(240, 23%, 36%);
}

.nombre {
    font-weight: 900;
    color: hsl(240, 38%, 20%);
}

.profecion {
    color: hsl(240, 18%, 77%);
}

.oculto {
    display: none;
}

.control {
    height: 40px;
    width: 90px;
    background-color: rgb(255, 253, 253);
    position: absolute;
    border-radius: 30px;
    margin-top: 74vh;
    margin-left: 20vw;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 1px 3px hsl(240, 16%, 20%);
}

.control img:hover {
    cursor: pointer;
}

br {
    display: none;
}


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

    body {
        font-family: Inter, Arial, Helvetica, sans-serif;        
        background-image: url('./../images/pattern-curve.svg'), url('./../images/pattern-quotes.svg'), url('./../images/pattern-bg.svg');
        background-repeat: no-repeat, no-repeat, no-repeat;
        background-position: left 10vw top 95vh, left 38vw top 70vh, left 12vw top 5vh; 
        background-size: 60%, 17%, 80%;   
        display: flex;
        justify-content: center;
        align-items: center;        
    }
    
    main {
        margin-top: 5vh;        
    }
    
    section {
        display: flex;
        vertical-align: bottom;
        align-items: center;
    }

    article {
        text-align: center;
        margin-left: 0vw;
        margin-top: 65vh;
        width: 70vw;
    }

    figure {
        height: 50vh;
        width: 70vw;  
        margin-left: 10vw; 
        margin-top: -30vh; 
        position: absolute;
    }

    figure img {
        height: 50vh;
        width: 70vw;  
    }

    .comillas {
        font-size: 12px;
        font-weight: lighter;
        color: hsl(240, 23%, 36%);
    }

    .nombre {
        font-size: 12px;
        font-weight: 900;
        color: hsl(240, 38%, 20%);
    }
    
    .profecion {
        font-size: 12px;
        color: hsl(240, 18%, 77%);
    }

    .attribution { 
        font-size: 11px; text-align: center; 
        position: absolute;
        margin-top: 110vh;
    }

    .control {
        height: 30px;
        width: 80px;
        background-color: rgb(255, 253, 253);
        position: absolute;
        border-radius: 30px;
        margin-top: 22vh;
        margin-left: 0vw;
        display: flex;
        justify-content: space-around;
        align-items: center;
        box-shadow: 0 1px 3px hsl(240, 16%, 20%);
    }

    br {
        display: inline;
    }
}