@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&family=Work+Sans:wght@900&display=swap');

@font-face {
    font-family: Mont;
    src: url(mont.otf);
}

:root {
    --accent: #FEA82F;
    --background: #423E3B;
    --lowlight: #242a33;
    --body: #584D3D;
    --article-background: #f8f8f8;
    --font-size: 2rem;
    --line-height: 3.7rem;
    --article-padding: 25vw;
    --company-name-font-size: 5.3vw;
    --company-name-line-height: 5.3vw;
    --logo-size: 14vw;
    --company-name-spacing: 1.85vw;
    --slogan-size: 3vw;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    :root {
        --font-size: 1.25rem;
        --line-height: 2rem;
        --article-padding: 15vw;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    :root {
        --font-size: 1.25rem;
        --line-height: 2rem;
        --article-padding: 15vw;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    :root {
        --font-size: 1.25rem;
        --line-height: 2rem;
        --article-padding: 15vw;
    }
}


/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    :root {
        --font-size: 1.5rem;
        --article-padding: 15vw;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1440px) {
    :root {
        --font-size: 2rem;
        --line-height: 3.7rem;
        --article-padding: 25vw;
        --logo-size: 10vh;
        --company-name-font-size: 3.3vh;
        --company-name-line-height: 3.3vh;
        --company-name-spacing: 1.85vh;
        --slogan-size: 3vh;
    }
}


body {
    padding: 0;
    margin: 0;
    background: var(--background);
    color: var(--body);
    font-family: 'Roboto Slab', serif;
    font-size: var(--font-size);
}

a:link, a:visited, a:hover {
    color: var(--accent);
    text-decoration: none;
}

header {
    background-color: var(--background);
    padding-top: 0.75vw;
    padding-bottom: 0.75vw;
    margin-left: 25vw;
    margin-right: 25vw;
    display: flex;
    align-items: center;
}

#logo {
}

#logo svg {
    width: var(--logo-size);
    height: var(--logo-size);
}

.sawczuklogofill {
    fill: var(--accent);
}

.sawczuklogostroke {
    stroke: var(--accent);
    fill: none;
}

#companyname {
    color: var(--accent);
    font-family: "Mont", sans-serif;
    font-size: var(--company-name-font-size);
    line-height: var(--company-name-line-height);
    font-kerning: auto;
    margin-left: var(--company-name-spacing);
    /*text-shadow: 0 5px 20px var(--lowlight);*/
}

#slogan {
    font-size: var(--slogan-size);
    color: var(--article-background);
    margin-left: 3vw;
    padding-left: 3vw;
    border-left: 0.25vw solid var(--article-background);
    padding-top: 2.5vw;
    padding-bottom: 2.5vw;
}

article {
    padding: 1.75vw var(--article-padding);
    background: var(--article-background);
    min-height: 60vh;
}

article p {
    line-height: var(--line-height);
}

article h1 {
    font-family: "Mont", sans-serif;
    text-transform: uppercase;
    margin-top: 3vh;
    margin-bottom: 0.5vh;
}

article ul {
    padding-left: 9rem;
    line-height: 3.7rem;
}

footer {
    font-size: 1vh;
    line-height: 1.5vh;
    background-color: var(--background);
    padding: 3vh 27% 1.5vh;
    display: flex;
}

#legalstuff, #copyright {
    color: var(--accent);
    flex-grow: 1;
}

#copyright {
    text-align: right;
}