/* import fonts */
@font-face {
    src: url("fonts/Queens/Queens-Var.ttf") format("opentype");
    font-family: Queens;
    font-weight: 100 800;
    font-stretch: 25 100;
  }

@font-face {
    src: url("fonts/OldschoolGrotesk_W-Regular.woff2") format("truetype");
    font-family: Oldschool;
  }

@font-face {
  src: url("fonts/KilotypeLogo-Small.otf") format("opentype");
  font-family: KilotypeLogo;
}

@viewport{
  zoom: 1.0;
  width: extend-to-zoom;
}
 
/* ************************************************************** */
/* colors: black / white / rosa #ffbfc0 / purple #870de3 */

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-image: url('../images/default.gif');
    background-repeat: no-repeat; 
    background-color: #870de3;
    background-position: center;
 }

/* Hide Cursor */
* {
    cursor:none;
  }  

/* generate Cursor */
.cursor {
position: absolute;
width: 50px;
height: 50px;
top: -50%;
left: -50%;
margin: -15px 0 0 -15px;
border-radius: 50%;
background-color: white;
backface-visibility: hidden;
transition: transform 0.2s ease-out;
mix-blend-mode: difference;
z-index: 1000;
pointer-events: none;
}

.cursor.is-moving {
transform: scale(0.5);
}


