@charset "UTF-8";

@import "colors.css";

html {
    /* Hide scrollbar */
    scrollbar-width: none;
}

html, body {
    margin: 0;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 100vh;
}

/* - - - BACKGROUND - - - */

body {
    background-image: url("../assets/camo.png");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* - - - FOOTER - - - */

body .footer {
    margin-top: auto;

    padding: .5rem;
    font-size: .85rem;

    color: var(--color-subtitle);
    background-color: rgb(from var(--color-pixel-secondary) r g b / 50%);
    box-shadow: 0 2px 15px 0 var(--color-footer-shadow);
    text-shadow: rgba(0, 0, 0, 25%) 0 0 0.85rem;
}

/* - - - CONTAINER & CONTENT - - - */

:root {
    /* Width of the actual content (also inside header & footer) of the site; aka "focus-area" */
    --site-width: min(100vw, 1280px);

    /* Note: The site is displayed as mobile if the screen width is 800px or lower */
}

.header *,
.footer * {
    max-width: var(--site-width);
}

.content,
.noscript-warn {
    width: var(--site-width);
}

.container {
    margin: 0 auto;
}

.content {
    margin: 1.5rem auto 4.5rem;
}

/* - - - SECTIONS - - - */

.section {
    --border-padding-margin: 0.75rem;
    --section-opacity: 50%;

    background-color: rgb(from var(--color-pixel-secondary) r g b / var(--section-opacity));
    box-shadow: 0 2px 15px 0 rgb(from var(--color-card-shadow) r g b / var(--section-opacity));

    text-shadow: rgba(0, 0, 0, var(--section-opacity) / 2) 0 0 0.75rem;

    margin:        var(--border-padding-margin);
    padding:       var(--border-padding-margin);
    border-radius: var(--border-padding-margin);
}

.column .section {
    margin: 0;
}

.noscript-warn {
    --border-padding-margin: 0.75rem;

    background-color: rgb(from var(--color-pixel-error) r g b / 25%);

    margin: 0 auto var(--border-padding-margin);
    padding: var(--border-padding-margin) calc(var(--border-padding-margin) * 2);

    border-bottom-left-radius:  var(--border-padding-margin);
    border-bottom-right-radius: var(--border-padding-margin);

    text-align: center;

    width: fit-content;
}

/* - - - COLUMNS & CARDS - - - */

@media screen and (min-width: 800px), print {
    .columns:not(.is-desktop) {
        display: flex;
    }
}

.columns {
    flex-wrap: wrap;
    box-sizing: border-box;
}

.column {
    display: block;
    padding: .75rem;
}

.card {
    --border-radius: 0.75rem;

    background-color: var(--color-card-background);

    box-shadow: 0 2px 15px 0 var(--color-card-shadow);
    transition: box-shadow 0.35s;
}

.card:hover {
    box-shadow: 0 2px 10px 3px var(--color-card-shadow);
    transition: box-shadow 0.15s;
}

.card:first-child {
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

.card:last-child {
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

.card-content {
    padding: 1rem;
    background-color: transparent;
}

@media screen and (min-width: 800px), print {
    .column { flex: none }

    .column.col-1 { width: 100% }
    .column.col-1-2 { width: 50% }
    .column.col-1-3 { width: calc(100% / 3) }
    .column.col-2-3 { width: calc((100% / 3) * 2) }
    .column.col-1-4 { width: 25% }
    .column.col-3-4 { width: 75% }
    .column.col-1-5 { width: 20% }
    .column.col-2-5 { width: 40% }
    .column.col-3-5 { width: 60% }
    .column.col-4-5 { width: 80% }
}

/* - - - TEXT - - - */

body {
    color: var(--color-text);

    line-height: 1.5;

    font-family: Raleway, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: Lato, sans-serif;
    font-weight: 400;
}

:first-child { margin-top:    0; }
:last-child  { margin-bottom: 0; }

/* - - - ICONS - - - */

.icon {
    color: var(--color-icon);
}

.icon.force-square {
    padding: 50%;
}

.large-icon .icon {
    color: var(--color-card-background);

    display: grid;

    line-height: 1;
    font-size: 10rem;
    text-align: center;
}