@import url(https://fonts.bunny.net/css?family=chakra-petch:400,700|outfit:400);

/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing : border-box;
}

/* Prevent font size inflation */
html {
    -moz-text-size-adjust    : none;
    -webkit-text-size-adjust : none;
    text-size-adjust         : none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
    margin-block-end : 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
    list-style : none;
}

/* Set core body defaults */
body {
    min-height  : 100vh;
    line-height : 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
    line-height : 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
    text-wrap : balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
    text-decoration-skip-ink : auto;
    color                    : currentColor;
}

/* Make images easier to work with */
img,
picture {
    max-width : 100%;
    display   : block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
    font-family : inherit;
    font-size   : inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
    min-height : 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
    scroll-margin-block : 5ex;
}

body {
    background      : radial-gradient(ellipse at 30% 20%, #2a1040 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, #0f1a2e 0%, transparent 50%),
    #0e0a1e;
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    align-items     : center;
    width           : 100%;
    min-height      : 100%;
    color           : white;
    gap             : 1rem;
    padding-top     : 10rem;
    padding-bottom  : 6rem;
}

div.container {
    width     : 840px;
    max-width : 100%;
    margin    : 0 auto;
}

div.logo {
    display         : flex;
    flex-direction  : row;
    justify-content : center;
    gap             : 2rem;
    margin-bottom   : 2rem;
    flex-grow       : 0;
}

div.logo > svg {
    width : 12rem;
}

div.logo > div.title {
    display         : flex;
    flex-direction  : column;
    justify-content : center;
}

div.logo > div.title > h3 {
    font-family    : 'Outfit', sans-serif;
    font-weight    : 400;
    font-size      : 1.25rem;
    color          : rgba(232, 121, 249, 0.7);
    text-transform : uppercase;
    margin         : 0;
}

div.logo > div.title > h2 {
    font-family    : 'Chakra Petch', sans-serif;
    font-weight    : 700;
    font-size      : 4rem;
    color          : #E879F9;
    text-transform : uppercase;
    margin         : 0;
}

div.logo > div.title > h2 > span.title__game {
    color   : white;
    display : block;
}

h1 {
    font-family    : 'Outfit', sans-serif;
    font-size      : 2.2rem;
    font-weight    : 700;
    color          : #ffffff;
    line-height    : 1.2;
    letter-spacing : -0.02em;
}

p {
    font-family : 'Outfit', sans-serif;
    font-size   : 1.4rem;
    font-weight : 400;
    color       : #e0dce8;
    line-height : 1.75;
}

mark, .highlight {
    background  : transparent;
    color       : #da83eb;
    font-weight : 500;
}

.highlight-bg {
    color         : #da83eb;
    font-weight   : 500;
    background    : rgba(218, 131, 235, 0.08);
    padding       : 0.1em 0.35em;
    border-radius : 4px;
}

.emphasis {
    font-style  : normal;
    color       : #ffffff;
    font-weight : 600;
}

hr {
    border     : none;
    height     : 1px;
    background : linear-gradient(90deg, transparent 0%, rgba(218, 131, 235, 0.3) 50%, transparent 100%);
    margin     : 3rem 0;
}

hr.short {
    border        : none;
    height        : 2px;
    width         : 60px;
    background    : #da83eb;
    margin        : 3rem auto;
    border-radius : 1px;
}

.turn {
    font-family    : 'Outfit', sans-serif;
    font-size      : 1.9rem;
    font-weight    : 500;
    color          : #da83eb;
    letter-spacing : -0.01em;
    text-align     : center;
    padding        : 2rem 0;
}

code {
    font-family   : 'DM Mono', monospace;
    font-size     : 0.88em;
    background    : rgba(218, 131, 235, 0.08);
    color         : #da83eb;
    padding       : 0.15em 0.4em;
    border-radius : 4px;
    border        : 1px solid rgba(218, 131, 235, 0.12);
}

a {
    color           : #da83eb;
    text-decoration : none;
    border-bottom   : 1px solid rgba(218, 131, 235, 0.3);
    transition      : border-color 0.2s;
}

a:hover {
    border-bottom-color : #da83eb;
}

.section {
    padding-bottom : 3rem;
}

.signup {
    display    : flex;
    gap        : 0.5rem;
    max-width  : 440px;
    margin-top : 1.5rem;
}

.signup-input {
    flex          : 1;
    font-family   : 'Outfit', sans-serif;
    font-size     : 0.9rem;
    font-weight   : 400;
    padding       : 0.75rem 1rem;
    background    : rgba(255, 255, 255, 0.04);
    border        : 1px solid rgba(255, 255, 255, 0.08);
    border-radius : 8px;
    color         : #e0dce8;
    outline       : none;
    transition    : border-color 0.2s, box-shadow 0.2s;
}

.signup-input:focus {
    border-color : rgba(218, 131, 235, 0.4);
    box-shadow   : 0 0 0 3px rgba(218, 131, 235, 0.08);
}

.signup-input::placeholder {
    color : #5a346d;
}

.signup-button {
    font-family   : 'Outfit', sans-serif;
    font-size     : 0.9rem;
    font-weight   : 600;
    padding       : 0.75rem 1.5rem;
    background    : #da83eb;
    color         : #0a0816;
    border        : none;
    border-radius : 8px;
    cursor        : pointer;
    white-space   : nowrap;
    transition    : background 0.2s;
}

.signup-button:hover {
    background : #ef75fb;
}

.byline {
    font-size   : 0.85rem;
    font-weight : 400;
    color       : #5a346d;
    font-style  : italic;
    padding     : 2rem 0 6rem;
}

.byline a {
    color               : #8a80a0;
    border-bottom-color : rgba(138, 128, 160, 0.3);
}

.byline a:hover {
    color               : #c0b8d4;
    border-bottom-color : #c0b8d4;
}

@media (max-width : 600px) {
    p {
        font-size : 0.95rem;
    }

    .turn {
        font-size : 1.15rem;
    }

    .signup {
        flex-direction : column;
    }

    .signup-button {
        text-align : center;
    }

    .section {
        padding : 0 2rem;
    }
}