/* DEFINE VARIABLES */
:root {
    --scaling-factor:1;
}

/* body {
    overflow-y: hidden;
}
@media (hover:none) {
    body {
        overflow-y: visible; 
    }
} */

/* DEFINE ANIMATIONS */
@keyframes slideInFromLeft {
    from {
      transform: translateX(-100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
}
  
@keyframes slideInFromRight {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
}

@keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 0.35;
    }
}
  
.animate-left {
    opacity: 0; 
}
  
.animate-left.visible {
    animation: slideInFromLeft 1s ease-out forwards;
    animation-delay: 0.5s;
}
  
.animate-right {
    opacity: 0; /* Start with the element hidden */
}
  
.animate-right.visible {
    animation: slideInFromRight 1s ease-out forwards;
    animation-delay: 0.5s;
}

.html {
    scroll-behavior: smooth;
}
  


/* DEFINE SPEECH BUBBLES */
bubble {
    display: block;
    unicode-bidi: isolate;
}

/* Container: img + bubble */
.character_bubble {
    position: relative;
    transform: scale(var(--scaling-factor));
    display: flex;
    flex-wrap: wrap;

    
}

/* Oval Speech Bubble */
.oval-speech {
    position: absolute; 
    top: 0px; 
    left: 0px; 
    
    width: 300px;
    height: auto; 
    padding: 0 40px;
    padding-top: 40px;
    padding-bottom: 60px;

    text-align: center;
    background: #efebdf;
    clip-path: url(#speechBubble);
}

/* Shifted Speech Bubble */
.shifted-speech {
    position: absolute; 
    top: 0px; 
    left: 0px; 
    
    width: 650px;
    height: auto; 
    padding: 80px 120px;

    text-align: justify;
    background: #efebdf;
    clip-path: url(#shiftedBubble);

    p{
        transform: rotate(-3deg);
        margin: 0 45px;

    }

    z-index: 2;
}

/* Rounded-Square Speech Bubble */
.rounded-speech {
    position: absolute; 
    top: 0px; 
    left: 0px; 
    
    width: 500px;
    height: auto;

    text-align: justify;
    
    z-index: 2;

    /* external padding from the p element */
    margin: 20px;

    p{
        padding: 0 20px;
    }
}
.rounded-speech:before{
    content: "";
    position: absolute;
    padding: 130px 140px;

    top: 0px; 
    left: 0px;  
    transform: translate(-130px,-130px);
    
    width: 100%;
    height: 100%; 

    background: #f69785;
    clip-path: url(#squareBubble_out);

    z-index: -1;
}

.rounded-speech:after{
    content: "";
    position: absolute;
    padding: 130px 140px;
    transform: translate(-130px,-130px);
    top: 0px; 
    left: 0px; 
    
    width: 100%;
    height: 100%; 

    background: #efebdf;
    clip-path: url(#squareBubble_in);

    z-index: -1;
}

/* Slash Speech Blubble */
.splash-speech {
    position: relative; 
    top: 0px; 
    left: 0px; 
    
    width: 300px;
    height: 300px;
    /* padding: 0 200px; */

    text-align: justify;
    display: flex;
    align-items: center;
    justify-content: center;
    
    z-index: 2;


    margin: 80px;

    p{
        transform: rotate(-17deg) translate(12%,-10%);
    }
}

.splash-speech:before{
    content: "";
    position: absolute;
    padding: 200px;

    top: 0px; 
    left: 0px; 
    transform: translate(-200px,-200px);
    
    width: 100%;
    height: 100%; 

    background: #efebdf;
    clip-path: url(#splashBubble);

    z-index: -1;
}

/* Oval Speech Right Bubble */
.oval-speech-right {
    position: absolute; 
    top: -100%; 
    left: 0px; 
    
    width: 400px;
    height: auto; 
    padding: 0 40px;
    padding-top: 35px;
    padding-bottom: 120px;

    text-align: justify;
    background: #efebdf;
    clip-path: url(#speechBubbleRight);

    transform: translate(150px);

    z-index: 2;
}


/* Rounded box */
.rounded-box {
    width: 500px;
    height: auto;
    padding:40px;

    border-radius: 74px;
    background-color: #efebdf;

    text-align: justify;
}

/* Oval box */
.oval-box {
    position:relative;
    width: 100%;
    height: auto;
    padding:50px 140px;

    border-radius: 50%;
    background-color: #efebdf;

    text-align: justify;
}

/* ADAPT SPEECH BUBBLES */

/* Nametags */
/* TO DO, create nametags over characters */


/* Sarco */
#sarco + .oval-speech {
    transform: translate(-50%,-62%);
}

#skin-frame + .shifted-speech {
    transform: translate(-73%,-42%);
}



/* CHARACTERS/IMAGES */

#sarco {
    width: auto;
    height: 200px;
    position: relative;
    
    z-index: 1;
}

#marco {
    max-width: auto;
    height: 500px;
    position: relative;
    
    z-index: 1;
}

#noah {
    width: auto;
    height: 350px;
    position: relative;
    
    z-index: 1;
}

#skin{
    width: auto;
    height: 250px;
    position: relative;
    
    z-index: 1;
}

