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

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

body, h1, h2, h3, 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;
}

// 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(--base-background-color);
    box-sizing:border-box
}

// @charset "UTF-8";
:root {
    --breakpoint-medium: 35em;
    --breakpoint-large: 56em;
    --color-dark-blue: #101014;
    --color-mid-blue: #16171d;
    --color-light-blue: #1f2128;
    --color-mid-grey: #9BA0B3;
    --color-off-white: #F4F1D0;
    --color-accent-blue: #5E9ED6;
    --base-accent-color: var(--color-accent-blue);
    --hover-link-color: var(--color-off-white);
    --base-background-color: var(--color-dark-blue);
    --secondary-background-color: var(--color-mid-blue);
    --tertiary-background-color: var(--color-light-blue);
    --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: 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;
    --min-font-size: var(--base-font-size);
    --max-font-size: var(--large-font-size);
    --base-duration: .3s;
    --base-timing: cubic-bezier(0.645, 0.045, 0.355, 1.000);
    --base-border-color: var(--secondary-font-color);
    --base-border: 1px solid var(--base-border-color);
    --hover-border: 1px solid var(--base-font-color);
    --focus-border: 1px solid var(--base-font-color);
    --base-border-radius: .2rem;
    --base-focus: 2px solid var(--base-accent-color);
    --base-outline-offset: 0.25em;
    --base-box-shadow: 0 1px 2px 0px rgba(0, 0, 0, .25);
    --hover-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, .5);
    --base-spacing: 1rem;
    --base-spacing-half: calc(var(--base-spacing)/2);
    --utility-bar-header-height: calc(var(--base-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;
    cursor:pointer
}

// ok actual styles

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

main {
    padding: 0 10% 0 10%;
}

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

.landing {
    display: flex;

    .login {
        flex: 1;
    }

    .info {
        flex: 1;

        p {
            margin-bottom: var(--base-spacing);
        }
    }

}

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

    label {
        margin-bottom: var(--base-spacing-half);
    }

    label, input {
        display: block;
    }
}


.header {
    display: flex;
}

.home {
    min-height: 100%;
    width: 100%;

    display: flex;

    .bundle {
        flex: 1;
        padding-right: 1em;
    }
}