@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../font/CormorantGaramond-Regular.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

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

body{
    background:#050505;
    overflow:hidden;
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    font-family:'Cormorant Garamond', serif;
}

body::before{
    content:'';
    position:absolute;
    width:70vw;
    height:70vw;
    border-radius:50%;
    background:
        radial-gradient(circle,
        rgba(255,255,255,.05),
        transparent 70%);
    filter:blur(100px);
}

body::after{
    content:'';
    position:absolute;
    inset:0;
    background:
      repeating-linear-gradient(
        90deg,
        transparent,
        transparent 2px,
        rgba(255,255,255,.015) 2px,
        rgba(255,255,255,.015) 3px
      );
    pointer-events:none;
}

h1{
    color:white;
    font-weight:300;
    font-size:clamp(5rem,14vw,12rem);
    letter-spacing:.15em;
    text-transform:uppercase;
    position:relative;
    z-index:2;
    animation: drift 10s ease-in-out infinite;
}

h1::before{
    content:"LE BROER";
    position:absolute;
    inset:0;
    color:white;
    opacity:.08;
    transform:translate(12px,-8px);
    filter:blur(10px);
}

@keyframes drift{
    0%,100%{
        transform:translateY(0px);
    }
    50%{
        transform:translateY(-10px);
    }
}