@font-face {
    font-family: 'Roboto-bold';
    src: url(./assets/fonts/Roboto-Bold.ttf);
}

@font-face {
    font-family: 'Roboto-black';
    src: url(./assets/fonts/Roboto-Black.ttf);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}

:root {
    font-size: 62.5%;

    --card-color-primary: #f7dd43;
    --card-title-border-color: #746615;
    --card-bg-color: #1D1C19;
    --bg: url(./assets/svgs/bg.svg);
}

body.blue{
    --card-color-primary: #338AF3;
    --card-title-border-color: #338AF3;
    --card-bg-color: #202024;
    --bg: url(./assets/svgs/bg-blue.svg);
}

body.green{
    --card-color-primary: #047C3F;
    --card-title-border-color: #047C3F;
    --card-bg-color: #1A1F1B;
    --bg: url(./assets/svgs/bg-green.svg);
}

body.red{
    --card-color-primary: #7c0404;
    --card-title-border-color: #7c0404;
    --card-bg-color: #1f1a1a;
    --bg: url(./assets/svgs/bg-red.svg);
}

body.purple{
    --card-color-primary: #64047c;
    --card-title-border-color: #64047c;
    --card-bg-color: #1e1a1f;
    --bg: url(./assets/svgs/bg-purple.svg);
}

body.pink{
    --card-color-primary: #7c045e;
    --card-title-border-color: #7c045e;
    --card-bg-color: #1f1a1e;
    --bg: url(./assets/svgs/bg-pink.svg);
}

body {
    background-color: #121214;
    background-image: var(--bg);
    background-position-x: center;
    background-position-y: 55.6%;
    color: #E1E1E6;
    letter-spacing: 0;
    font-family: 'Roboto-black', sans-serif;
    font-size: 1.6rem;
}

div#app header h1,
div#app main#cards div.card h2 {
    font-family: 'Roboto-bold', sans-serif;
}

div#app {
    width: fit-content;
    margin:  auto;
    padding-top: 10.4rem;
    display: flex;
    flex-direction: column;
}

div#app header {
    margin: 0 auto;
    max-width: 27rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 6.3rem;
}

div#app header img {
    max-width: 10rem;
    height: 1.8rem;
    margin-bottom: 0.8rem;
}

div#app header h1 {
    font-size: 3rem;
    font-weight: bold;
    line-height: 125%;
    text-transform: uppercase;
}

div#app main#cards {
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
}

div#app main#cards div.card {
    background-color: #1D1C19;
    border-radius: 0.6rem;
    padding: 3.2rem 2.3rem;
    border-bottom: 1px solid var(--card-color-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 31.6rem;
}

div#app main#cards div.card h2 {
    max-width: 17.7rem;
    font-size: 2.4rem;
    line-height: 125%;
    color: #f7dd43;
    border-radius: 0.6rem;
    border: 1px solid var(--card-title-border-color);
    padding: 0.8rem 1.6rem;
    display: flex;
    align-items: center;
    gap: 1.6rem;
    margin-bottom: 5.3rem;
}

div#app main#cards div.card h2 span {
    font-size: 1.4rem;
    line-height: 125%;
    color: #E1E1E6;
    text-transform: uppercase;
}

div#app main#cards div.card ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

div#app main#cards div.card ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 2.4rem;
}

div#app main#cards div.card ul li:not(:last-child) {
    border-bottom: 1px solid #323238;
}

div#app main#cards div.card ul li img {
    max-width: 5rem;
}

div#app main#cards div.card ul li strong {
    font-size: 3.6rem;
    line-height: 125%;
}

div#app main#cards div.card h2:hover,
div#app main#cards div.card ul li img:hover,
div#app main#cards div.card ul li strong:hover {
    transform: scale(1.1);
}

div#app main#cards div.card,
div#app main#cards div.card h2,
div#app main#cards div.card ul li img,
div#app main#cards div.card ul li strong {
    transition: transform .3s;
}

div#app main#cards div.card{
    animation: appear .8s forwards;
    opacity: 0;
}

@keyframes appear {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (min-width: 700px) {

    div#app main#cards {
        max-width: 66.4rem;
        flex-direction: row;
        flex-wrap: wrap;
    }
}