/**
 * index.css
 * AnyTake, Inc.
 * Created by Joshua Choi on 06/07/2023
 * Copyright © 2023 AnyTake, Inc. All rights reserved.
 */

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

/* Root */
:root {
    /* Colors */
    --Slate: color(display-p3 0.1098 0.1098 0.1216);
    --Jet: color(display-p3 0.0667 0.0667 0.0667);
    --Blue: color(display-p3 0 0.556863 1 / 1);
    --Black: color(display-p3 0 0 0);
    --Gray: color(display-p3 0.56 0.56 0.58);
    --Green: color(display-p3 0.215686 0.67451 0.368627 / 1);
    --Red: color(display-p3 1 0 0.333333 / 1);
    --Silver: color(display-p3 0.898039 0.898039 0.917647 / 1);
    --White: color(display-p3 1 1 1);
    --Yellow: color(display-p3 1 0.835294 0 / 1);

    /* Font Weights */
    --Thin: 300;
    --Regular: 400;
    --Medium: 500;
    --SemiBold: 600;
    --Bold: 700;
    --ExtraBold: 800;
}

/* Title */
h1 {
    font-family: "Inter", sans-serif;
    font-weight: var(--Bold);
    font-size: clamp(2rem, 3.2vw, 2.75rem);
    color: var(--White);
    margin: 0;
    padding: 0;
}

/* Subtitle */
h2 {
    font-family: "Inter", sans-serif;
    font-weight: var(--Bold);
    font-size: clamp(1.75rem, 2.6vw, 2.25rem);
    color: var(--White);
    margin: 0;
    padding: 0;
}

/* Heading */
h3 {
    font-family: "Inter", sans-serif;
    font-weight: var(--SemiBold);
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    color: var(--White);
    margin: 0;
    padding: 0;
}

/* Body */
p {
    font-family: "Inter", sans-serif;
    font-weight: var(--Regular);
    font-size: clamp(0.85rem, 1.1vw, 1rem);
    color: var(--White);
    margin: 0;
    padding: 0;
}

a {
    font-family: "Inter", sans-serif;
    font-weight: var(--Regular);
    font-size: clamp(0.85rem, 1.1vw, 1rem);
    color: var(--White);
    text-decoration: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

a:hover {
    opacity: 0.5;
    text-decoration: underline;
    filter: alpha(opacity=50);
}

/* Components */
body {
    background-color: var(--Jet);
    margin: 0 0 0 0;
    padding: 60px 0 0 0;
    width: 100%;
    height: 100%;
}

/* Image */
img {
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    align-content: center;
}

/* Rows & Columns */
.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.column {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    vertical-align: middle;
}

/* Button */
button {
    border-radius: 0.75em;
    border-style: none;
    font-family: "Inter", sans-serif;
    font-weight: var(--Bold);
    font-size: 0.9em;
    color: var(--Black);
    background-color: var(--White);
    border-radius: 0.65rem;
    border: 0.5px solid color(display-p3 0.56 0.56 0.58 / 0.3);
    transition: all 0.2s ease-in;
    width: auto;
    padding: 8px;
    cursor: pointer;
}

button:hover {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

/* Cards */
#card-container {
    width: 100%;
    justify-content: center;
    align-items: center;
    padding: 0 10%;
    width: 100%;
    box-sizing: border-box;
    gap: 16px;
}

#card {
    background: var(--Slate);
    border-radius: 16px;
    padding: 16px;
    width: 100%;
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.05),
        0 1px 8px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}

#card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(180, 180, 255, 0.5) 50%,
        rgba(255, 255, 255, 0) 100%
    );
}

#card::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(180, 180, 255, 0.5) 50%,
        rgba(255, 255, 255, 0) 100%
    );
}

/* Light */
.lighter {
    background: linear-gradient(
        90deg,
        color(display-p3 0.82 0.16 0.12) 0%,
        color(display-p3 0.94 0.25 0.1) 10%,
        color(display-p3 1 0.42 0.12) 20%,
        color(display-p3 1 0.6 0.12) 30%,
        color(display-p3 1 0.82 0.1) 40%,
        color(display-p3 1 0.94 0.27) 50%,
        color(display-p3 1 0.97 0.93) 60%,
        color(display-p3 0.75 0.93 1) 70%,
        color(display-p3 0.44 0.83 1) 80%,
        color(display-p3 0.16 0.48 1) 90%,
        color(display-p3 0.04 0.18 1) 100%
    );
    background-size: 300% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: light-sweep 2.2s linear infinite;
}

@keyframes light-sweep {
    0% {
        background-position: 0% 50%;
        filter: brightness(1) saturate(1);
    }

    60% {
        background-position: 100% 50%;
        filter: brightness(1.1) saturate(1.2);
    }

    68% {
        background-position: 100% 50%;
        filter: brightness(2) saturate(0);
    }

    72% {
        background-position: 100% 50%;
        filter: brightness(1) saturate(1);
    }

    78% {
        background-position: 100% 50%;
        filter: brightness(2) saturate(0);
    }

    82% {
        background-position: 100% 50%;
        filter: brightness(1) saturate(1);
    }

    100% {
        background-position: 0% 50%;
        filter: brightness(1) saturate(1);
    }
}

/* Desktop Sizing */
@media screen and (min-width: 800px) {
    .column {
        flex: 1;
    }
    .collapsible {
        padding: 16px 25% 16px 25%;
    }
    .collapsible-content {
        margin: 16px 25% 16px 25%;
    }
}