@import 'variables.css';
@import 'colors.css';

/*1.) Main*/
body {
    display: grid;
    grid-template-rows: var(--header-height) 1fr var(--footer-height);
    height: 100vh;
    font-family: var(--typography-font-family), serif;
    font-weight: var(--typography-font-weight);
    line-height: var(--typography-line-height);
    color: var(--typography-color);
    background: var(--body-background-color);
}

a, a:link, a:visited, a:hover, a:focus, a:active {
    color: var(--action-color);
}

header a.logo {
    margin-right: 0.75rem;
}

header a img:hover {
    opacity: 0.7;
}

header a.sm-icon {
    display: inline-block;
    margin: auto 0.25rem;
}

header a.sm-icon img {
    width: 2rem;
    height: auto;
}

main > div:first-child img {
    width: 100%;
    height: auto;
}

main article {
    padding: 1rem;
}

/*2.) Styles*/
hr {
    border: 0;
    height: 0.12rem;
    background: var(--primary-color);
    margin: 0.5rem 0;
}

button {
    background-color: var(--action-color);
    color: white;
    padding: 0.5rem 1rem;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1rem;
    font-weight: bolder;
    margin: 0.125rem;
    cursor: pointer;
    border: none;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: var(--primary-color);
}

button a, button a:link, button a:visited, button a:hover, button a:focus, button a:active {
    text-decoration: none;
    color: white;
}

h1, h2, h3, h4 {
    color: var(--secondary-color);
    margin: 0 0 0.25rem 0;
}

h1 {
    font-size: var(--typography-h1-font-size);
}

h2 {
    font-size: var(--typography-h2-font-size);
}

h3 {
    font-size: var(--typography-h3-font-size);
}

h4 {
    font-size: var(--typography-h4-font-size);
}

.full-box, .half-box {
    vertical-align: top;
    box-shadow: var(--box-shadow);
    padding: 1.25rem;
}

.full-box {
    width: 100%;
}