* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: never;
}
html {
    font-family: 'Roboto Serif';
}
body {
    padding:0;
    margin:0;
}
main {
    display: flex;
    flex-direction: row;
    line-height:175%;
}
.wrap-container {
    width:100%;
    flex: 1;
    display: flex;
    justify-content:center;
}
.wrap {
    width:90%;
    max-width:42em;
}
h1 {
    font-size:3em;
}
h2 {
    font-size:2em;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Syne';
    font-weight:500;
    color:#000;
    margin: 2em 0 1em 0;
    line-height:100%;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color:inherit;
    text-decoration-style: dotted;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.15em;
    text-decoration-color: #ccc;
}
a {
    color:inherit;
    text-decoration-style: dotted;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.15em;
    text-decoration-color: #ccc;
}
a:hover, a.active {
    text-decoration-style:solid;
    text-decoration-thickness: 1px;
}
a:hover {
    text-decoration-color:#000;
}
a.active {
    color:#4B3FF7;
    text-decoration-color:#4B3FF7;
}


/**
 * Landing
 **/

.landing body {
    display:flex;
    justify-content:center;
    align-items:center;
    background-color:#DFDDFF;
    padding:2em;
    display:flex;
    flex-direction:column;
    background: radial-gradient(circle at top right, rgba(183, 0, 255, 0.2) 0%, rgba(183, 0, 255, 0.2) 30%, transparent 50%),
            radial-gradient(circle at bottom left, rgba(34, 0, 255, 0.2) 0%, rgba(34, 0, 255, 0.2) 30%, transparent 50%);
}
.landing main {
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    box-sizing:border-box;
    padding:2em;
    min-height:100%;
    border-radius:2em;
    background-color:rgba(255,255,255,0.25);
    display:flex;
    justify-content:center;
    align-items:center;
    border:1px solid #FFF;
    box-shadow:inset 0 0 100px 30px rgba(255,255,255,0.5),
                0 0 30px 0 rgba(0,0,0,0.1);
}
.landing .wrap {
    padding:5em 0;
    width:100%;
    max-width:40em;
    text-align:center;
}
.landing h1 {
    margin:0.25em 0 0 0;
    font-size:7em;
    text-align:center;
    line-height:115%;
}
.actions {
    margin-top:1em;
    gap: 1em;
    display:flex;
    justify-content:center;
}
.landing .button {
    margin-top:1em;
}
.landing p {
    font-size:1.2em;
}
.button {
    background-color:#000;
    color:#FFF;
    text-decoration:none;
    border-radius:2em;
    padding:1em 2.5em;
}
.button.primary {
    color:#FFF;
    background-color:#4B3FF7;
}
.button.primary:hover {
    background-color:#4036c8;
}
.button.secondary {
    color:#474198;
    border:1px solid rgba(81, 55, 255, 0.25);
    background-color:transparent;
}
.button.secondary:hover {
    background-color:rgba(81, 55, 255, 0.05);
    border:1px solid rgba(81, 55, 255, 0.5);
}
.landing .byline {
    margin-top:3em;
    margin-bottom:-2em;
    color:#474198;
}
.landing .byline {
    font-style:italic;
    font-size:0.8em;
}


@media (max-width: 768px) {
    .landing h1 {
        font-size:3.5em;
        margin:0.5em 0;
    }
    .landing p {
        font-size:1em;
    }
    .actions {
        flex-direction:column;
        gap: 0;
        align-items: center;
    }
}