/* ************************************************************** */
/* body styles */
body {
margin-top:-1%;
margin-left:-1%;
width: 102%;
overflow-x: hidden;
font-family: Queens, serif;
text-align: center;
color: white;
object-fit: contain;
background-color: black;
z-index: -10;
font-size: 3vw;
scroll-behavior: smooth;
}

        /* Text Formats */
            a:link { color:white; text-decoration: none;}
            a:visited { color:white; text-decoration: none;}
            a:hover{font-weight:800;    
                transition: font-weight 0.6s ease;
            }
          
            .text {
            text-transform: none;
            color: white;
            margin-bottom:-2%;
            font-size: 2em;
            text-transform: uppercase;
            }

            .logo {
              font-family: KilotypeLogo, serif;
              font-size: 1.5em;
            }

            .info {
            color: white;
            font-size: 0.8em;
            line-height: 1.2em;
            text-align: center;
            font-weight: 300;
            text-transform: none;
            margin-top: 10%;
            width: 70%;
            padding-left: 14%;
            padding-right: 12%;
            z-index: 9;
            align-content: center;
            }

              bold {
                font-weight:800;
              }

            .legal {
            width: 100%;
            height: 10vh;
            text-align: center;
            font-family: Oldschool, sans-serif;
            text-transform: uppercase;
            color: white;
            font-size: 1vw;
            line-height: 1.5em;
            margin-top: 10%;
            }

            .variable-text {
            font-weight: 10;
            text-align: center;
            height: 60%;
            width: 80%;
            align-content: center;
            color: white;
            font-size: 3.2em;
            line-height: 1;
            z-index: 5;
            padding-top:10%;
            padding-bottom:10%;
            padding-left: 10%;
            padding-right: 10%;
            align-content: center;
            }

            .pre-text {
                color: white;
                font-size: 4.5vw;
                line-height: 0.8;
                text-align: center;
                margin-top: 30vh;
                width: 70%;
                padding-left: 15vw;
                padding-right: 20vw;
                z-index: 10;
                align-content: center;
                animation: preload 2s ease infinite;
                }

        @keyframes preload {
                0%   { font-variation-settings: 'wght' 100, 'wdth' 40;
                    font-size: 5em;
                 }

                33% { font-variation-settings: 'wght' 800, 'wdth' 100;
                    font-size: 4.5em;
                 }

                100%   { font-variation-settings: 'wght' 100, 'wdth' 40;
                    font-size: 5em;
                 }
            }
          

    /* DIV Container */

     /* marquee */
    .marquee {
    display: block;
    width: 100%;
    white-space: nowrap;
    box-sizing: border-box;
    position: sticky;
    top:-2em;
    font-size: 1em;
    padding-bottom: 0.1em;
    padding-top: 0.5em;
    color: black;
    overflow: hidden;
    background-color: #870de3;
    animation: marquee 20s linear infinite;
    font-variation-settings: 'wght' 300, 'wdth' 100;
    text-transform: uppercase;
    z-index:10;
    }

        .marquee-bottom{
        display: block;
        width: 100%;
        white-space: nowrap;
        box-sizing: border-box;
        position: sticky;
        bottom: 0;
        font-size: 1em;
        padding-bottom: 0.1em;
        padding-top: 0.25 em;
        color: black;
        overflow: hidden;
        background-color: #870de3;
        animation: marquee 20s linear infinite;
        font-variation-settings: 'wght' 300, 'wdth' 100;
        text-transform: uppercase;
        z-index:8;
        }


        .marquee .char {
        --delay: calc((var(--char-index) + 1) * 400ms);
            animation: marquee 4000ms infinite linear;
        animation-delay: var(--delay);
        }

            .marquee:hover {
            background-color: white;
            color: #870de3;
            animation-play-state: paused
            }

            .marquee-bottom:hover {
                background-color: white;
                color: #870de3;
                animation-play-state: paused
            }

            @keyframes marquee {
            0%   { text-indent: 50vw; }
            100% { text-indent: -50vw; }
            }


     /* header */
    .header {
    width: 80%;
    max-height: 100vw;
    padding-left: 10%;
    z-index: 0;
    }

    /* common section */
    .section {
    width: 100%;
    align-content: center;
    z-index: 5;
    }

    /* common section */
    .section-swipe {
        width: 90%;
        padding-left: 7%;
        align-content: center;
        z-index: 5;
        }

    /* videos */
    .video {
      width: 100%    !important;
      height: auto   !important;
      padding-top:10%;
      padding-bottom: -10%;
    }

      video::-webkit-media-controls {
        display:none !important;
      }
        
    /* intro */
    .intro {
    text-align: center;
    color: white;
    font-weight: 300;
    margin-top: 10%;
    width: 70%;
    z-index: 5;
    align-content: center;
    padding-left: 15%;
    padding-right: 12%;
    }

    .part-01 {
    width: 100%;
    background-image: url("assets/graphic/queens-bg-01.png");
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: contain;  
    overflow:hidden;
    }

            .passport {
            margin-top:10%;
            width: 100%;
            height: auto;
            position: relative;
            }

            .money {
            width: 100%;
            position: relative;
            }

                        .swiper-container {
                        width: 90%;
                        height: 100%;
                        z-index: 5;
                        align-content: center;
                        }

                        .content-slide {
                        width: 100%;
                        }

                        .pagination {
                        position: absolute;
                        left: 0;
                        text-align: center;
                        bottom:5px;
                        width: 100%;
                        }

                        .swiper-pagination-switch {
                        display: inline-block;
                        color: #870de3;
                        width: 10px;
                        height: 10px;
                        border-radius: 10px;
                        background: #999;
                        box-shadow: 0px 1px 2px #555 inset;
                        margin: 0 3px;
                        }

                        .swiper-active-switch {
                        background: #fff;
                        }

              
    .part-02 {
    width: 100%;
    background-image: url("assets/graphic/queens-bg-02.png");
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: contain;  
    }

        .books { 
          width: 100%;
          height: 45vh;
          padding-bottom: 15%;
          position: relative;
          overflow-x: scroll;
          overflow-y: hidden;
          scrollbar-width: none; /* Firefox */
          -ms-overflow-style: none;  /* IE 10+ */
          }

                .books::-webkit-scrollbar /* Chrome Safari */
                {
                  display: none;
                }

                    #books-thumbs{
                    position: absolute;
                    left: 0px;
                    width: auto;
                    height: auto;
                    overflow: hidden;
                    white-space: nowrap;
                    }

                    #books-thumbs div
                    {
                    width: 40vh;
                    padding: 5vw 5vw;
                    display: inline-block;
                    }


        .huge-text {
          overflow-x: scroll;
          overflow-y:hidden;
          scrollbar-width: none; /* Firefox */
          -ms-overflow-style: none;  /* IE 10+ */
          animation: swipe 2s infinite both;
          font-size: 70vh;
          color: white;
          font-weight: 600;
          font-variation-settings: 'wdth' 60;
          font-feature-settings: "case" on;
          white-space: nowrap;
          }

         

          @keyframes swipe {
            0%   { text-indent: 2vw; }
            50% { text-indent: 3vw; }
            100% { text-indent: 2vw;}
            }
                .huge-text::-webkit-scrollbar /* Chrome Safari */
                {
                  display: none;
                }

    .part-03 {
    width: 100%;
    background-image: url("assets/graphic/queens-bg-01.png");
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: contain;  
    }
            .stamps { 
            width: 100%;
            padding-top: 15%;
            padding-bottom: 15%;
            height: 40vh;
            position: relative;
            overflow-x: scroll;
            overflow-y:hidden;
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none;  /* IE 10+ */
            }
  
                  .books::-webkit-scrollbar /* Chrome Safari */
                  {
                    display: none;
                  }

                #stamps-thumbs{
                position: absolute;
                left: 0px;
                width: auto;
                height: auto;
                overflow: hidden;
                white-space: nowrap;
                padding: 0 10vw;
                }

                #stamps-thumbs div
                {
                width: 20vh;
                margin: 0 10vw;
                display: inline-block;
                }

    /* Elements */
    .button-container {
    display: grid;
    width: 80%;
    margin-bottom:10%;
    padding-left: 12%;
    padding-right: 10%;
    grid-template-columns: 25% 25% 25%;
    grid-column-gap: 10%;
    }
      
        .button {
        border-style: solid;
        border-width: 1px;
        border-color:#870de3;
        padding: 10%;
        margin-right: 7%;
        width:100%;
        justify-self: center;
        color: white;
        text-transform: uppercase;
        font-variation-settings: 'wght' 300;       
        transition: font-variation-settings 0.6s ease, background-color 0.6s ease;
        }

        .button:hover {
        text-decoration: none;
        background-color: #870de360;
        font-variation-settings: 'wght' 800;       
        transition: font-variation-settings 0.6s ease, background-color 0.6s ease;
        }

        
