svg{
    position:absolute;
    background:none;
}

@keyframes bouncing{
    0%{
        transform:translateY(+30px);
    }
    50%{
        transform:translateY(-30px);
    }
    100%{
        transform:translateY(+30px);
    }
}
.bouncing {
    animation: bouncing 0.9s infinite ease-in-out;
}
.st0{
    fill:none;
    stroke:black;
    stroke-width:3;
}
.scrollDown img {
    width: 30vw;
    height: auto;
    margin-top:10vw;
    margin-bottom:25vw;
    z-index:1;
}
.scrollDown .placeholder{
    width:50vw;
    height:auto;
}
.scrollDown h2{
    font-family: "Libre Franklin", sans-serif;
    font-weight:100;
    font-style:normal;
    font-size:2vw;
}
.scrollDown{
    display:flex;
}
.kevinPortrait {
    position:fixed;
    visibility:hidden;    
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index:10;
}

.kevinPortrait img{
    width:50vw;
    height:auto;
}

.somethingFunny{
    position: absolute;
    visibility:hidden;
    margin-left: 18vw;
}

.somethingFunny h1{
    font-family: "Libre Franklin", sans-serif;
    font-weight:100;
    font-style:normal;
    font-size:2vw;

}
.randomCircleDiv {
    position:absolute;
    visibility:hidden;
    right:27vw;
    z-index:0;
}
.randomCircleDiv div{
    width: 2vw;
    height: 2vw;
    border-radius:99999px;
    background-color:black;
    position:absolute;
}
.EEGlist{
    font-family: "Edu NSW ACT Cursive", cursive;
    font-weight:100;
    font-style:normal;
    line-height:2.4;
    font-size:1.5vw;
    position:absolute;
    visibility:hidden;
    left:30vw;
}
.EEGlist h2{
    font-weight:100;
}
.EEGlist p{
    margin-left:15vw;
}
.brainImage{
    width:20vw;
    height:auto;
    position:absolute;
    visibility:hidden;
    left:10vw;
}
.peekaboo h2{
    font-family: "Libre Franklin", sans-serif;
    font-weight:100;
    font-style:normal;
    font-size:2vw;
}
.peekaboo{
    visibility: hidden;
    position:absolute;
    right:20vw;
}
canvas {
    display: block;
    margin-top: auto;

}
#skateHookModel{
    width:100%;
    height:100%;
}
.threedPresent{
    position:fixed;
    visibility: hidden;
    width:80vw;
    height:80vh;
    top:10%;
    left:0;
    z-index:1000000;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    border-radius: 50px;
    margin:auto;
    margin-left:10%;
}
.threedPresent p{
    position:absolute;
    left: 50%; 
    transform: translateX(-50%); 
    top:10%;
    opacity:0.8;
    font-size:2vw;
    text-align:center;
    font-family: "Libre Franklin", sans-serif;
    font-weight:200;
    font-style:normal;
}
.webPresent{
    position:absolute;
    left:15vw;
    width:50vw;
    height:40vw;
}
.webSlides{
    width:50vw;
    height:40vw;
    box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.2);
    border-radius:20px;
    background: rgba(255, 255, 255, 0.2);
}
.webSlides {
    opacity:0;
  position: absolute;
  transition: opacity 1s ease-in-out;
}

.webSlides.active {
  opacity: 1;
}
.webSlides.hidden{
    opacity:0;
}
.dot{
    width:20%;
    height:20%;
    background:black;
    border-radius:1000px;
    position:absolute;
    
}
.webSlides img{
    width:100%;
    border-radius: 20px 20px 0px 0px;
}
.rotatingBall{
    position:absolute;
    top:0;
    left:0;
    margin-left:2vw;
    margin-top:2vw;
    width:2vw;
    height:2vw;
    border-radius:1000px;
    z-index:1;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 1);
    offset-path: inset(0 round 10px); /* Example: follows a rounded rectangle inset 0 from parent */
    offset-distance: 0%; /* Start at the beginning of the path */
    animation: followPath 10s linear infinite;
}
    @keyframes followPath {
        to {
            offset-distance: 100%; /* Move along the path to the end */
        }
    }
