@import "../fonts/markazi.css";
@import "../fonts/inter.css";

/** Variables **/

:root {
    --container-max: 1200px;
    --text-colour: #32081c;
    --link-colour: #970c4e;
    --visited-link-colour: #702c4c;
    --background: #f9eed8;
}

/** RESET STUFF **/

html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 1.3em;
}

h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: 600;
    margin: 15px 0 15px;
}

ul {
    margin: 15px 0 30px;
}

li {
    margin-left: 30px;
}

body {
    font-size: 16px;
    line-height: 1.5em;
}

p {
    margin: 1em 0 1.5em;
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

td,
th {
    padding: 0
}

button,
input,
select {
    margin: 0
}

img,
video {
    max-width: 100%;
    height: auto;
}

iframe {
    border: 0
}

/* Grid */

.container {
    width: min(100% - 3rem, var(--container-max, 60ch));
    margin-inline: auto;
}

.feature {
    width: max(min(50vw, 800px), 300px);
    margin-inline: auto;
    font-size: 22px;

    & h3 {
        font-size: 24px;
    }
}

.grid {
    --min: 10ch;
    --gap: 1rem;

    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
}

.grid>* {
    flex: 1 1 var(--min);
}


/* General styles */

body {
    background: var(--background);
    color: var(--text-colour);
}

a:link,
a:active,
a {
    color: var(--link-colour);
}

a:visited {
    color: var(--visited-link-colour);
}

header {
    margin: 15px 0 30px;
}

h1 {
    font-family: "Markazi";
    font-weight: 700;
    font-size: 88px;
    line-height: 90px;
    margin: 0;
    /* color: #f7ba38; */
    text-align: center;


    & span.first {
        text-decoration: underline;
        text-decoration-thickness: 6px;
        text-decoration-color: #f7ba38;
    }

    & span.second {
        text-transform: uppercase;
        display: block;
        font-size: 24px;
        line-height: 24px;
        text-decoration-thickness: 0;
        letter-spacing: 0.3em;
        text-indent: 0.3em;

    }
}

.centred {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;

    &>* {
        flex-direction: column;
    }
}

.tag {
    color: #f7ba38;
    font-weight: 700;
}

.gallery {

    & img {
        border: 1px solid #666;
        border-style: dashed;
        margin-right: 15px;
        vertical-align: top;
        margin-bottom: 5px;

        &:last-child {
            margin-right: 0;
        }
    }
}

@media (max-width: 768px) {
    .feature {
        font-size: 18px;
    }

    h1 {
        line-height: 60px;

        & span.first {
            font-size: 60px;

        }

        & span.second {
            font-size: 18px;
        }
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: #32081c;
        --link-colour: #f7ba38;
        --visited-link-colour: #bc8f30;
        --text-colour: #f9eed8;
    }

    .gallery img {
        background-color: #fff;
    }
}