@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

:root{
    --bgc1:var(--bgc1l);
    --bgc2:var(--bgc2l);
    --bgc1l:#4ade80;
    --bgc2l:#06d4ca;
    --bgc1d:#4ade80;
    --bgc2d:#06d4ca;
    --m2:rgb(255, 255, 255);
    --m3:rgb(255, 255, 255);
    --m4:white;
    --m5:white;
}



@keyframes arrow {
    0%{
        transform: translateY(0%);
    }
    50%{
        transform: translateY(10%);
    }
    100%{
        transform: translateY(0%);
    }
}



#bgg{
    height: 100vh;
    border-radius: 0%;
    position: fixed;
    width: 100vw;
    z-index: 1;
    background:linear-gradient(20deg,var(--bgc1),var(--bgc2));
    
    animation: bgrotate 2s infinite;
}
body{
    margin: 0;
    padding: 0;
    transition: ease-out;
    scroll-behavior: smooth;
    user-select: none;
}

::-webkit-scrollbar{
    width: 5px;
}

::-webkit-scrollbar-thumb{
    background-color: grey;
}

main{
    z-index: 2;
    position: relative;
    width: 100%;
}

#m1{
    height: 100vh;
    width: 100%;
    animation: bglg 3s infinite;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: transparent;
    justify-content: space-around;
}


#m1img img{
    border: solid white 3px;
    border-radius: 50%;
}


#m1h1 h1{
    margin: 0;
    transform: translateY(00%);
    padding:0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 300;
    font-size: 70px;
    color: white;
    transition: ease-out;
}

#m1svg{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

#m1svg p{
    margin: 0;
    font-family: Outfit;
    font-weight: 300;
    color: white;
}

m1imgdiv{
    display: grid;
    align-content: center;
    justify-items: center;
}

#m1svg svg{
    fill: white;
    animation: arrow 2s infinite;
}

#m1svg{
    text-align: center;
}

#usrnm::after{
    content:"jorgetrueba85";
}

#m1h1:hover #usrnm::after{
    content:"Jorge Trueba";
}

#m2{
    height: 100vh;
    width: 100%;  
    background-color: var(--m2);
    display: flex;
    align-items: center;
}

@media print{
    body{
        text-align: center;
    }
    
    body::before{
        text-align: center;
        content: 'No printing allowed. La impresión no está permitida, se trata de mi informacion personal y sobre mí. Respeta mi decisión y no intentes desactivar el bloqueo :)';
    }
    
    main{
        display: none;
    }
    
    #bgg{
        display: none;
    }
}


#m2 p{
    margin: 1.5rem;
    margin-left: 0.5rem;
    font-family: outfit;
    font-size: 30px;
    text-align: center;
}

#m2 p::first-letter{
    font-weight: 600;
    text-transform: capitalize;
}

#m2 span{
    display: flex;
    height: 100vh;
    align-items: center;
}

#m2 img{
    transition: ease-in-out 0.2s;
}
    
.imagecont{
    border-radius: 1.5rem;
    height: 85%;
    width: auto;
    margin: 3rem;
    box-shadow: 0px 0px 10px 0px rgba(136, 136, 136, 0.267);
    transition: ease-in-out 0.2s;
}

.imagecont:active{
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
}

#m3{
    height: 100vh;
    width: 100%;
    background-color: var(--m3);
    font-family: Outfit;
    display: flex;
    flex-direction: row-reverse;
    align-content: center;
}

#m3img{
    display: flex;
    align-content: center;
}

#m3p{
    display: flex;
    align-items: center;
}


#m3p p{
    margin: 1.5rem;
    font-family: Outfit;
    font-size: 30px;
    text-align: center;
}

#m3p p::first-letter{
    font-weight: 600;
    text-transform: capitalize;
}

b{
    font-weight: 600;
}

#m3 span{
    height: 82%;
}


#m4{
    height: 100vh;
    width: 100%;
    background-color: var(--m4);
}

#m5{
    height: 100vh;
    width: 100%;
    background-color: var(--m5);
}

@media (orientation: portrait) {

#m2{
    display: flex;
    flex-direction: column;
    align-items: center;
}



#m2 span{
    height: 70vh;
}

#m2 p{
    margin: 6rem;
    margin-top: 3rem;
    text-align: center;
}

#m3{
    flex-direction: column;
}

#m3img img{
    height: 70%;
}

#m3p p{
    font-size: 30px;
}

#m3p{
}

}