@import url(themes.css);

body {
    margin: 0;

    background-color: var(--bg0);
    color: var(--text);

    display: flex;
    flex-direction: column;
    align-items: center;

    font-family: 'Martian Mono', monospace;

    transition:
        background-color 1s ease-in-out,
        color 1s ease-in-out;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
}

section {
    margin: 1em 0;
}

a {
    color: var(--complementary);

    transition:
        color 1s ease-in-out;
}

p {
    margin: 0.5rem 0;
}

a:hover {
    color: var(--accent);
}

.title {
    font-size: clamp(3rem, 10vw, 10rem);
}

.projects-div {
    display: flex;
    flex-direction: column;
    background-color: var(--bg1);

    width: min(1200px, 70%);

    padding: 0 2em 1em;

    border: 1px solid transparent;

    transition:
        background-color 1s ease-in-out,
        border-color 0.3s ease;
}

.projects-div:hover {
    border-color: var(--muted);
}

.project {
    margin: 0.2em;

    background-color: transparent;
    border: 1px solid transparent;

    transition:
        background-color 1s ease-in-out,
        border-color 0.3s ease,
        height 0.4s;
}

.project:hover {
    background-color: var(--surface);
    border-color: var(--complementary);
}

.templates-div {
    position: relative;

    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(250px, 1fr)
    );
    gap: 2rem;

    background-color: var(--bg1);
    width: min(1200px, 70%);

    padding: 0 2em 1em;

    border: 1px solid transparent;

    transition:
        background-color 1s ease-in-out,
        border-color 0.3s ease;
}

.templates-div h2 {
    grid-column: 1 / -1;
}

.templates-div:hover {
    border-color: var(--muted);
}

.template-preview {
    --preview-height: 150px;

    height: var(--preview-height);
    overflow: hidden;
}

.template-preview img {
    width: 100%;
    display: block;
    transform: translateY(0);
    transition: transform 8s linear;
}

.template:hover .template-preview img {
    transform: translateY(
        calc(-100% + var(--preview-height))
    );
}

.template {
    display: flex;
    flex-direction: column;

    background-color: color-mix(in srgb, var(--surface) 30%, transparent);

    border: 1px solid transparent;

    transition:
        background-color 1s ease-in-out,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.template:hover {
    border-color: var(--complementary);
    background-color: var(--surface);
    transform: translateY(-5px);
}

.template p {
    padding: 0 1rem;
    font-size: 1.2rem;
}

.price {
    display: flex;
    align-items: center;
    gap: 10px;
}

.old-price {
    text-decoration: line-through;
    opacity: 0.5;
    font-size: 0.9em;
}

.sale-price {
    font-weight: bold;
    color: var(--accent-color);
}

.contact-div {
    display: flex;
    gap: 32px;
    margin: 80px;
}

.theme-changer {
    display: flex;
    flex-direction: row;
    align-content: space-evenly;
    gap: 2em;
}

.theme-changer div {
    width: 2em;
    height: 2em;

    border-radius: 100%;


    cursor: pointer;

    border: 2px solid transparent;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease;
}

.theme-changer div:hover {
    transform: scale(1.15);
    border-color: var(--text);
}


/* Theme previews */

.theme-default {
    background: linear-gradient(
        90deg,
        #D6D8D9 50%,
        #0A0B0C 50%
    );
}

.theme-black-denim {
    background: linear-gradient(
        90deg,
        #3A2C23 50%,
        #F4E7D3 50%
    );
}

.theme-graphite {
    background: linear-gradient(
        90deg,
        #F3F7F6 50%,
        #0E1B1A 50%
    );
}

.theme-deep-violet {
    background: linear-gradient(
        90deg,
        #F7F1FF 50%,
        #111015 50%
    );
}

.theme-iron {
    background: linear-gradient(
        90deg,
        #3B2F1B 50%,
        #FFF6CC 50%
    );
}

.theme-sonic {
    background: linear-gradient(
        90deg,
        #102A43 50%,
        #EAF7FF 50%
    );
}