:root {
    --clr-background: #f0f0f0;
    --clr-backfround-accent: #dedede;
    --clr-primary: #F66B11;
    --clr-secondary: #ffbc8f;
    --clr-text: #111111;
    --clr-hover: #848484;
    --clr-muted: #4c4c4c;
    --clr-negative: #eeeeee;

    --fnt-body-alt: 'Roboto', sans-serif;
    --fnt-body: 'Poppins', sans-serif;
    --fnt-serif: 'Frank Ruhl Libre', serif;
}

*,
*::before,
*::after {

    margin: 0;
    padding: 0;
    text-decoration: none;
    box-sizing: inherit;
} 

html {
    background-color: var(--clr-background);
    scroll-behavior: smooth;
    font: var(--fnt-body);
}



a {
    text-decoration: none;
}

.logo > * {
    z-index: 1;
    display: block;
    justify-content: center;
    width: min(30rem, 70%);
    height: auto;
    margin: 2rem auto;
    animation: fade-in-up 1.5s ease forwards;
    opacity: 0;
    transform: translateY(50px);
    filter: drop-shadow(0em .1em .0em rgb(196, 196, 196));
}

@keyframes fade-in-up {
    to {
        transform: translateY(0px);
        opacity: 1;
    }
}

h1 {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-items: center;
    justify-content: center;
    font-size: clamp(1.25rem, 5vw, 2rem);
    font-family: var(--fnt-serif);
    font-weight: 400;
    letter-spacing: .1em;
    background-image: url(/Tkruize/img/roof2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

.sub-title {
    display: flex;
    flex-grow: 1;
    animation: fade-in .8s linear 1s forwards;
    opacity: 0;
    color: var(--clr-negative);
    justify-content: center;
    padding: 2em;
    text-shadow: .0em .0em .1em #111111;
}

@keyframes fade-in {
    to {
        opacity: 1;
    }
}

.container {
    display: block;
    max-width: 100%;
    background-color: var(--clr-backfround-accent);
}

.content {
    display: flex;
    justify-content: center;
    padding: 1.5em;
    margin: 0 auto;
    max-width: 40em;
    line-height: 1.6;
    font-size: clamp(.75rem, 4vw, 1rem);
    font-family: var(--fnt-body);
    font-weight: 300;
}

.contact {
    display: block;
    line-height: 2;
    justify-content: center;
    max-width: 40em;
    margin: 0 auto;
    padding: 2em;
    font-family: var(--fnt-body);
    font-weight: 300;
}

.contact a {
    color: var(--clr-text);
    transition: color 100ms linear;
}
.contact a:hover, .contact a:focus {
    color: var(--clr-hover);
}

footer {
    color: var(--clr-negative);
    display: flex;
    background-color: var(--clr-primary);
    justify-content: center;
    padding:  .75em;
    font-style: italic;
    font-size: clamp(.75rem, 4vw, 1rem);
    font-family: var(--fnt-body);
    font-weight: 200;
}

footer a {
    color: var(--clr-negative);
    transition: color 100ms linear;
}


.jordan:hover, .jordan:focus {
    color: var(--clr-secondary);
}

.icons {
    width: 1em;
    height: auto;
    color: var(--clr-secondary);
    position: relative;
    top: .2em;
    right: .4em;
}