@import "vars.css";

body {
    background: var(--background-body);
}

main {
    display: grid;
    font-family: sans-serif;
}

@media (orientation: landscape) {
    main {
        grid-template-columns: repeat(2, 1fr);
    }
}

h1,h2 {
    font-family: var(--header-font);
}

article {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2em;
    background-color: var(--background-article);
    background-image: var(--dither-bg);
    background-size: contain;
    image-rendering: crisp-edges;
    background-repeat: repeat-x;
    animation: 1s ease 0s 1 forwards fade;
}

aside {
    background: var(--background-aside);
}

aside img {
    display: block;
    width: 100%;
    height: 100vh;
    object-fit: cover;
    opacity: 0;
    animation: 1s ease 0.5s 1 forwards fade;
}

a {
    text-decoration: none;
}

.italics {
    font-style: italic;;
}

figure {
    background: var(--figure-bg);
}

nav a {
    display: inline-block;
    background: var(--link-btn-bg);
    color: var(--link-btn-col);
    padding: 0.5em;

    transition: 1s ease-in-out;
}

nav a:hover {
    transform: scale(1.4);
    transition:
        transform 1s;
}

@keyframes fade {
    0% {
        opacity: 0;
    }
    
    50% {
        opacity: .75;
    }

    100% {
        opacity: 1
    }
}