*{
    margin:0px;
    padding:0px;
    box-sizing:border-box;
}
html
{
 background: #f7f4ec;
    height: -webkit-fill-available;

    background-image: repeating-linear-gradient(
        45deg,
        #f7f4ec,
        #f7f4ec 10px,
        #f5f0e4 10px,
        #f5f0e4 11px
    );
}

body{
    font-family: Arial, sans-serif;
    width: 100%;
    
      margin: 0;
      padding: 0;

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

     
}

.page{
    
    max-width:500px;
    margin:0px auto;
}
.gate-section{
    height:100vh;

    margin:0px auto;
}
.gate-video{
height:100%;
width:100%;
cursor: pointer;

} .welcome-text {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    color:red;
    font-family: "Great Vibes", cursive;
    font-size: clamp(30px, 8vw, 40px);

    text-align: center;
    white-space: nowrap;

    z-index: 10;

    opacity: 0;
    transition: opacity 1s ease;
}



/* Keep the opening video and its greeting in the same mobile-sized container. */
@media (max-width: 768px) {
    .page { width: 100%; min-width: 0; }
    .page .gate-section {
        position: relative;
        width: 100%;
        height: 100svh;
    }
    .page .gate-video { display: block; max-width: 100%; }
    .page .welcome-text {
        width: 90%;
        white-space: normal;
        overflow-wrap: anywhere;
        pointer-events: none;
    }
}