/*normal fadein animation settings----------------------------------------------------------------------------*/
@keyframes fadein {
    0%   { opacity:0 }
    100% { opacity:1 }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    0%   { opacity:0 }
    100% { opacity:1 }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    0%   { opacity:0 }
    100% { opacity:1 }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    0%   { opacity:0 }
    100% { opacity:1 }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    0%   { opacity:0 }
    100% { opacity:1 }
}

/*harry potter fadein animation settings----------------------------------------------------------------------------*/
@keyframes hpfadein {
    0%   { opacity:0 }
    72%  { opacity:0 }
    100% { opacity:1 }
}

/* Firefox < 16 */
@-moz-keyframes hpfadein {
    0%   { opacity:0 }
    72%  { opacity:0 }
    100% { opacity:1 }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes hpfadein {
    0%   { opacity:0 }
    72%  { opacity:0 }
    100% { opacity:1 }
}

/* Internet Explorer */
@-ms-keyframes hpfadein {
    0%   { opacity:0 }
    72%  { opacity:0 }
    100% { opacity:1 }
}

/* Opera < 12.1 */
@-o-keyframes hpfadein {
    0%   { opacity:0 }
    72%  { opacity:0 }
    100% { opacity:1 }
}
/* 
floating------------------------------------------------------------------------------ 
@keyframes floating {
    from { transform: translate(0,  3vh); }
    to   { transform: translate(0, -0px); }    
} */

/* preload---------------------------------------------------------------------------- */
.preload{
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: black;
    color: #FFF;
    font-family: 'harry_pregular','Times New Roman', Times, serif;
    font-size: 2vw;
    z-index: 100;
    overflow: hidden;
}

.preload img{
    width: 20vw;
    margin-bottom: 10px;
}

.preload-finish{
    opacity: 0;
    pointer-events: none;   
    /*hover appear time*/
    transition: 0.6s;
}

body{
    margin: 0;
    padding: 0;
    height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
    /* smooth scroll
    overflow: hidden; */
}

.wrapper{
    width: 100%;
    height: 100%;
    /* smooth scroll
    overflow-y: scroll;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory; */
}

/*navigation bar only-------------------------------------------------------------------*/
.navigationbararea{
    --text: rgb(255, 255, 255);
    --textinverse: rgb(0, 0, 0);
    --background: rgba(255, 255, 255, 0.788);


    position: fixed;
    top: 0;
    z-index: 3;
    display: flex;
    width: 100vw;
    height: auto;
}

.navigationbar ul{
    display: flex;
    width: 100vw;
    list-style: none;
    justify-content: center;
}

.navigationbar ul li{
    margin: 0 1em;
    padding: 1em;
}

.navigationbar ul li a{
    padding: 0.75em;
    text-decoration: none;
    font-family: animales-fantastic, Arial, Helvetica, sans-serif;
    font-size: 1.7vw;
    font-weight: 800;
    color: var(--text);
    /*hover appear time*/
    transition: 0.3s;
    /*fade in animation*/
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
}

/* button hover (pc only) */
@media only screen and (min-device-width: 600px) {
    .navigationbar ul li a:hover{
        background-color: var(--background);
        color: var(--textinverse);
        border-radius: 10px;
    }
}

/* change nav colour when scrolled to a certain position (pc only) */
@media only screen and (min-device-width: 600px) {
    .navigationbar-scrolled-to-zone-2{
        --text: rgb(0, 0, 0);
        --textinverse:rgb(255, 255, 255);;
        --background: rgba(68, 143, 18, 0.589); 
    }

    .navigationbar-scrolled-to-zone-3{
        --text: rgb(255, 255, 255);
        --textinverse: rgb(0, 0, 0);
        --background: rgba(255, 255, 255, 0.562); 
    }
}

.navbar3stroke{
    display: none;
}

/*zone 1 only----------------------------------------------------------------------------*/
.zone1{
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    /*smooth scroll*/
}


.zone1 video{
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    width: 100%;
    height: 100vh;
    pointer-events: none;
    z-index: -1;
}

/* for shitty stupid Microsoft Edge */
@supports (-ms-ime-align:auto) {
    .zone1 video{
        /* must write height: auto !important; for shitty Microsoft Edge*/
        /* otherwise video background won't work */
        /* normally I use 100vh */
        height: auto !important;
    }
}

.zone1 .textbox{
    position: relative;
    z-index: 1;
    margin: 0 auto;
    text-align: center;
    color: #FFF;
    pointer-events: none;

    /*fade in animation*/
    -webkit-animation: hpfadein 19s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: hpfadein 19s; /* Firefox < 16 */
        -ms-animation: hpfadein 19s; /* Internet Explorer */
         -o-animation: hpfadein 19s; /* Opera < 12.1 */

}


/*zone 2 only----------------------------------------------------------------------------*/
.harrypottersticker{
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    background: url("../images/playstorehp.jpg") no-repeat center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 2;
    /*smooth scroll*/
    scroll-snap-align: center;
}

.harrypottersticker .textbox{
    position: relative;
    width: 50vw;
    z-index: 2;
    margin: 0 auto;
    padding: 5vw;
    border-radius: 40px;
    text-align: center;
    color: rgb(62, 19, 71);
    background-color: rgba(255, 255, 255, 0.6);
}

.harrypottersticker .textbox button {
    margin-top: 30px;
    padding: 1vw;
    text-decoration: none;
    text-align: center;
    background-color: #FFF;
    border-style: solid;
    border-color: rgb(62, 19, 71);
    border-width: medium;
}

.harrypottersticker .textbox button p{
    color: rgb(62, 19, 71);
}

.harrypottersticker .textbox button:hover{
    background-color: rgba(147, 74, 206, 0.479);
    border-style: solid;
    /*hover appear time*/
    transition: 0.3s;
    cursor: pointer;
}

.harrypottersticker .textbox button p{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2vw;
    margin: 0;
}


.harrypottersticker .holdingphone img{
    width: 30vw;
}


/*zone 3 only----------------------------------------------------------------------------*/
.dragonball{
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url("../images/dbsuperblur.jpg") no-repeat center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 2;
    /*smooth scroll*/
    scroll-snap-align: center;
}

.dragonball .textbox{
    position: relative;
    z-index: 2;
    margin: 0 auto;
    padding: 4vw;
    border-radius: 40px;
    text-align: center;
    color: rgb(236, 109, 5);
    background-color: rgba(255, 255, 255, 0.795);
}

.dragonball .textbox button {
    margin-top: 20px;
    padding: 10px;
    text-decoration: none;
    text-align: center;
    background-color: #FFF;
    border-style: solid;
    border-color: rgb(236, 109, 5);
    border-width: medium;
}

.dragonball .textbox button p{
    color: rgb(236, 109, 5);
}


.dragonball .textbox button:hover{
    background-color: rgba(255, 145, 0, 0.548);
    border-style: solid;
    cursor: pointer;
    /*hover appear time*/
    transition: 0.3s;
}

.dragonball .textbox button p{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2vw;
    margin: 0;
}

/*zone 4 only----------------------------------------------------------------------------*/
.socialmedia{
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: url("../images/socialmediablur.jpg") no-repeat center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 2;
    /*smooth scroll*/
    scroll-snap-align: center;
}

.socialmediatitle{
    margin-bottom: 8vh;
}

.socialmediatitle h1{
    font-family: 'harry_pregular', 'Times New Roman', Times, serif;
    font-weight: normal;
    font-size: 20vh;
    color: rgb(255, 255, 255);
    margin: 0;
}

.socialmediabuttons{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 0;
}

.socialmedia .sm{
    margin-top: 0;
    width: 22vh;
    height: 22vh;
    margin-left: 3vw;
    margin-right: 3vw;
    background-size: cover;
    background-repeat: no-repeat;
    text-decoration: none;
    border-style: none;
    /* for sliding */
    overflow: hidden;
}

.slider{
    top: 100%;
    left: 0;
    position: relative;
    transition: all .3s ease-out;
    width: 22vh;
    height: 22vh;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0;
    cursor: pointer;
    border: none;
}

.socialmedia .youtube{
    background-image: url("../images/youtube.png");
}

.socialmedia .youtubeslider{
    background-image: url("../images/youtube_hover.png");
}
  
.socialmedia .youtube:hover > .youtubeslider{
    top: 0;
    margin: 0;
}

.socialmedia .telegram{
    background-image: url("../images/telegram.png");
}

.socialmedia .telegramslider{
    background-image: url("../images/telegram_hover.png");
}
  
.socialmedia .telegram:hover > .telegramslider{
    top: 0;
    margin: 0;
}

.socialmedia .twitter{
    background-image: url("../images/twitter.png");
}

.socialmedia .twitterslider{
    background-image: url("../images/twitter_hover.png");
}
  
.socialmedia .twitter:hover > .twitterslider{
    top: 0;
    margin: 0;
}

/*zone 5----------------------------------------------------------------------------*/
.bibleverse{
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: left;
    align-items: flex-end;
    background: url("../images/sparrow.jpg") no-repeat center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 2;
    /*smooth scroll*/
    scroll-snap-align: center;
}

.bibleverse .verse{
    max-width: 45vw;
    margin-left: 6vw;
    margin-bottom: 6vw;
}

.bibleverse p{
    font-family: 'Tangerine', cursive;
    font-size: 3.5vw;
    color: #FFF;
    margin: 0;
}

/*sth common in zone 12345678...----------------------------------------------------------------------------*/
.textbox h2{
    margin: 0;
    padding: 0;
    font-size: 6vw;
    font-family: animales-fantastic, Arial, Helvetica, sans-serif;
    font-weight: bold;
}

.textbox p{
    margin-top: 2vh;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    padding: 0;
    font-size: 2.5vw;
    font-family: EB Garamond;
    font-weight: 600;
}

.textbox strong{
    font-weight: 900;
}


/* contact us ----------------------------------------------------------------------------*/
.contact-us{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;    
}

.contact-us h1{
    font-size: 6vw;
    font-family: 'Playfair Display', serif;
    font-weight: 300;
    margin: 0;
    margin-top: 15px;
}

.contact-us h2{
    font-size: 2.4vw;
    font-family: 'Mada', sans-serif;
    font-weight: 300;
    margin: 0;
}

.contact-us form{
    margin-top: 3vh;
}

.contact-us .form-control{
    width: 50vw;
    background: transparent;
    border: none;
    outline: none;
    border-bottom: 2px solid rgba(0, 0, 0, 0.507);
    font-size: 2.3vw;
    margin-bottom: 20px;
    font-family: 'Vollkorn', serif;
}

.contact-us .submit{
    font-size: 2.4vw;
    font-family: 'Montserrat Alternates', sans-serif;
    color: #FFF;
    border: none;
    background: #000;    
    border: #000 solid;
    padding: 7px;
    margin-top: 5px;
}

.contact-us .submit:hover{
    color: rgb(0, 0, 0);
    border: #000 solid;
    background-color: #FFF;
    cursor: pointer;
    /*hover appear time*/
    transition: 0.3s;
}