@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Display:wght@900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&family=Lato&display=swap');

.noto-sans-display {
    font-family: "Noto Sans Display", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    font-variation-settings:
    "wdth" 100;
}


:root {
    --primary: #333333;
    --secondary: #555;
    --highlight: #4a4a4a;
    --light-highlight: #bbb;
    --bg: #ffe7c3;
}

@media (prefers-color-scheme: dark) {
    :root {
        --primary: #fff;
        --secondary: #555;
        --bg: #252525;
    }
}

:root[data-theme='1'] {
    --primary: #EB1451;
    --bg: #14EBAE;
}

:root[data-theme='2'] {
    --primary: #9C83FF;
    --bg: #EDFFA4;
}

:root[data-theme='3'] {
    --primary: #E1341E;
    --bg: #1ECBE1;
}

:root[data-theme='4'] {
    --primary: #41404e;
    --bg: #918FA3;
}

html {
    margin: 0;
    padding: 0;
}

body {
    transition: background-color color 0.5s ease;
    background-color: var(--bg);
    color: var(--primary);
    font-family: 'Lato', sans-serif;
    margin: 0;
    padding: 0;
}

a {
    color: var(--secondary);
}

input[type=email],
input[type=password],
input[type=text] {
    border: 1px solid rgba(122, 122, 122, 0.7);
    border-radius: 5px;
    background-color: rgba(122, 122, 122, 0.05);
    margin: 5px;
    padding: 5px;
}

button.invis {
    border: none;
    outline: none;
    background: none;
    font-size: medium;
}

.primary-button {
    padding: 1em 2em;
    background-color: var(--primary);
    border-radius: 5px;
    white-space: nowrap;
    color: var(--bg);
    border: 2px solid var(--primary);
    text-decoration: none;
    transition-duration: 200ms;
    transition-timing-function: ease-out;
    font-weight: bold;
    text-align: center;
}

.primary-button:hover {
    background-color: var(--bg);
    color: var(--primary);
}

.simple-button {
    transition: 300ms all;
    padding: 1em 2em;
    white-space: nowrap;
    color: var(--primary);
    text-decoration: none;
    transition-duration: 200ms;
    transition-timing-function: ease-out;
    text-align: center;
}
.simple-button:hover {
    transform: translateY(-3px);
}

.fancy-text {
    text-shadow: 0 0 5px var(--primary);
}

.grid-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

@media screen and (max-width: 450px) {
    .grid-gallery {
        display: flex;
        width: 100%;
        flex-direction: column;
    }
}