#rash{
    width: auto;
    height: 300px;
    position: relative;
    
    z-index: 1;
}


#children{
    width: auto;
    height: 300px;
    position: relative;
    
    z-index: 1;
}

#doctor{
    width: auto;
    height: 300px;
    position: relative;
    
    z-index: 1;
}

#lotion{
    width: auto;
    height: 150px;
    position: relative;
    
    z-index: 1;
}

#marco_scabies{
    width: auto;
    height: 300px;
    position: relative;
    
    z-index: 1;
}

#news{
    width: auto;
    height: 330px;
    position: relative;
    
    z-index: 2;
}

#vertical_logo{
    width: auto;
    height: 150px;
    position: relative;
    display: block;
    
    z-index: 1;
}

#bacteria{
    width: auto;
    height: 150px;
    position: relative;
    display: block;
    
    z-index: 1;
}

#RNA-thermometer{
    width: auto;
    height: 200px;
    position: relative;
    
    z-index: 1;
}

/* BLOCK POSITIONING */
.block-content{
    transform: translateY(calc(27% + -27% /var(--scaling-factor)));
    padding: 20px 0;
}


.block,
.inner-block {
    position: relative;

    width: 100%;
    height: auto;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

#block-1 {
    height: calc(400px * var(--scaling-factor));

    .character_bubble{
        transform: scale(calc(0.9 * var(--scaling-factor)));
    }

    h2{
        padding: 0;
        text-align: center;
    }


    #sarco-frame{
        position:absolute;
        top:50%;
        margin-left: 10%;
        transform: translateX(-34px) scale(calc(0.9));
    }
    
    .rounded-box{
        margin-left: 190px;
    }

}

#block-2 {
    height: calc((500px + 40px) * var(--scaling-factor));

    #marco-frame{
        /* Using padding to position the rounded-box */
        padding-left: 315px;
        padding-top: 30px;
    }
    
    #marco{
        position: relative;
    }

    div .rounded-box{
        position: absolute;
        width: 375px;
    }

}

#block-2:has(*.visible)::after{
    content: "";
    background:  url("https://static.igem.wiki/teams/5311/assets/main/block-2.webp") no-repeat center/contain;
    opacity: 0.35;
    width: 100%;
    height: 100%;
    z-index: -10;

    position: absolute;
    top: 0;
    left: 0;

    animation: fadeIn 1s ease-out forwards;
}

#block-3 {
    height: calc((25px + 30px + 360px + 40px) * var(--scaling-factor));

    .centered-text{
        width: 100%;
        text-align: center;
        padding-top: 20px;
        padding-bottom: 10px;
    }

    #noah-frame{
        position: absolute;
        right: 0;
    }

    #noah{
        transform: translate(100px,30px);
    }

    .rounded-box{
        position:relative;
        display:block;
        margin-right: 250px;
    }
}
#block-3:has(*.visible)::after{
    content: "";
    background:  url("https://static.igem.wiki/teams/5311/assets/main/block-3.webp") no-repeat bottom/contain;
    opacity: 0.35;
    width: 100%;
    height: 100%;
    z-index: -10;

    position: absolute;
    top: 0;
    left: 0;

    animation: fadeIn 1s ease-out forwards;
}

@media (max-width: 787px) {
    #block-3 {
        height: calc((25px + 30px + 600px + 40px) * var(--scaling-factor));


        .rounded-box{
            margin-right: 0;
            margin-bottom: 200px;
            width: 600px;
        }

        #noah-frame{
            position: absolute;
            top:50%;
        }

        #noah{
            transform: translateX(-20px);
        }   
    }
}

#block-4 {
    height: calc((350px + 150px) * var(--scaling-factor));

    .block-content{
        padding-top: 150px;
    }

    .character_bubble{
        transform: scale(calc(0.9 * var(--scaling-factor))) translateX(40%);
    }
}

