html {
    --tc-link: hsl(213deg 100% 80%);
    --color-background: #111111;
    --color-surface: #1E1E1E;
    --color-on-container: #E0E0E0;
    --color-on-container-secondary: #A0A0A0;
    --color-container-line: #3E3E3E;
    --color-primary: var(--tc-link);
    --color-sage: #8fa990;
    --color-teal: #589294;
}

/*
    ELEMENTS
*/
body {
    font-family: 'Manrope', 'Noto Sans', sans-serif;
    background-color: var(--color-background);
    min-height: 100vh;
}
.container {
    display: flex;
    justify-content: center;
}
main {
    background-color: var(--color-surface);
    width: 100%;
    min-height: 100vh;
    max-width: 28rem;
}

*, ::after, ::before {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
}

h1 {
    color: #fff;
    padding: 1rem 1rem 0.5rem;
    letter-spacing: -0.015em;
    line-height: 1.25;
    font-weight: 700;
    font-size: 1.125rem;
    text-align: center;
    margin: 0;
}
.logo {
    margin-left: 0.5rem;
    font-size: 0.8em;
    font-weight: 300;
}
h2 {
    color: #fff;
    padding: 1.25rem 1rem 0.75rem;
    line-height: 1.25;
    font-weight: 700;
    font-size: 28px;
    text-align: center;
    margin: 0;
}
.h2-left {
    letter-spacing: -0.015em;
    font-size: 22px;
    text-align: left;
}
h1, h2, h3, p {
    margin: 0;
}
.intro {
    color: #fff;
    line-height: 1.5;
    font-weight: 400;
    font-size: 1rem;
    text-align: center;
    padding: 0.25rem 1rem 0.75rem;
}

a {
    color: inherit;
    text-decoration: inherit;
}
button {
    background-image: none;
    border-width: 0;
}
.btn {
    flex: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    letter-spacing: 0.015em;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.5rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    background-color: rgb(255 111 0);
    border-radius: 0.5rem;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    max-width: 480px;
    min-width: 84px;
    height: 3rem;
    display: flex;
}
.btn.disabled, .btn-secondary {
    background-color: #4b3320;
}
footer {
    color: rgb(147 173 200);
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1rem;
    text-align: center;
    padding-bottom: 1.25rem;
}
footer a {
    text-decoration: underline;
}
.text-error {
    color: rgb(248 113 113) !important;
}
.text-warning {
    color: rgb(253 224 71) !important;
}
.matrix-connect {
    letter-spacing: -0.015em;
    line-height: 1.25;
    font-weight: 700;
    font-size: 1.125rem;
    text-align: left;
    padding: 1rem 1rem 0.5rem;
    color: white;
}
.hidden {
    display: none;
}
.white-text {
    color: #fff;
}
.teal-text {
    color: var(--color-teal);
}
.sage-text {
    color: var(--color-sage);
}

/*
    SECTIONS
*/

/* guidelines */
section#guidelines article {
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-radius: 0.5rem;
}
.guideline {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 2 2 0;
}
.guideline-head {
    color: #fff;
    line-height: 1.25;
    font-weight: 700;
    font-size: 1rem;
}
.guideline-body {
    color: #93adc8;
    line-height: 1.5;
    font-weight: 400;
    font-size: 0.875rem;
}
.agreement {
    flex-shrink: 0;
}
input[type=checkbox] {
    color: rgb(255 111 0);
    background-color: rgb(47 35 26);
    border-color: rgb(107 72 46);
    border-radius: 0.25rem;
    cursor: pointer;
    width: 1.5rem;
    height: 1.5rem;
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    print-color-adjust: exact;
    display: inline-block;
    vertical-align: middle;
    background-origin: border-box;
    -webkit-user-select: none;
    user-select: none;
    flex-shrink: 0;
    border-width: 1px;
    border-style: solid;
}
input[type=checkbox]:checked {
    border-color: transparent;
    background-color: currentColor;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
section#guidelines article img {
    width: 6rem;
    flex: 1 1 0;
    aspect-ratio: 16 / 9;
    object-fit: contain;
}

/* join-cta */
section#join-cta {
    display: flex;
    flex-direction: column;
    padding: 0.75rem 1rem;
    gap: 0.75rem;
}
section#join-cta a {
    flex: auto;
}

