*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,body{
    width:100%;
    height:100%;
}

body{
    min-height:100dvh;

    overflow:hidden;

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

    color:white;

    background:
        linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.82)),
        url("assets/background1.png");

    background-size:cover;
    background-position:center;

    font-family:Oswald,sans-serif;
}

main{

    position:relative;

    z-index:100;

    text-align:center;

    animation:fadeUp 2s ease;
}

/*main {*/
/*    position: relative;*/
/*    z-index: 100;*/
/*    text-align: center;*/

/*    width: min(90%, 900px);*/

/*    padding: 2rem;*/

/*    animation: fadeUp 2s ease;*/
/*}*/

h1{

    font-family:Cinzel,serif;

    font-size:clamp(4rem,9vw,8rem);

    letter-spacing:.4em;

    font-weight:600;

    text-shadow:
        0 0 10px rgba(255,255,255,.5),
        0 0 30px rgba(120,0,0,.8),
        0 0 70px rgba(120,0,0,.7);
}
/*h1 {*/

/*    font-family: Cinzel, serif;*/

/*    font-size: clamp(3rem, 11vw, 8rem);*/

/*    letter-spacing: clamp(.15em, 1vw, .4em);*/

/*    line-height: .95;*/

/*    text-shadow:*/
/*        0 0 10px rgba(255,255,255,.5),*/
/*        0 0 30px rgba(120,0,0,.8),*/
/*        0 0 70px rgba(120,0,0,.7);*/
/*}*/

.line{

    width:220px;
    height:2px;

    margin:35px auto;

    background:#721111;

    box-shadow:0 0 20px #8d0000;
}

/*h2{*/

/*    font-weight:300;*/

/*    letter-spacing:.5em;*/

/*    font-size:1rem;*/

/*    color:#cccccc;*/
/*}*/
h2{

    font-weight:300;

    letter-spacing:.35em;

    font-size:clamp(.8rem,2vw,1rem);

    color:#ccc;

    text-transform:uppercase;
}
.coming-soon{

    margin-top:70px;

    display:inline-block;

    padding:18px 50px;

    border:1px solid rgba(255,255,255,.15);
    
    border-radius: 40px;

    letter-spacing:.4em;

    font-size:1.1rem;

    backdrop-filter:blur(8px);

    background:rgba(255,255,255,.04);

    text-transform:uppercase;

    box-shadow:
        0 0 25px rgba(90,0,0,.5);
}

.coming-soon2{

    margin-top:3rem;

    display:inline-block;

    padding:1rem 2rem;

    border:1px solid rgba(255,255,255,.18);
    
    border-radius: 40px;

    letter-spacing:.3em;

    font-size:clamp(.85rem,2.5vw,1.1rem);

    backdrop-filter:blur(8px);

    background:rgba(255,255,255,.04);

    text-transform:uppercase;

    box-shadow:0 0 25px rgba(90,0,0,.5);
}

.vignette{

    position:absolute;
    inset:0;

    background:radial-gradient(circle,
        transparent 35%,
        rgba(0,0,0,.88) 100%);

    pointer-events:none;
}
.red {
    color: red !important;
    /*position: relative;*/
    /*top: -2px;*/
}

.grain{

    position:absolute;
    inset:0;

    background:url("assets/grain.png");
    background-size:cover;

    opacity:.12;

    animation:grain .2s steps(8) infinite;

    pointer-events:none;
}

.fog{

    position:absolute;

    inset:-20%;

    background:url("assets/fog.png") repeat;

    /*background-size:1200px;*/
    background-size:cover;

    opacity:.15;

    mix-blend-mode:screen;

    pointer-events:none;
}

.fog1{

    animation:fogOne 70s linear infinite;
}

.fog2{

    animation:fogTwo 100s linear infinite reverse;

    opacity:.08;
}

.light{

    position:absolute;

    top:-20%;

    left:50%;

    transform:translateX(-50%);

    width:900px;

    height:900px;

    background:radial-gradient(circle,
    rgba(120,0,0,.18),
    transparent 70%);

    animation:pulse 5s ease-in-out infinite;
}

@keyframes fogOne{

    from{transform:translateX(0);}
    to{transform:translateX(-700px);}
}

@keyframes fogTwo{

    from{transform:translateX(0);}
    to{transform:translateX(700px);}
}

@keyframes pulse{

    50%{

        opacity:.55;
    }
}

@keyframes grain{

    from{
        transform:translate(0,0);
    }

    to{
        transform:translate(-4%,3%);
    }
}

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(25px);
    }

    to{

        opacity:1;
        transform:none;
    }
}

/* Tablets */

@media (max-width: 900px) {

    body{

        background-attachment:scroll;
    }

    .light{

        width:650px;
        height:650px;
    }

}

/* Phones */

@media (max-width:600px){

    main{

        padding:1rem;
    }

    h1{

        font-size:3.25rem;

        letter-spacing:.12em;
    }

    h2{

        letter-spacing:.2em;

        font-size:.75rem;
    }

    .coming-soon{

        width:100%;

        max-width:320px;

        padding:16px;

        letter-spacing:.18em;

        font-size:.9rem;
    }

    .line{

        margin:1.25rem auto;
    }

    .fog{

        background-size:800px;
    }

}