#block-5 {
    padding-top: 0px;
    height: calc((350px + 30px) * var(--scaling-factor));

    #rash-frame{
        position: relative;
        padding-right: 350px;
        padding-top: 30px;
    }

    div .rounded-box{
        position: absolute;
        width: 400px;
        transform: translate(65%,0);
    }
}

#block-6 {
    padding: 30px 0;
    height: calc((350px + 150px) * var(--scaling-factor));

    .rounded-speech{
        position: relative;
        margin-left: 150px;
    }

    #children-frame{
        position: absolute;
        top: -10%;
        left: 0;

        transform: translateX(-130px);
        z-index: 3;
    }   
}

@media (max-width: 778px) {
    #block-6 {
        height: calc((450px + 150px) * var(--scaling-factor) * 0.95);

        .rounded-speech{
            margin-left: 0;
            margin-bottom: 200px;
        }

        #children-frame{
            top: 50%;
            left:50%;
        }   
    }
}

#block-7 {
    padding-bottom: 0;
    margin-bottom: 0;
    

    .character_bubble{
        width: 100%;
    }

    .oval-box{
        width: 900px;
        margin:auto;
        margin-bottom: 0;
    }

    #clothes-frame{
        position: relative;
        bottom: 0;
        left: 0;
        width: 100%;
        transform: translate(0,-100px);
    }

    #clothes{
        width: 100%;
    }
}

@media (max-width: 778px) {
    #block-7 {
        height: calc((550px) * var(--scaling-factor));

        .character_bubble{
            width: 550px;
        }
        .oval-box{
            /* make the oval_box become a rounded_box */
            height: auto;
            padding:40px;

            margin:0;
        
            border-radius: 74px;
            background-color: #efebdf;
        
            text-align: justify;

        }
        .character_bubble{
            transform: scale(calc(1.1 * var(--scaling-factor)));
        }

}
}


#block-8 {
    height: calc((380px) * var(--scaling-factor));

    .rounded-box{
        position: absolute;
        top: 0;

        width: 400px;
        transform: translate(48%,-8%);
    }

    #doctor-frame{
        position: relative;
        padding-right: 350px;
        padding-top: 30px;
    }
}
#block-8:has(*.visible)::after{
    content: "";
    background:  url("https://static.igem.wiki/teams/5311/assets/main/block-8.webp") no-repeat bottom/contain;
    opacity: 0.35;
    width: 100%;
    height: 100%;
    z-index: -10;

    position: absolute;
    top: 0;
    left: 0;

    animation: fadeIn 1s ease-out forwards;
}


#block-9 {
    padding-top: 30px;
    padding-bottom: 50px;
    height: calc((250px + 40px) * var(--scaling-factor));

    .rounded-box{
        position: absolute;
        top: 0;

        width: 300px;
    }

    #lotion-frame{
        position: relative;
        padding-left: 360px;
        padding-top: 30px;
        
    }
}

#block-10 {
    padding-top: 20px;
    padding-bottom: 50px;
    height: calc((500px) * var(--scaling-factor));

    .rounded-box{
        position: absolute;
        top: 0;

        width: 400px;
        transform: translate(50%,-5%);
    }

    #marco_scabies-frame{
        position: relative;
        padding-right: 350px;
        padding-top: 30px;
    }
}
#block-10:has(*.visible)::after{
    content: "";
    background:  url("https://static.igem.wiki/teams/5311/assets/main/block-10.webp") no-repeat bottom/contain;
    opacity: 0.35;
    width: 100%;
    height: 100%;
    z-index: -10;

    position: absolute;
    top: 0;
    left: 0;

    animation: fadeIn 1s ease-out forwards;
}


#block-11 {
    height: calc((600px) * var(--scaling-factor));

    .block-content{
        padding-top: 50px;
    }
    .splash-speech{
        margin-right: 300px;
    }

    #news-frame{
        position: absolute;
        top:50px;
        right: -50px;
    }
}

#block-12 {
    height: calc((300px) * var(--scaling-factor));
    
    .block-content{
        padding-top: 50px;
    }
    .oval-box{
        width: 180px;
        height: 180px;

        padding:0;

        display: flex;
        align-items: center;
        justify-content: center;

        position: absolute;
        transform: translateX(-10px);
    }

    .rounded-box{
        margin-left: 200px;
    }
}

