html {
    scroll-behavior: smooth;
  }

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
    background-image: url('img/background-ingo.png'); 
    background-size: cover; 
    background-position: center; 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
}

@font-face {
    font-family: 'Tw Cen MT Condensed Extra Bold';
    src: url('fonts/impact.ttf') format('truetype');

    font-family: 'Interstate Mono';
    src: url('fonts/TCB_____.TTF') format('truetype');
}


@keyframes rotate {
    0% {
        transform: rotate(-50deg); 
    }
    100% {
        transform: rotate(360deg); 
    }
}

.centered-logo{
    max-width: 100%; 
    max-height: 100%; 
    width: 3cm;
    height: 3cm;
    transform: translate(-50%, -50%);
    z-index: 2; 
    animation: rotate 3.5s linear infinite, rotate-reset 3.5s linear infinite;
    backdrop-filter: none;
}


@keyframes rotate-reset {
    to {
        transform: rotate(-50deg);
    }
}

header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 5rem;
    padding: 0 3em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    Background-color: transparent;
    z-index: 2;
}

.logo-mini{
    position: absolute;
    top: -5px;
    left: -5px;
    margin: 0;
    width: 2cm;
    height: 2cm;
    cursor: pointer;
}

.section1 {
    height: 100vh; 
    width: 100vw; 
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    background-color: rgba(69, 216, 243, 0.85);
    backdrop-filter: blur(10px);
    z-index: 5;
}

.section2 {
    height: 100vh;
    width: 100vw; 
    position: relative; 
    display: flex;
    align-items: left;
    justify-content: left;
    Background-color: transparent;
    z-index: 1;
}

.section2_p{
    color: #45D8F3;
    font-size: 58px; 
    font-family: 'Interstate Mono';
    margin: 0; 
    margin-top: 100px;
    margin-left: 70px;
    padding: 10px; 
    transform: translateX(-200%);
    transition: transform 1s ease-out;
}

#section2_p.mostrar {
    transform: translateX(0);
}

.menu-cont {
    display: flex; 
    justify-content: space-around;
    background-color: transparent;
    padding: 20px;
    position: relative;    
}

.menu-item {
    font-family: 'Interstate Mono';
    color: #45D8F3;
    font-size: 25px;
    transition: color 0.3s, text-decoration 0.3s;
    position: relative;
    text-decoration: none;   
}

.menu-item:hover {
    color: black;
    text-decoration: none;
}

.biografie{
    z-index: 3;
    height: 100vh;
    width: 100vw;
    background-color: rgba(69, 216, 243, 0.85);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bio-title{
    margin-top: -3%;
    font-family: "Interstate Mono";
    font-size: 48px;
    color: #ffffff;
    backdrop-filter: none;
}

.bio-text{
    height: 50vh;
    width: 70vw;
    margin-top: 3%;
    font-family: 'Tw Cen MT Condensed Extra Bold';
    font-size: 28px;
    color: white;
    backdrop-filter: none;
}

.icono-bio{
    max-width: 100%; 
    max-height: 100%; 
    width: 2cm;
    height: 2cm;
    backdrop-filter: none;
}

.section3 {
    height: 100vh;
    width: 100vw; 
    position: relative;
    display: flex;
    align-items: left;
    justify-content: left;
    z-index: 4;
    Background-color: transparent;
    border-bottom: 1px solid #ccc; 
    background-image: url('img/on-stage-portrait.png'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
}

.arrow-up-div {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
}

.arrow-up-1 {
    visibility: hidden;
    position: fixed;
    bottom: 10px; 
    left: 44%;
    transform: translateX(-50%);
    cursor: pointer;
}

.circle-div {
    position: fixed;
    bottom: 10px; 
    left: 47%;
    transform: translateX(-50%);
    cursor: pointer;
}

.arrow-down-div {
    position: fixed;
    bottom: 10px; 
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
}

.sq-div {
    position: fixed;
    bottom: 10px; 
    left: 53%;
    transform: translateX(-50%);
    cursor: pointer;
}

.arrows{
    width: 0.3cm;
    height: 0.3cm;
    animation: pulsate 1.2s infinite alternate; 
}

@keyframes pulsate {
    to {
      transform: scale(1.6); 
    }
}

.sp3-item {
    font-family: 'Interstate Mono';
    color: #45D8F3;
    font-size: 25px;
    transition: color 0.3s, text-decoration 0.3s;
    position: relative;
    text-decoration: none;
       
}

.sp3-item:hover {
    color: #dfc842;
    text-decoration: none;
}

.project_p{
    color: #ffffff;
    background-color: rgb(0, 0, 0);
    font-size: 28px; 
    font-family: 'Interstate Mono'; 
    margin: 0; 
    margin-top: 20vh;
    margin-left: 0;
    max-width: 40vw;
    padding: 10px;
    transform: translateX(-200%);
    transition: transform 1s ease-out;
}

#project_p.mostrar {
    transform: translateX(0);
}

.project_p2{
    color: #ffffff;
    background-color: rgb(0, 0, 0);
    font-size: 18px; 
    font-weight: 'lighter';
    font-family: 'Interstate Mono'; 
    margin: 0; 
    margin-top: 40px;
    margin-left: 0;
    max-width: 30vw;
    padding: 10px; 
    transform: translateX(-200%);
    transition: transform 5s ease-out;
}

.project_p3{
    color: #ffffff;
    background-color: rgb(0, 0, 0);
    font-size: 18px; 
    font-weight: 'lighter';
    font-family: 'Interstate Mono'; 
    margin: 0; 
    margin-top: 40px;
    margin-left: 0;
    max-width: 30vw;
    padding: 10px; 
    transform: translateX(-200%);
    transition: transform 5s ease-out;
}

#project_p2.mostrar {
    transform: translateX(0);
}

