styles.less

// out: ./styles.css

/**
* html5doctor.com Reset Stylesheet v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/)
* Richard Clark (http://richclarkdesign.com)
* http://cssreset.com
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

/* My stylesheet */

@import("https://fonts.googleapis.com/css?family=Baloo+Thambi|Roboto");

@font-headings: 'Baloo Thambi', cursive, sans-serif;
@font-body: 'Roboto', sans-serif;

@color-shell: #cd853f;
@color-yolk: #fabd00;
@color-stove: #efefef;
@color-carton: #98817b;
@color-pan: #060608;

@break-width-1: 50rem;
@break-width-2: 75rem;
@break-width-3: 100rem;
@break-height-1: 35rem;

body {
    background-color: @color-stove;
    overflow-x: hidden;
}

div.hero {
    height: 100vh;
    width: 100%;
    display: grid;
    grid-template-rows: 2fr 50% 3fr;
    overflow: hidden;
}

div.site-title {
    display: flex;
    align-items: center;
    justify-content: center;
    & h1 {
        text-align: center;
        font-family: @font-headings;
        color: @color-shell;
        font-size: 2rem;
        @media (min-width: @break-width-1) and (min-height: @break-height-1) {
            font-size: 4rem;
        };
        @media (min-width: @break-width-3) and (min-height: @break-height-1) {
            font-size: 6rem;
        };
    }
}

div.hero-img {
    padding: 1rem;
    & img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}

div.style-links {
    flex-wrap: wrap;
    &, & div {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    & div {
        flex: 1 0 25rem;
    }
    & a {
        flex: 1 0 4rem;
        font-family: @font-headings;
        color: @color-shell;
        font-size: 1.25rem;
        @media (min-width: @break-width-1) and (min-height: @break-height-1) {
            font-size: 1.5rem;
        };
        @media (min-width: @break-width-2) and (min-height: @break-height-1) {
            font-size: 2rem;
        };
        @media (min-width: @break-width-3) and (min-height: @break-height-1) {
            font-size: 3rem;
        };
        text-align: center;
        text-decoration: none;
        outline: none;
        display: block;
        padding: 1rem;
        overflow: visible;
        & img {
            height: 1.5rem;
            @media (min-width: @break-width-2) and (min-height: @break-height-1) {
                font-size: 2rem;
            };
            @media (min-width: @break-width-3) and (min-height: @break-height-1) {
                height: 3rem;
            };
            transition: transform 0.3s;
        }
        &:hover, &:focus { & img {
            transform: rotate(30deg);
        }}
    }
}

div.stovetop {
    position: fixed;
    top: 0;
    display: block;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    z-index: -1;
}

img.stovetop {
    width: 100vw;
    position: absolute;
    z-index: -2;
    left: -20vw;
}

@keyframes frypan {
    0% { transform: rotate(-75deg) translate(100vw, 0); }
    50% { transform: rotate(-75deg); }
    100% { transform: rotate(-120deg); }
}

img.frypan {
    width: 85vw;
    position: absolute;
    z-index: -1;
    top: -50vw;
    left: -13vw;
    transform: rotate(-120deg);
    animation-name: frypan;
    animation-duration: 2s;
    animation-delay: 1s;
    animation-fill-mode: both;
}

a.back-link {
    font-family: @font-headings;
    font-size: 140%;
    text-decoration: none;
    outline: none;
    text-align: center;
    color: @color-shell;
    display: block;
    background: url("img/carton_button.png");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    width: 6rem;
    height: 4.5rem;
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    &:hover, &:focus {
        background-position: top;
        color: @color-stove;
    }
}

div.text-frame {
    display: block;
    box-sizing: border-box;
    padding: 50vh 1rem 3rem 5rem;
    width: 100%;
    min-height: 100vh;
    @media (min-width: @break-width-1) and (min-height: @break-height-1) {
        padding: 50vh 4rem 3rem 40vw;
    };
    & > div {
        box-sizing: border-box;
        width: 100%;
        min-height: 40vh;
        padding: 2rem;
        background-color: fadeout(@color-stove, 30%);
        border-radius: 0.5rem;
    }
    z-index: 0;
    & h1 {
        font-family: @font-headings;
        font-size: 2rem;
        @media (min-width: @break-width-1) and (min-height: @break-height-1) {
            font-size: 4rem;
        };
        color: @color-yolk;
        text-shadow: 3px 3px 2px grey;
    }
    & p {
        font-family: @font-body;
        line-height: 2;
    }
    & ul {
        font-family: @font-body;
        padding: 1rem 0 1rem 2rem;
    }
}

table {
    margin: 1rem;
    font-family: @font-body;
    & tr:nth-child(2n+1) {
        background-color: #0003;
    }
    & td {
        vertical-align: middle;
        padding: 0.2rem;
        &:first-child {
            text-align: center;
        }
    }
}

span.credit {
    font-family: @font-body;
    font-size: 80%;
    color: #555555;
    & a {
        color: darken(@color-shell, 10%);
        text-decoration: none;
        outline: none;
        &:hover, &:focus {
            text-decoration: underline;
        }
    }
}

footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #111111;
    color: @color-stove;
    width: 100%;
    padding: 1rem;
    font-family: @font-body;
    & ul {
        list-style: none;
        text-align: left;
        & > a {
            font-weight: bold;
        }
        & li {
            padding-left: 1rem;
        }
    }
    & a {
        color: @color-stove;
        text-decoration: none;
        outline: none;
        &:hover, &:focus {
            color: @color-shell;
        }
    }
}

span.copyright {
    padding: 1rem;
    font-size: 80%;
}