#block-13 {
    height: calc((300px) * var(--scaling-factor));
    
    .block-content{
        padding-top: 50px;
    }

    #bacteria-frame{
        position: absolute;
        top:0;
        right: 0;

    }   
    .rounded-box{
        margin-right: 200px;
    }
}

#block-14 {
    height: calc((300px) * var(--scaling-factor));
    
    .block-content{
        padding-top: 50px;
    }

    #RNA-thermometer-frame{
        position: absolute;

    }   

    .rounded-box{
        margin-left: 150px;
    }
}
#block-14:has(*.visible)::after{
    content: "";
    background:  url("https://static.igem.wiki/teams/5311/assets/main/block-14.webp") no-repeat center/contain;
    opacity: 0.35;
    width: 100%;
    height: 100%;
    z-index: -10;

    position: absolute;
    top: 0;
    left: 0;

    animation: fadeIn 1s ease-out forwards;
}


#block-15 {
    height: calc((450px) * var(--scaling-factor));


    .character_bubble{
        margin-top: 190px;

        transform: scale(calc(0.9 * var(--scaling-factor))) translateY(-40px);
    }

    #sarco{
        padding-right: 300px
    }
}
#block-15:has(*.visible)::after{
    content: "";
    background:  url("https://static.igem.wiki/teams/5311/assets/main/block-15.webp") no-repeat center/contain;
    opacity: 0.35;
    width: 80%;
    height: 100%;
    z-index: -10;

    position: absolute;
    top: 0;
    left: 0;

    animation: fadeIn 1s ease-out forwards;
}


#block-16 {
    .rounded-box{
        height: auto;

        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        margin: 0;
    }

    #big-logo{
        margin: auto;
        height: auto;
        width: 100%;

        transform: translate(0,-5px);
    }
}


/* Video settings */

#block-17 {
    max-width: 100%;
    margin: 0;

    overflow: hidden; /* Clearfix */
}

.video-container {
    float: left;
    width: 80%; /* Adjust this value to change video width */
    margin-bottom: 20px;

}

.video-container {
    position: relative;
    padding-bottom: 45%; 
    height: 0;
    margin-top:10px;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* DEFINE PATH STYLES */
#path-container {
    position: relative;

    
    #moving-sarco {
        position: absolute;
        width: calc(70px * var(--scaling-factor));	
        height: calc(70px * var(--scaling-factor));	
        transform: translate(-50%, -50%);
        transition: top 0.075s ease-in-out, left 0.075s ease-in-out;
        /* transition-delay: 0.01s; */
        z-index: 99;
    }

    svg {
        position: absolute;
        top: 0;
        left: 0;
        /* z-index: 100000; */
    }

    path {
        stroke: gray;
        opacity: 0.2;
        stroke-width: 3;
        fill: none;
    }
}

.GoDownArrow {
    position: fixed;
    width: 3vw;
    height: 3vw;
    top: 50%;
    right: 5%;
    z-index: 100;

    background-image: url(https://static.igem.wiki/teams/5311/assets/main/arrow-down.svg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

header{
    height: 100vh;
    background-color: #dbd7cd;
    padding: 10vh 0;
}
.header_container{
    height: 100%;
    background-image: url(https://static.igem.wiki/teams/5311/assets/main/skinbait.gif);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

}
header{
        transform: translateY(-50px);
    }


/* EXPLORE PANEL */
#block-18{
    padding-top: 40px;
}

.bubble_container{
    width: 100%;
    height: auto;
    
    padding-top: 20px;
    padding-left: 17%;
    padding-right: 17%;

    display: flex;
    align-items: space-between;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 50px;
    row-gap: 50px;
}

@media (max-width: 1260px) {
    .bubble_container{
        padding-left: 0%;
        padding-right: 0%;
    }
}

.bubble{
    width: 200px;
    height: auto;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
}
.bubble img{
    width: 100%;
    height: auto;
}

.bubble .img-hover{
    width: inherit;
    height: inherit;
    position: absolute;
}

.bubble .img-hover:hover{
    opacity: 0;
    transition: opacity 0.5s;
}

.bubble p{
    position: absolute;
    font-size: 1.5em;

    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
    color: #3b719f;;

    transform: translateY(135px);
}


@media (max-width: 850px) {
    .bubble{
        width: 150px;
        p{
            transform: translateY(95px);
        }
    }
}
@media (max-width: 426px) {
    .bubble{
        width: 100px;
        p{
            transform: translateY(65px);
            font-size: 1em;
        }
    }
}