.section4 {
    height: 100vh;
    width: 100vw; 
    position: relative; 
    display: flex;
    align-items: left;
    justify-content: left;
    z-index: 3;
    Background-color: transparent;
    border-bottom: 1px solid #ccc;
    background-image: url('img/chibistories-porttrait.png'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
}

.section5 {
    height: 100vh;
    width: 100vw; 
    position: relative;
    display: flex;
    align-items: left;
    justify-content: left;
    z-index: 3;
    Background-color: transparent;
    border-bottom: 1px solid #ccc;
    background-image: url('img/fanfest-porttrait.png'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
}

.section6 {
    z-index: 3;
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0;
    border-bottom: 1px solid #ccc; 
}

.section7 {
    z-index: 3;
    height: 100vh;
    width: 100vw; 
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(240, 240, 240); 
}

.footer {
    z-index: 3;
    height: 15vh;
    width: 100vw; 
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    background-color: rgba(69, 216, 243, 0.85);
    backdrop-filter: blur(10px);
}

.footer > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 18px;
    color: white; 
    font-family: 'Interstate Mono';
}

.contact-links{
    text-decoration: none;
    color:white;
}

.logo-right-bottom{
    height: 70px ;
    width: 70px;
    
    
}

/*----------------MOBILE VISUAL SETTINGS---------------*/

@media screen and (max-width: 600px){/*960*/
    body {
     background-position: right;
    }

    .menu-cont {
        padding: 5px;
    }
    
    .arrow-up-div {
        visibility: hidden;
    } 

    .arrow-up-1 {
        visibility: visible;
        bottom: 10px; 
        left: 30%;
    }
 
    .circle-div {
        bottom: 10px; 
        left: 40%;
    }
    
    .arrow-down-div {
        bottom: 10px;
        left: 50%;
    }
    
    .sq-div {
        bottom: 10px; 
        left: 60%;
    }
    
    .section2_p{
        position: absolute;
        margin: 0; 
        margin-top: 100%;
        padding: 10px; 
        font-size: 22px;
        background-color: rgba(0, 0, 0, 0.5);
        color: #ffffff;
     }
    
    .section2{
    align-items: left;
    justify-content: left;
    height: 100vh;
    width: 100vw;
    }

    .menu-cont{
        display: flex;
        position: absolute; 
        justify-content: space-around;
        background-color: transparent;
        margin-top: 125%;
    }

    .menu-item{
        font-size: 16px;
        padding: 10px;

    }

    .menu-item:hover {
        color: white;
        text-decoration: none;
    }

    .biografie{
        z-index: 4;
        height: 120vh;
        width: 100vw;
    }
    
    .bio-title{
        width: 70vw;
        text-align: center;
        margin-top: -65%;
        font-family: "Interstate Mono";
        font-size: 28px;
        color: #ffffff;
        backdrop-filter: none;
    }
    
    .bio-text{
        height: 50vh;
        width: 90vw;
        margin-top: 3%;
        font-family: 'Tw Cen MT Condensed Extra Bold';
        font-size: 18px;
        color: rgba(255, 255, 255, 1);
        backdrop-filter: none;
    }

    .icono-bio{
        width: 1cm;
        height: 1cm;
        backdrop-filter: none;
    }

    .section3 {
        display: flex;
        align-items: left;
        justify-content: left;
        z-index: 1;
        background-image: url('img/on-stage-portrait-phone.png'); 
        background-size: cover;
        background-position: center; 
        background-repeat: no-repeat; 
    }

    .sp3-item {
        font-family: 'Interstate Mono';
        color: #45D8F3;
        font-size: 16px;
        transition: color 0.3s, text-decoration 0.3s;
        position: relative;
        text-decoration: none;     
    }

    .project_p{
        color: #ffffff;
        background-color: rgb(0, 0, 0);
        font-size: 18px; 
        font-family: 'Interstate Mono'; 
        margin: 5%; 
        margin-top: 45vh;
        margin-left: 0;
        max-width: 95vw;
        padding: 5px; 
        transform: translateX(-200%);
        transition: transform 1s ease-out;
    }

    .project_p2{
        color: #ffffff;
        background-color: rgb(0, 0, 0);
        font-size: 16px; 
        margin: 0; 
        margin-bottom: 5%;
        margin-left: 0;
        max-width: 80vw;
        padding: 10px;
    }

    .project_p3{
        font-size: 16px; 
        margin: 0; 
        bottom: 0%;
        margin-left: 0;
        max-width: 80vw;
    }

    .section4 {
        z-index: 0;
        display: flex;
        align-items: left;
        justify-content: left;
        background-image: url('img/chibistories-porttrait-phone.png');
        background-size: cover; 
        background-position: center; 
        background-repeat: no-repeat; 
    }

    .section5 {
        z-index: 0;
        display: flex;
        align-items: left;
        justify-content: left;
        background-image: url('img/fanfest-porttrait-phone.png'); 
        background-size: cover; 
        background-position: center; 
        background-repeat: no-repeat; 
    }
    
    .footer {
        z-index: 3;
        height: 10vh;
        width: 100vw; 
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around; 
        background-color: #45D8F3;
    }
    
    .footer > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        font-size: 16px;
       
    }
    
    .logo-right-bottom{
        height: 50px;
        width: 50px;
    }


}