.webSlides p{
    text-align:center;
    line-height:3vw;
    font-family: "Libre Franklin", sans-serif;
    font-weight:100;
    font-style:normal;
    font-size:1.5vw;
    margin-top:5%;
}
.threeDRant{
    position:absolute;
    visibility: hidden;
    right:20vw;
}
.threeDRant p{
    font-family: "Edu NSW ACT Cursive", cursive;
    font-weight:100;
    font-style:normal;
    line-height:2vw;
    font-size:1.5vw;
}
.contactInfo{
    background: rgba(255, 255, 255, 0.2);
    border-top-left-radius: 30px;
    border-bottom-left-radius: 50px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    position:absolute;
    right:0;
    font-family: "Libre Franklin", sans-serif;
    font-weight:100;
    font-style:normal;
    width:60vw;
    height:30vw;
    text-align:right;
    overflow-x:auto;
    overflow-y:auto;
}
.contactInfo h1{
        font-weight:100;
        margin-right:10%;
        font-size:2.5vw;
        margin-top:7%;
}
.contactInfo h2{
    font-weight:100;
    margin-right:10%;
    font-size:1.8vw;
    margin-top:5%;
}
.contactInfo p{
    margin:5%;
    margin-right:10%;
    font-size:1.3vw;

}
.icon{
    margin:1%;
    font-size:1.3vw;
}
#icon1{
    width:auto;
    height:50%;
    position:absolute;
    bottom:25%;
    left:15%;
}

.rotateZ{
    animation:zRotate 5s linear infinite;
}

@keyframes zRotate{
    0%{
        transform:rotateY(0deg)
    }
    100%{
        transform:rotateY(360deg)
    }
}

.rotatein{
    animation:rotation 1s ease-in-out;
}
.fadeIn{
    animation:fadeIn 3s ease-in-out;
}
.fadeOut{
    animation: fadeOut 2s ease-in-out;
}
.otherPaths{
    fill:none; 
    stroke:black; 
    stroke-width:2;
}
@keyframes fadeIn{
    0%{
        opacity:0
    }
    100%{
        opacity:1
    }
}
@keyframes fadeOut{
    0%{
        opacity:1
    }
    100%{
        opacity:0
    }
}
@keyframes rotation{
    0% { 
        transform:
        perspective(900px)
        rotateX(90deg)
        scale(0.7);
    }
    100%{
        transform:
        rotate(0deg)
        scale(1)
    }
}







.bottom{
    visibility:hidden;
}
.top{
    visibility:hidden;
}
.in{
    visibility:hidden;
}
.left{
    visibility:hidden;
}
.right{
    visibility:hidden;
}
.fadeOut{
    animation:fadeOut 1s both;}

.fadeInLeft{
    animation:fadeInLeft 1s both;
}
.fadeIn{
    animation:fadeIn 1s both;
}
.fadeInRight{
    animation:fadeInRight 1s both;
}
.fadeInTop{
    animation:fadeInTop 1s both;
}
.fadeInBottom{
    animation:fadeInBottom 1s both;
}
@keyframes fadeIn{
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}
@keyframes fadeInLeft{
    0%{
        opacity:0;
        transform:translateX(-50px);
    }
    100%{
        opacity:1;
        transform:translateX(0px);
    }
}
@keyframes fadeInRight{
    0%{
        opacity:0;
        transform:translateX(+50px);
    }
    100%{
        opacity:1;
        transform:translateX(0px);
    }
}
@keyframes fadeInBottom{
    0%{
        opacity:0;
        transform:translateY(+50px);
    }
    100%{
        opacity:1;
        transform:translateY(0px);
    }
}
@keyframes fadeInTop{
    0%{
        opacity:0;
        transform:translateY(-50px);
    }
    100%{
        opacity:1;
        transform:translateY(0px);
    }
}

@keyframes fadeOut{
    0%{
        opacity:1;
    }
    100%{
        opacity:0;
    }
}