@import url("https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css");
@import url("/utils.css");
@import url("/reset.css");
@import url("/fonts.css");

:root {
    /* Main Colors */
    --lifn-clr-primary-200: hsl(0, 83%, 70%);
    --lifn-clr-primary-400: hsl(0, 83%, 55%);
    --lifn-clr-primary-600: hsl(0, 83%, 40%);

    --lifn-clr-secondary-200: hsl(180, 85%, 51%);
    --lifn-clr-secondary-400: hsl(180, 85%, 55%);
    --lifn-clr-secondary-600: hsl(180, 85%, 40%);
    --lifn-clr-secondary-800: hsl(180, 85%, 25%);

    --lifn-clr-danger-200: hsl(6, 98%, 70%);
    --lifn-clr-danger-400: hsl(6, 98%, 55%);
    --lifn-clr-danger-600: hsl(6, 98%, 40%);

    --lifn-clr-success-200: hsl(139, 47%, 70%);
    --lifn-clr-success-400: hsl(139, 47%, 55%);
    --lifn-clr-success-600: hsl(139, 47%, 40%);
    /* Font Colors */
    --lifn-clr-text-100: hsl(250, 0%, 100%);
    --lifn-clr-text-200: hsl(250, 0%, 095%);
    --lifn-clr-text-300: hsl(250, 0%, 090%);
    --lifn-clr-text-400: hsl(250, 0%, 080%);
    --lifn-clr-text-600: hsl(250, 0%, 060%);
    --lifn-clr-text-800: hsl(250, 0%, 040%);
    /* Dark Colors */
    --lifn-hsl-dark-100: 250, 0%, 45%;
    --lifn-hsl-dark-200: 250, 0%, 40%;
    --lifn-hsl-dark-300: 250, 0%, 35%;
    --lifn-hsl-dark-400: 250, 0%, 30%;
    --lifn-hsl-dark-500: 250, 0%, 25%;
    --lifn-hsl-dark-600: 250, 0%, 20%;
    --lifn-hsl-dark-700: 250, 0%, 15%;
    --lifn-hsl-dark-750: 250, 0%, 12%;
    --lifn-hsl-dark-800: 250, 0%, 10%;
    --lifn-hsl-dark-900: 250, 0%, 05%;

    --lifn-clr-dark-100: hsl(var(--lifn-hsl-dark-100));
    --lifn-clr-dark-200: hsl(var(--lifn-hsl-dark-200));
    --lifn-clr-dark-300: hsl(var(--lifn-hsl-dark-300));
    --lifn-clr-dark-400: hsl(var(--lifn-hsl-dark-400));
    --lifn-clr-dark-500: hsl(var(--lifn-hsl-dark-500));
    --lifn-clr-dark-600: hsl(var(--lifn-hsl-dark-600));
    --lifn-clr-dark-700: hsl(var(--lifn-hsl-dark-700));
    --lifn-clr-dark-750: hsl(var(--lifn-hsl-dark-750));
    --lifn-clr-dark-800: hsl(var(--lifn-hsl-dark-800));
    --lifn-clr-dark-900: hsl(var(--lifn-hsl-dark-900));
    /* Background Colors */
    --lifn-clr-hover-400: hsl(250, 0%, 20%);
    --lifn-clr-body-400:  hsl(250, 0%, 10%);
    --lifn-clr-body-600:  hsl(250, 0%, 05%);

    --lifn-clr-input-400: hsl(250, 0%, 12%);
    --lifn-clr-input-600: hsl(250, 0%, 08%);

    --lifn-clr-button-200: hsl(250, 0%, 18%);
    --lifn-clr-button-400: hsl(250, 0%, 15%);
    --lifn-clr-button-600: hsl(250, 0%, 12%);

    --lifn-clr-drop-400: hsl(250, 0%, 12%);
    --lifn-clr-drop-800: hsl(250, 0%, 20%);
    
    --lifn-clr-modal-200: hsl(250, 0%, 00%);
    --lifn-clr-modal-400: hsl(250, 0%, 00%);
    --lifn-clr-modal-600: hsl(250, 0%, 16%);

    /* Font Family */
    --lifn-ff-body:    "Open Sans", sans-serif;
    --lifn-ff-heading: "Jua", sans-serif;
    --lifn-ff-mono:    "Roboto Mono";
    /* Font Sizes */
    --lifn-fs-100: 1.0rem;
    --lifn-fs-200: 1.2rem;
    --lifn-fs-300: 1.4rem;
    --lifn-fs-400: 1.6rem;
    --lifn-fs-500: 1.8rem;
    --lifn-fs-600: 2.0rem;
    --lifn-fs-700: 2.2rem;
    --lifn-fs-800: 2.5rem;
    --lifn-fs-900: 3.0rem;
}

html {
    background-color: var(--lifn-clr-body-400);
    background-image: linear-gradient(90deg, transparent 99%, var(--lifn-clr-dark-600) 100%), linear-gradient( transparent 99%, var(--lifn-clr-dark-600) 100%);
    background-size: 10rem 100vh, 100vw 10rem;
    height: 100%;
    font-size: 62.5%;
}
*, ::before, ::after {
    box-sizing: border-box;
}
body {
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    font-size: 1.6rem;
    font-family: var(--lifn-ff-body);
    color: var(--lifn-clr-text-400);
    overflow-x: hidden;
}

.card {
    margin: 1rem;
    padding: 2rem;
}
.card.no-mg {margin: 0}
.card.no-mgb {margin-block: 0}
.card.no-mgi {margin-inline: 0}

.card.fancy {
    transition: .3s ease;
}
.card.fancy:is(:hover, :focus-visible) {
    transform: translateY(-5px);
}
.card.fancy.link:is(:hover, :focus-visible) {
    background: rgba(0, 225, 255, 0.1);
}

.card > :first-child {
    margin-top: 0;
}
.card  > :last-child {
    margin-bottom: 0;
}