/* faq-entries */
section#faq-entries {
    display: flex;
    flex-direction: column;
    padding: 1rem;
}
section#faq-entries details {
    padding: 0.5rem 0;
    border-style: solid;
    border-top-color: rgb(107 72 46);
    border-top-width: 1px;
    border-bottom-width: 0;
    border-left-width: 0;
    border-right-width: 0;
}
section#faq-entries details summary {
    display:flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.5rem 0;
    cursor: pointer;
}
section#faq-entries details summary h3 {
    color: #fff;
    line-height: 1.5;
    font-weight: 500;
    font-size: 0.875rem;
}
section#faq-entries details summary .caret {
    color: #fff;
}
section#faq-entries details[open] summary .caret {
    rotate: 180deg;
}
section#faq-entries details p {
    color: #93adc8;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding-bottom: 0.5rem
}
section#faq-entries details a {
    text-decoration: underline;
}

/* to-top */
section#to-top {
    display: flex;
    padding: 0.75rem 1rem;
}
section#to-top button {
    min-width: 84px;
    max-width: 480px;
    cursor: pointer;
}

/* apps */
section#apps {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0.75rem;
    padding-bottom: 1.5rem;
}
section#apps article {
    padding: 0.5rem 1rem;
    display: flex;
    align-items: start;
    gap: 1rem;
}
section#apps article .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
section#apps article .content p {
    color: rgb(147 173 200);
    line-height: 1.5;
    font-weight: 400;
    font-size: 0.875rem;
}
section#apps article .content .sub {
    font-style: italic;
    font-size: 0.75rem;
}
section#apps article .content .content-head {
    color: #fff;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.5rem;
}
section#apps article .content .app-notes {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
section#apps article .content .download {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0;
    flex-wrap: wrap;
}
section#apps article .content .download a img {
    padding-right: 0.5rem;
    width: 9rem;
    display: inline;
    margin-bottom: 0.5rem;
    max-width: 100%;
    height: auto;
}

/* links */
section#links a {
    color: #fff;
    line-height: 1.5;
    font-weight: 400;
    font-size: 1rem;
    padding: 0.25rem 1rem 0.75rem;
    text-decoration: underline;
}

/* banner */
section#banner {
    display: flex;
    justify-content: center;
}

/* connected */
section#connected {
    color: #fff;
    text-align: center;
    display: flex;
    justify-content: center;
    padding: 0 1rem 3rem;
}
section#connected #already-joined-section {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

/* benefits */
section#benefits {
    color: #fff;
    padding: 0.25rem 1rem 1rem 1rem;
}
section#benefits > p {
    line-height: 1.5;
    font-weight: 400;
    font-size: 1rem;
    padding-bottom: 0.75rem;
}
section#benefits article {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    min-height: 3.5rem;
}
section#benefits article .icon {
    width: 2.5rem;
    height: 2.5rem;
    background-color: #4b3320;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* create-account */
section#create-account {
    display: flex;
    gap: 1rem;
    flex-direction: column;
    padding: 0.75rem 1rem;
}
section#create-account .btn {
    flex: auto;
}
section#create-account .btn.disabled {
    cursor: wait;
}
section#create-account #error-message {
    padding: 0 1rem 0.75rem 1rem;
    text-align: center;
}

/* loading-overlay */
section#loading-overlay {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    color: #fff;
    background-color: rgb(0 0 0 / 0.75);
    inset: 0;
}
section#loading-overlay .loader {
    animation: spin 1s linear infinite;
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 1rem;
    margin-left: auto;
    margin-right: auto;
}
@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}
section#loading-overlay .modal {
    background-color: #111a22;
    padding: 2rem;
    max-width: 24rem;
    border-radius: 1rem;
}
section#loading-overlay .modal .modal-head {
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.75rem;
    margin-bottom: 0.5rem;
}
section#loading-overlay .modal .modal-body {
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5rem;
}

/*
    MEDIA QUERIES
*/

@media (min-width: 768px) {
    main {
        box-shadow: 0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgb(0 0 0 / 0.25);
        border-radius: 1rem;
        min-height: 700px;
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
}

/*
    ICONS
*/

.icon {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 0.5rem;
    width: 3.5rem;
    height: 3.5rem;
    aspect-ratio: 1 / 1;
}

.icon-fluffychat {
    background-image: url("icon-fluffychat.png");
}
.icon-cinny {
    background-image: url("icon-cinny.png");
}