@font-face {
    font-family: Roboto;
    src: url('./fonts/Roboto-Regular.ttf');
}
html, body{
    height: 100%;
    display: flex;
    flex-direction: column;
}
:root {
    --gradient-x: 50%;
    --gradient-y: 50%;
}

body{
    margin: 0;
    --fs-100: 1rem;
    --fs-150: calc(var(--fs-100)*1.5);
    --fs-200: calc(var(--fs-100)*2);
    --fs-250: calc(var(--fs-100)*2.5);
    --fs-300: calc(var(--fs-100)*3);
    --fs-400: calc(var(--fs-100)*4);
    --fs-600: calc(var(--fs-100)*6);
    --fs-1000: calc(var(--fs-100)*10);
}
main{
    flex: 1 0 auto;
}
footer{
    flex-shrink: 0;
    padding-bottom: 2rem;
    display: flex;
    justify-content: center;
}

h1, h2, h3, p, a, li{
    font-family: Roboto;
}

a{
    text-decoration: none;
    color: rgb(100,100,100);
}
h1{
    font-weight: normal;
    font-size: var(--fs-300);
    text-align: center;
}

.content-center{
    width: 80%;
    max-width: 1080px;
    margin: 4rem auto;
    line-height: 2rem;
}

#hero-logo{
    background-image: radial-gradient(circle at var(--gradient-x) var(--gradient-y), #FF5100, #332DD2);
    min-width: 200px;
    margin: 5rem auto 0;
    width: 40vw;
    aspect-ratio: 1.2;
    mask-image: url("./assets/lumenCave_logo_black.png");
    mask-size: 80%;
    mask-repeat: no-repeat;
    mask-position: center;
}
#imprint{
    margin: 10rem auto;
    max-width: 1000px;
}