@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');



@font-face {

    font-family: Alice;

    src: url('../fonts/Alice_in_Wonderland_3.ttf');

}



@font-face {

    font-family: Zombie;

    src: url('../fonts/ScaryZombie-2OoMv.ttf');

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    /* font-family: 'Poppins', sans-serif; */

}



body {

    /* min-height: 100vh; */

    overflow-x: hidden;

}



header {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    padding: 30px 100px;

    justify-content: space-between;

    align-items: center;

    z-index: 100;

    text-align: center;

    font-family: 'Poppins', sans-serif;

}



.navigation{

    display: inline-block;

    background-color: hsl(0, 0%, 0%);

    padding: 15px;

    border-radius: 25px;

}



.logo {

    font-size: 2em;

    color: #fff;

    user-select: none;

}



.navigation a {

    position: relative;

    font-size: 1.1em;

    color: #fff;

    font-weight: 600;

    text-decoration: none;

    margin-left: 0px;

    padding: 6px 15px;

    transition: .5s;

}



.navigation a:hover,

.navigation a.active {

    color: #000;

    z-index: 100;

}



.navigation a span {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: #fff;

    border-radius: 30px;

    z-index: -90;

    transform: scale(0);

    opacity: 0;

    transition: .5s;

}



.navigation a:hover span,

.navigation a.active span {

    transform: scale(1);

    opacity: 1;

    color: #000;

}



.parallax {

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

    background: url('../images/background.png') no-repeat;

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

}



#text {

    position: absolute;

    font-family: Zombie;

    font-size: 4.2em;

    -webkit-text-stroke-width: 1px;

    -webkit-text-stroke-color: #FF0000;

    color: #000;

    text-shadow: 2px 4px 5px #f9f9f9;

}



.parallax img {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    pointer-events: none;

}



.parallax img#gate-left {

    position: fixed;

    transform: translateX(-282px);

}



.parallax img#gate-right {

    position: fixed;

    transform: translateX(305px);

}



.sec {

    position: relative;

    text-align: center;

    background: #020912;

    padding: 30px 100px;

    font-family: Alice;

    overflow: hidden;

}



.sec h2 {

    display: inline-block;

    font-size: 3em;

    font-weight: lighter;

    width: 50%;

    color: #fff;

    margin-bottom: 10px;

    

}



.sec p {

    font-size: 1em;

    color: #fff;

    font-weight: 300;

    text-align: justify;

}



#spider-web{

    margin: -200px;

}



.menu-social1{

    margin-top: -700px;

}



footer{

    height: auto;

    position: relative; 

    margin-top: -700px;

}



.sec-legal{

    color: #fff;

    padding-bottom: 250px;

}



.legal a{

    color: #fff;

    font-size: 4em;

    text-decoration: none;

}



.legal2{

    padding: 20px;

    font-family: Arial, Helvetica, sans-serif;

}



.bios{

    display: flex;

    margin-top: -50px;

    

}



.sidea, .sideb{

    width: 49%;

    text-align: center;

}



.foto{

    width: 40%;

}



.title-bio{

    font-family: Zombie;

    font-size: 6rem;

}

#img-bio{
    width: 100%;
}

.btn-boogie{
    color: #fff;
    background-color: transparent;
    border-radius: 15px;
    border: 2px solid #fff;
    padding: 15px;
    font-family: Alice;
    font-size: 2rem;
    cursor: pointer;
    transition: .3s all;
}

.btn-boogie:hover{
    background-color: #fff;
    color: #000;
    transition: .3s all;
}


.text-bio{

    font-family: Alice;

    font-size: 1.8rem;

}



.clown{

    background-color: #040306;

}



.clown h2{

    color: #0E202A;

    -webkit-text-stroke-width: 1px;

    -webkit-text-stroke-color: #ffffff;

}



.clown p{

    color: #fff;

}



.king{

    background: url('../images/background-gothking.png') no-repeat;

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

    height: auto;

}



.king h2{

    color: #FF0000;

    -webkit-text-stroke-width: 1px;

    -webkit-text-stroke-color: #ffffff;

    margin-left: 20px;

}



.king p{

    color: #fff;

    font-size: 2.8rem;

    margin-left: 20px;

}



.apoc{

    background-color: #12181E;

}



.apoc .sidea{

    margin-top: 300px;

}



