@font-face {
    font-family: fira-sans-extra-condensed-900;
    font-weight: normal;
    src: url(webfonts/fira-sans-etra-condensed-900.woff2);
}

@font-face {
    font-family: volkhov;
    font-weight: normal;
    src: url(https://fonts.gstatic.com/s/volkhov/v18/SlGVmQieoJcKemNeeY4hkHNSbRYXags.woff2);
}

body {
    background-color: pink;
}

a,
a:visited {
    color: crimson;
    text-decoration: underline;
}

/*structure*/

.site-header,
.site-main,
.site-footer {
    padding: 1rem;
}

.site-header {
    background-color: #1F4E49;
}

.site-main {
    background-color: pink;
}

.site-footer {
    background-color: #1F4E49;
}

/*header*/

.site-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    align-items: flex-end;
}

.main-navigation {
    width: auto;
}


.site-title a {
    display: block;
    width: 200px;
    height: 50px;
    background: url(images/logo.svg) no-repeat center center;
    background-size: contain;
    text-indent: -50000px;
}

h1.site-title,
p.site-title {
    margin: 0;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
}

/*navigation*/

.main-navigation li {
    margin-left: 2rem;
}

.main-navigation li a {
    color: #FF5317;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease-in-out;
    font-family: volkhov;
    padding: 0.4em 1em 0.2em 1em;
}

.main-navigation li.nav-button-link a {
    background-color: #FF5317;
    color: #FEF6E0;
    border-radius: 5px;
}

.main-navigation li a:hover,
.main-navigation li.current-menu-item a {
    border-bottom: 3px solid #FF5317;
}

h1 {
    font-family: fira-sans-extra-condensed-900;
    font-size: 330px;
}