/*----------------TABLET VISUAL SETTINGS---------------*/

@media screen and (min-width: 601px) and (max-width: 1024px){

    body {
        background-position: right; 
    }


    .circle-div {
        bottom: 10px; 
        left: 40%;
    }
    
    .arrow-down-div {
        bottom: 10px; 
        left: 50%;
    }
    
    .sq-div {
        bottom: 10px; 
        left: 60%;
    }

    .section2{
        align-items: left;
        justify-content: left;
        height: 100vh;
        width: 100vw;
        
    }

    .section2_p{
        position: absolute;
        bottom: 40%;
        background-color: rgba(0, 0, 0, 0.5);
        margin-left: 0;
        font-size: 42px; 
        color: #ffffff;
    }

    .menu-cont{
        display: flex;
        position: absolute;
        bottom: 32%;
        justify-content: space-around;
        background-color: transparent;
    }

    .menu-item{
        font-size: 28px;
        padding: 10px;

    }

    .menu-item:hover {
        color: white;
        text-decoration: none;
    }

    .bio-title{
        margin-top: -30%;
    }
    
    .bio-text{
        margin-top: 5%;
        
    }

    .section3 {
        display: flex;
        align-items: left;
        justify-content: left;
        background-image: url('img/on-stage-portrait-phone.png'); 
        background-size: cover; 
        background-position: center; 
        background-repeat: no-repeat; 
        border-bottom: 1px solid #ccc; 
    }

    .section4 {
        display: flex;
        align-items: left;
        justify-content: left;
        background-image: url('img/chibistories-porttrait-phone.png'); 
        background-size: cover;
        background-position: center; 
        background-repeat: no-repeat; 
        border-bottom: 1px solid #ccc;
    }

    .section5 {
        height: 100vh;
        width: 100vw; 
        display: flex;
        align-items: left;
        justify-content: left;
        background-image: url('img/fanfest-porttrait-phone.png'); 
        
        
    }

    .sp3-item {
        font-family: 'Interstate Mono';
        color: #45D8F3;
        font-size: 16px;
        transition: color 0.3s, text-decoration 0.3s;
        position: relative;
        text-decoration: none;
           
    }

    .project_p{
        color: #ffffff;
        background-color: rgb(0, 0, 0);
        font-size: 22px; 
        font-family: 'Interstate Mono'; 
        margin: 5%; 
        margin-top: 48vh;
        margin-left: 0;
        max-width: 70vw;
        padding: 10px; 
        transform: translateX(-200%);
        transition: transform 1s ease-out;
    }

    .project_p2{
        color: #ffffff;
        font-size: 18px; 
        margin: 0; 
        margin-bottom: 3%;
        margin-left: 0;
        max-width: 50vw;
    }

    .project_p3{
        color: #ffffff;
        font-size: 18px; 
        max-width: 50vw;
    }
    
}