// Digital Ocean reset
html {
  box-sizing: border-box;
  font-size: 16px;
}

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

body, h4, h5, h6, p, ol, ul {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

ol, ul {
  list-style: none;
}

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

/* latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrE.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/sourcecodepro/v21/HI_diYsKILxRpg3hIP6sJ7fM7PqPMcMnZFqUwX28DMyQtMlrTA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Noto Sans Mono';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/notosansmono/v20/BngrUXNETWXI6LwhGYvaxZikqZqK6fBq6kPvUce2oAZcdthSBUsYck4-_FNJ093dVQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

// stuff from UX laws
html {
    color:var(--base-font-color);
    font-size:clamp(var(--min-font-size),calc(50% + 1vw),var(--max-font-size));
    font-family:var(--base-font-family);
    line-height:var(--base-line-height);
    -webkit-text-size-adjust:100%;
    background:var(--background-0);
    box-sizing:border-box
}

// @charset "UTF-8";
:root {
    --breakpoint-medium: 35em;
    --breakpoint-large: 56em;

    --small-font-size: 0.75em;
    --base-font-size: 1em;
    --smedium-font-size: 1.333em;
    --medium-font-size: 1.777em;
    --large-font-size: 2.369em;
    --xlarge-font-size: 3.157em;
    --base-font-family: 'Raleway', Arial, Sans-Serif;
    --secondary-font-family: 'Noto Sans Mono', monospace;
    --base-font-color: var(--color-off-white);
    --secondary-font-color: var(--color-mid-grey);

    --base-line-height: 1.4;
    --header-line-height: 1.2;

    --base-border-color: var(--secondary-font-color);
    --base-border: 2px solid var(--base-border-color);
    --hover-border: 2px solid var(--base-font-color);
    --focus-border: 2px solid var(--base-font-color);
    --base-border-radius: .2rem;
    --base-focus: 2px solid var(--base-accent-color);
    --base-outline-offset: 0.25em;

    --min-font-size: var(--base-font-size);
    --max-font-size: var(--large-font-size);

    --color-dark-blue: #101014;
    --color-mid-blue: #16171d;
    --color-light-blue: #1f2128;
    --color-mid-grey: #9BA0B3;
    --color-off-white: #F4F1D0;
    --color-accent-blue: #5E9ED6;

    --color-blue-gray: #506485;

    --color-blue: #475977;
    --color-green: #476d4a;

    --color-accepted: var(--color-blue);
    --color-confirmed: var(--color-green);

    --base-accent-color: var(--color-accent-blue);
    --fg-color: var(--color-off-white);
    --hover-link-color: var(--color-off-white);

    --background-0: var(--color-dark-blue);
    --background-1: var(--color-mid-blue);
    --background-2: var(--color-light-blue);

    --spacing: 1rem;
    --spacing-half: calc(var(--spacing)/2);
    --spacing-double: calc(var(--spacing)*2);

    --utility-bar-header-height: calc(var(--spacing) * 1.5);
}

button, input, optgroup, select, textarea {
    margin:0;
    border:var(--base-border);
    border-radius:var(--base-border-radius);
    background:0 0;
    font-family:inherit;
    font-size:100%;
    color:inherit;
    line-height:var(--base-line-height);
}

input:hover, textarea:hover {
    color:var(--base-font-color);
    border:var(--hover-border)
}

input:focus, textarea:focus {
    border:var(--focus-border);
    outline:0
}

button, input {
    overflow:visible;
}

button, select {
    text-transform: none;
}

button, [type=button], [type=reset], [type=submit] {
    -webkit-appearance:button;
    border-color: transparent;
    cursor:pointer;

    font-family: var(--secondary-font-family);
    font-size: var(--small-font-size);
    font-weight: bold;
    text-transform: uppercase;

    &:hover {
        background: var(--background-2);
        border-color: transparent;
    }
}

h1, h2, h3, h4, h5, h6 {
    margin-top:0;
    line-height:var(--header-line-height);
}

h1 {
    margin-bottom:var(--spacing);
    font-size:var(--large-font-size)
}

h2 {
    margin-bottom:var(--spacing);
    font-size:var(--medium-font-size);
}

h3 {
    margin-bottom:calc(var(--spacing)/2);
    font-size:var(--smedium-font-size)
}

h4 {
    margin-bottom:calc(var(--spacing)/3);
    font-size:var(--base-font-size)
}

p {
    margin:0 0 var(--spacing)
}

// ok actual styles

body {
    padding-top: calc(var(--spacing)/2);
}

main {
    padding: 0 var(--spacing-double) 0 var(--spacing-double);
}

button, [type=submit] {
    padding: var(--spacing-half);
    background: var(--background-1);

}

.landing {
    display: grid;

    grid-template-columns: 1fr 2fr;
    grid-gap: calc(var(--spacing-double) * 2);
    grid-template-areas:
        "login swirl"
        "login words";

    .login {
        grid-area: login;
        button {
            width: 100%;
        }
    }

    .swirl {
        grid-area: swirl;
        height: 15rem;
    }

    .words {
        grid-area: words;
        text-align: center;
    }
}

.info {
    display: grid;

    grid-template-areas:
        "words swirl"
        "words contact";

    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content 1fr;

    section {
        margin-bottom: var(--spacing);
    }

    .contact {
        grid-area: contact;
        text-align: center;
    }

    .words {
        grid-area: words;
    }

    .swirl {
        grid-area: swirl;
        height: 15rem;
    }
}

.alt-text, .alt {
    font-family: var(--secondary-font-family);
    // font-size: var(--small-font-size);
    text-transform: uppercase;
}

article {
    background-color: var(--background-1);

    button {
        border-color: var(--background-2);
    }
}

.search {
    display: grid;
    grid-template-columns: 1fr 2fr;

    .results {
        display: grid;
        padding-left: var(--spacing);
        grid-gap: var(--spacing);

        article {
            display: grid;
            padding: var(--spacing);
            grid-template-columns: 1fr 4fr min-content;
        }
    }

    button {
        margin-right: var(--spacing);
        background: var(--background-2);
        border-color: var(--background-1);

        &.added {
            background: var(--color-green);
            cursor: auto;
        }
    }
}

.list {
    display: grid;
    grid-template-columns:
        1fr 1fr 1fr;

    grid-gap: var(--spacing);

    article {
        display: grid;

        // grid-template-rows:
        //     1fr min-content min-content;

        grid-template-areas:
            "title img"
            "details details"
            "remove remove";

        button {
            margin-top: var(--spacing-half);
            grid-area: remove
        }

        .details {
            grid-area: details;
        }

        padding: var(--spacing);

        img {
            justify-self: end;
        }
    }
}

form {
    margin-bottom: var(--spacing);

    label, input {
        display: block;
    }

    input, button {
        width: 100%;
    }

    input {
        padding: var(--spacing-half);
        margin-bottom: var(--spacing);
    }

    label {
        font-family: var(--secondary-font-family);
        font-size: var(--small-font-size);
        text-transform: uppercase;
        margin-bottom: var(--spacing-half);
    }

}

a {
    color: var(--secondary-font-color);
    font-family: var(--secondary-font-family);
    text-transform: uppercase;

    &:hover {
        color: var(--fg-color);
    }
}

nav {
    a {
        font-size: var(--small-font-size);
        margin-right: var(--spacing);
    }
}


header {
    display: grid;
    grid-template-columns: 1fr 1fr min-content;
    padding-bottom: var(--spacing);

    a {
        white-space: nowrap;
    }
}

.bundles {
    flex-flow: row;

    .bundle {
        margin-bottom: var(--spacing-double);

        section {
            margin-bottom: var(--spacing);
        }

        .items {
            display: grid;
            grid-template-columns: repeat(5, 1fr);

            div {
                margin-right: var(--spacing);
                margin-bottom: var(--spacing);

                display: grid;

                &.bold {
                    font-weight: bold;
                    background: var(--background-2);
                }
            }
        }
    }
}

.offers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--spacing);

    .offer {
        display: grid;
        grid-template-columns: 1fr min-content;
        grid-template-rows: min-content min-content;
        grid-template-areas:
            "details img"
            "lines lines";

        padding: var(--spacing);
        background: var(--background-1);

        .details {
            font-size: var(--small-font-size);
        }

        .status {
            margin-top: var(--spacing-half);
        }

        section {
            grid-area: details;
        }

        img {
            grid-area: img;
            justify-self: end;
            margin-left: var(--spacing-half);
        }

        .lines {
            grid-area: lines;
            display: flex;
            flex-wrap: wrap;
            column-gap: var(--spacing-half);

            button {
                margin-top: var(--spacing-half);
                border-color: var(--background-2);

                &.accepted {
                    background: var(--color-accepted);
                }

                &.confirmed {
                    cursor: auto;
                    background: var(--color-confirmed);
                }

                &.neg {
                    margin-left: var(--spacing-half);
                }
            }
        }
    }
}

.number {
    font-family: var(--secondary-font-family);
    text-transform: uppercase;
}

.swirl {
    background-image: url("./../assets/swirl.fix.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    margin-bottom: var(--spacing);
}

@media (max-width:900px)  {
    .landing {
        grid-template-columns: 1fr;
        grid-template-areas:
            "swirl"
            "login"
            "words";
    }

    .list {
        grid-template-columns: 1fr;
    }

    .search {
        grid-template-columns: 1fr;
    }

    .offers {
        grid-template-columns: 1fr;
    }

    .info {
        grid-template-columns: 1fr;
        // is necessary for some reason
        grid-template-areas:
            "swirl"
            "contact"
            "words";
    }

    main {
        padding: 0 var(--spacing) 0 var(--spacing);
    }
}

@media (max-width:1200px) {
    img {
        width: 5rem;
    }
}


// ------------
// toasts

.iziToast {
    border-radius: 0;
    border-color: var(--base-border-color);

    .iziToast-body {
        font-family: var(--base-font-family);
        font-size: var(--base-font-size);
    }

    .iziToast-title {
        font-family: var(--secondary-font-family);
        text-transform: uppercase;
    }
}