@font-face {
    font-family: KankenGrotesk;
    src: url(./assets/fonts/HankenGrotesk-VariableFont_wght.ttf);
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: KankenGrotesk, sans-serif;
}

:root {
    /* --color-1: blue;
    --color_1: red;
    --color1: orange; */
    --lighting-color: hsl(0, 100%, 67%);
    --lighting-color2: hsl(0, 100%, 95%);

    --Orangey-yellow: hsl(39, 100%, 56%);
    --Orangey-yellow2: hsl(39, 100%, 95%);

    --Green-teal: hsl(166, 100%, 37%);
    --Green-teal2: hsl(166, 100%, 95%);

    --Cobalt-blue: hsl(234, 85%, 45%);
    --Cobalt-blue2: hsl(234, 85%, 95%);

    --Light-slate-blue-background: hsl(252, 100%, 67%);
    --Light-royal-blue-background: hsl(241, 81%, 54%);

    --Violet-blue-circle: hsla(256, 72%, 46%, 1);
    --Persian-blue-circle: hsla(241, 72%, 46%, 0);

    --Pale-blue: hsl(221, 100%, 96%);
    --Light-lavender: hsl(241, 100%, 89%);
    --Dark-gray-blue: hsl(224, 30%, 27%);
}



body {
    width: 100%;
    overflow-x: hidden;
    min-height: 100vh;
}

main {
    display: flex;
    flex-direction: column;
    background: white;
}

.left {
    background: linear-gradient(var(--Light-slate-blue-background), var(--Light-royal-blue-background));
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    text-align: center;
    border-radius: 0 0 2rem 2rem;
    padding: 2rem 1rem;
}

.left h3 {
    color: var(--Pale-blue);
    font-weight: 500;
}

.left .box {
    background: linear-gradient(var(--Violet-blue-circle), var(--Persian-blue-circle));
    padding: 2rem;
    border-radius: 50%;
    height: 100px;
    width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.left .box h6 {
    color: var(--Pale-blue);
    font-size: 2.5rem;
}

.left .box p {
    color: var(--Light-lavender);
    font-size: .75rem;
}

.left .text h2 {
    color: var(--Pale-blue);
}

.left .text p {
    color: var(--Light-lavender);
}


.right {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1rem 1rem 1.5rem;
}

.right h3 {
    color: var(--Dark-gray-blue);
}

.right .list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}


.right .list .item {
    padding: .5rem .75rem;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.right .list .item p:first-of-type {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.right .list .item p:nth-of-type(2) {
    font-weight: 700;
    color: var(--Dark-gray-blue);
}

.right .list .item p:nth-of-type(2) span {
    font-weight: 400;
    color: hsl(292, 4%, 58%);
}

.right .list .item.reaction {
    background-color: var(--lighting-color2);
}

.right .list .item.reaction p:first-of-type {
    color: var(--lighting-color);
}

.right .list .item.memory {
    background-color: var(--Orangey-yellow2);
}

.right .list .item.memory p:first-of-type {
    color: var(--Orangey-yellow);
}

.right .list .item.verbal {
    background-color: var(--Green-teal2);
}

.right .list .item.verbal p:first-of-type {
    color: var(--Green-teal);
}

.right .list .item.visual {
    background-color: var(--Cobalt-blue2);
}

.right .list .item.visual p:first-of-type {
    color: var(--Cobalt-blue);
}

button {
    color: var(--Pale-blue);
    background: var(--Dark-gray-blue);
    border: none;
    border-radius: 4rem;
    padding: 1rem 2rem;
    cursor: pointer;
}

button:hover {
    background: linear-gradient(var(--Light-slate-blue-background), var(--Light-royal-blue-background));
}




@media screen and (min-width: 768px) {
    body {
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--Pale-blue)
    }

    main {
        flex-direction: row;
        justify-content: center;
        border-radius: 2rem;
        background: white;
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    }

    .right {
        flex: 1;
        background: white;
        border-radius: 0 2rem 2rem 0;
    }

    .left {
        flex: 1;
        border-radius: 2rem;
    }
}