.apoc h2{

    color: #0A21C0;

    -webkit-text-stroke-width: 1px;

    -webkit-text-stroke-color: #ffffff;

    margin-left: 20px;

    font-size: 5em;

}



.apoc p{

    color: #fff;

    font-size: 2.8rem;

    margin-left: 20px;

}



.cowboy{

    background-color: #2B180D;

}



.cowboy h2{

    color: #2B180D;

    -webkit-text-stroke-width: 1px;

    -webkit-text-stroke-color: #ffffff;

    margin-left: 20px;

    font-size: 5em;

}



.cowboy p{

    color: #fff;

    font-size: 2.8rem;

    margin-left: 20px;

}



.vamp{

    background: linear-gradient(180deg, rgba(179,179,177,1) 0%, rgba(77,77,76,1) 100%);

}



.vamp h2{

    color: #2F2925;

    -webkit-text-stroke-width: 1px;

    -webkit-text-stroke-color: #ffffff;

    margin-left: 20px;

    font-size: 5em;

}



.vamp p{

    color: #fff;

    font-size: 2.8rem;

    margin-left: 20px;

}



.class p{

    font-size: 2rem;

    text-align: center;

}



.about{

    padding-top: 50px;

}



.about h2{

    font-size: 2.5em;

}



.about p{

    font-size: 2.5rem;

}



.sec img{

    position: relative;

}



.container{

    max-width: 85%;

    margin:20px auto;

}

  

.container .title{

    font-size: 25px;

    background-color: #000;

    color:#fff;

    border-radius: 5px;

    margin-bottom: 10px;

    text-align: center;

    padding:15px;

}

  

.container .image-container{

    columns:3 250px;

    gap:15px;

}

  

.container .image-container img{

    margin-bottom: 10px;

    border-radius: 5px;

    width: 100%;

    transition: all .3s;

}



.container .image-container img:hover{

    transform: scale(110%);

    transition: all .3s;

    z-index: 100;

}



.legal .dfk{

    font-size: 1rem;

}



/*------------- barrel row---------------*/

::-webkit-scrollbar {

    width: 5px;

    height: 10px;

}



::-webkit-scrollbar-track {

    background:#ff0000;

}



::-webkit-scrollbar-thumb {

    box-shadow: 0 0 10px white, 0 0 20px rgb(218, 218, 218), 0 0 40px white;

    background: white;

} 



@media (max-width: 600px) {

    .about{

        display: block;

        width: 100%;

        text-align: center;

    }

    .about .sidea,.about .sideb{

        width: auto;

    }

    .about img{

        width: 100%;

    }

    .about h2{

        font-size: 2rem;

        width: 200%;

    }

    

    .about p{

        font-size: 1.5rem;

    }

    iframe{

        margin-left: -100px;

    }

    .menu-social img{

        padding: 20px 0;

    }

    .legal a{

        font-size: 2rem;

    }



    .parallax {

        position: relative;

        justify-content: center;

        align-items: center;

        height: 100vh;

        background: url('../images/background-mobile.png') no-repeat;

        background-size: cover;

        background-position: center;

        background-attachment: fixed;

    }

    #tree-left, #tree-right, #grass, #gate-left, #gate-right{

        display: none;

        visibility: hidden;

    }

    #text{

        text-align: center;

        font-size: 3rem;

    }

    .sec h2{

        font-size: 2rem;

        width: 100%;

    }

    .bios{

        display: block;

        text-align: center;

        width: 100%;

    }

    .bios .sidea img, .bios .sideb img {

        width: 100%;

        text-align: center;

    }

    .bios .sidea,.bios .sideb{

        width: auto;

        display: block;

        text-align: center;

    }

    .title-bio, .text-bio p{

        width: 100%;

        text-align: center;

    }

    .title-bio{

        font-size: 4rem;        

    }

    .apoc h2{

        font-size: 3rem;

        margin-left: 0px;

    }

    .apoc .sidea{

        margin-top: -300px;

    }

    .menu-social1{

        z-index: 10000;

        

    }

    .menu-social{

        display: inline-block;

    }

    .social{

        width: 5em;

    }

    .class{

        padding-top: 200px;

    }

    .class h2{

        font-size: 4rem;

    }

    #img-bio{
        height: 500px;
    }


}