
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{

    width:100%;
    height:100%;

    overflow:hidden;

    font-family:'Montserrat',sans-serif;

    background:#000;

}

.background{

    position:fixed;

    background-image:
        linear-gradient(rgba(0,0,0,.30),rgba(0,0,0,.55)),
        url("/background.jpg");

    background-size:cover;

    background-position:center;

    animation:kenburns 30s ease-in-out infinite alternate;

    transform-origin:center;

    z-index:-2;

}

.overlay{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:20px;

    backdrop-filter:blur(.5px);

}

.content{

    animation:fadeUp 1.2s ease;

}

.logo{

    width:520px;

    max-width:85vw;

    user-select:none;

}

.subtitle{

    margin-top:28px;

    margin-bottom:50px;

    color:#ffffff;

    font-size:1.45rem;

    font-weight:300;

    letter-spacing:7px;

    text-transform:uppercase;

    text-shadow:0 4px 15px rgba(0,0,0,.45);

}

.buttons{

    display:flex;

    justify-content:center;

    gap:24px;

    flex-wrap:wrap;

}

.buttons a{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    min-width:240px;

    padding:18px 34px;

    border-radius:60px;

    text-decoration:none;

    color:#fff;

    font-size:1rem;

    letter-spacing:2px;

    border:1px solid rgba(255,255,255,.28);

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    transition:.35s;

    box-shadow:0 10px 30px rgba(0,0,0,.20);

}

.buttons a:hover{

    background:rgba(255,255,255,.95);

    color:#111;

    transform:translateY(-5px);

}

.buttons svg{

    flex-shrink:0;

}

@keyframes kenburns{

0%{

transform:scale(1);

}

100%{

transform:scale(1.12) translate(-2%,-1%);

}

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@media(max-width:900px){

.logo{

width:340px;

}

.subtitle{

font-size:1rem;

letter-spacing:4px;

margin-top:24px;

margin-bottom:35px;

}

.buttons{

flex-direction:column;

align-items:center;

}

.buttons a{

width:260px;

}

}

@media(max-width:500px){

.logo{

width:260px;

}

.subtitle{

font-size:.9rem;

letter-spacing:3px;

padding:0 20px;

}

.buttons a{

width:100%;

max-width:280px;

}

}
