@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@300..700&family=Lato:wght@300&display=swap');

:root {
    --bg-color: #f1ecf1;
    --fg-color: black;

    --accent-0: #a90c67;
    --accent-1: #b42176;
    --accent-2: #c03887;
    --accent-3: #d866a8;

    --green: #1a8b4d;

    --body-background: radial-gradient(farthest-corner at top, transparent, #99909c 150%);

	--body-font: 'Inconsolata', monospace;
	--header-font: 'Lato', sans-serif;
}

::selection {
    background-color: color-mix(in srgb, var(--accent-0), transparent);
}

:focus-visible {
    outline: 2px solid var(--accent-1);
    outline-offset: 2px;
    border-radius: 3px;
}

body {
    margin: 0;
    min-height: 100dvh;

    background: var(--body-background), var(--bg-color);
    color: var(--fg-color);
    font: 300 16px var(--body-font);
    font-weight: 500;

    text-align: center;
}

.v-center-flex {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--header-font);
    text-transform: uppercase;
}

a {
    --link-color: var(--accent-1);

    text-decoration: none;
    text-transform: uppercase;
    
    color: var(--link-color);
    font-weight: 400;
}

a:visited {
    --link-color: var(--accent-0);
}

a:hover {
    --link-color: var(--accent-3);
}

input {
    accent-color: var(--accent-2);
}

.btn {
    border-radius: 3px;
    display: block;
    padding: 1em 2em;
}

a.btn {
    color: var(--bg-color);
    background-color: var(--link-color);

}

a.btn:visited {
    --link-color: unset;
}


/* main layout */
header {
    padding: 1em 2em;
    text-wrap: balance;
}

main {
    width: 60dvw;
}

.list {
    gap: 1em;
    align-items: flex-start;

    text-align: left;
}

.list p {
    text-align: center;
    align-self: center;
}

.list label {
    display: flex;
    flex-flow: row nowrap;
    gap: 1em;
    align-items: flex-start;
}

label > input:checked + span, .whisper {
    font-style: italic;
    opacity: 0.7;
}

label > input:checked + span {
    text-decoration: line-through;
}

/* new nav */
nav#top-nav {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    padding: 1em;
    box-sizing: border-box;

    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

ul {
    list-style-type: square;
}

.owned::before {
    content: "OWNED: ";
    color: var(--green);
}


/* mobile */

@media (max-width: 900px) {
    body {
        overflow-y: auto;
    }

    main {
        width: 80dvw;
    }

    .list {
        padding: 2em 0;
        box-sizing: border-box;
    }

    nav#top-nav {
        position: unset;
    }
}

/* animations */
a#enter-btn, nav#top-nav, main, .container {
    animation: 5s ease-in fade-in;
}


@keyframes fade-in {
    0% {
        opacity: 0;
    } 100% {
        opacity: 1;
    }
}