/* ************************************************************** */
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 700px) {

  body {
    margin-top:-1%;
    margin-left:-1%;
    width: 102%;
    overflow-x: hidden;
    font-family: Queens, serif;
    text-align: center;
    color: white;
    object-fit: contain;
    background-color: black;
    z-index: -10;
    font-size: 3vw;
    scroll-behavior: smooth;
    }

    .cursor {
    width: 0px;
    height: 0px; 
    }

    .header {
        width: 100%;
        padding-left: 0;
    }

    .section-swipe {
        width: 95%;
        padding-left: 2%;
        align-content: center;
        }

    .part-01 {
        width: 100%;
        overflow: hidden;
        background-size: cover;
        }

    .part-02 {
        width: 100%;
        overflow: hidden;
        background-size: cover;
        }

    .part-03 {
        width: 100%;
        overflow: hidden;
        background-size: cover;
        }

    .text {
    font-size: 2em;
    line-height: 1.2em;
    margin-bottom:0%;
    }

    .pre-text {
      margin-top: 25vh;
      }


    .marquee {
    font-size: 2em;
    top:-2em;
    margin-top: -0.25em;
    }

    .marquee-bottom {
    visibility: hidden;
    }

    .info {
    font-size: 1.8em;
    line-height: 1.4em;
    }

    .legal {
      margin-left: 10%;
      width: 80%;
      font-size: 0.8em;
      padding-bottom: 5%;
      height:auto;
    }

    .huge-text {
        overflow-x: scroll;
        overflow-y:hidden;
        font-size: 50vh;
        color: white;
        font-weight: 600;
        font-variation-settings: 'wdth' 60;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none;  /* IE 10+ */
        animation: swipe 2s infinite both;
        }

    .variable-text {
    font-weight: 10;
    text-align: center;
    font-size: 4em;
    line-height: 1;
    }

    .stamps { 
    width: 100%;
    padding-top: 15%;
    padding-bottom: 15%;
    height: 35vh;
    overflow: hidden;
    position: relative;
    overflow-x: scroll;
    }

        #stamps-thumbs div
        {
        width: 22vh;
        margin: 0 10vw;
        display: inline-block;
        }
    } 

  

    .button-container {
        display: grid;
        width: 80%;
        margin-bottom:10%;
        padding-left: 27.5%;
        padding-right: 20%;
        grid-template-columns: 60%;
        }
        
            .button {
            font-size: 1.5em;
            padding: 10%;
            margin-bottom: 10%;
            width:100%;
            justify-self: center;
            }


/* ************************************************************** */
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  body {
    font-size: 2vw;
    }

  .section {
    width: 60%;
    padding-left: 20%;
  }

  .section-swipe {
    width: 70%;
    padding-left: 15%;
    align-content: center;
    z-index: 5;
    }

  .intro {
    width: 60%;
    z-index: 5;
    align-content: center;
    padding-left: 20%;
    padding-right: 20%;
    }

  .button-container {
    display: grid;
    width: 60%;
    margin-bottom:10%;
    padding-left: 20%;
    padding-right: 20%;
    grid-template-columns: 25% 25% 25%;
    grid-column-gap: 10%;
    }

    .button {
        font-size: 1em;
    }

  .info {
    color: white;
    font-size: 0.8em;
    line-height: 1.2em;
    text-align: center;
    font-weight: 300;
    text-transform: none;
    margin-top: 10%;
    width: 50%;
    padding-left: 25%;
    padding-right: 20%;
    z-index: 9;
    align-content: center;
    }

  .legal {
    margin-left: 25%;
    width: 50%;
    font-size: 0.3em;
  }

  .stamps { 
    width: 100%;
    padding-top: 15%;
    padding-bottom: 15%;
    height: 20vh;
    position: relative;
    overflow-x: scroll;
    overflow-y:hidden;
    }
    
      #stamps-thumbs div
      {
      width: 20vh;
      margin: 0 10vw;
      display: inline-block;
      }
}