@font-face {
  font-family: 'Lapti Nek';
  src: url('/fonts/laptinekaf-webfont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'alte_haas_grotesk';
  src: url('/fonts/altehaasgroteskbold-webfont.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'alte_haas_grotesk';
  src: url('/fonts/altehaasgroteskregular-webfont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

html {
scroll-behavior: smooth;
}

body {
font-family: var(--main-font);
padding: 1rem;
margin: 0 auto;
background-color: var(--background-color);
color: var(--text-color);
font-size: 1.3rem;
}

img {
display: block;
max-width: 100%;
vertical-align: middle;
height: auto;
margin: 0 auto;
box-shadow: 0.1rem 0.1rem 0.5rem var(--shadow-color);
}

h1 > a > img {
box-shadow: 0 0 0 var(--shadow-color);
}

blockquote {
background-color: rgba(0, 0, 0, 0.1);
}

header > h1 {
font-family: var(--title-font);
text-transform: var(--title-transform);
color: var(--title-color);
font-size: var(--title-font-size);
margin: 1rem 0 1.742rem 0;
}

h1 {
text-align: center;
font-size: 2.6rem;
font-weight: bold;
}

h1, h2, h3, h4, h5 {
font-family: var(--heading-font);
font-weight: bold;
}

p {
line-height: 1.7rem
}

hr {
border: 1px solid var(--text-color);
margin: 1rem 0 1rem 0;
}

/* strong {
text-transform: capitalize;
} */

table {
width: 100%;
margin-top: 1rem;
margin-bottom: 1rem;
border-collapse: collapse;
}

tr:nth-child(even) {
background-color: rgba(0, 0, 0, 0.1);
}

footer {
margin: 1rem 0 1rem 0;
}

footer > p {
font-style: italic;
}

.return-home a {
background-color: #1c1b19;
font-family: 'Lapti Nek', sans-serif;
text-decoration: none;
border: none;
border-radius: 50%;
margin: 0.5rem;
display: inline-block;
text-align: center;
font-size: 1.1rem;
width: 2rem;
height: 2rem;
line-height: 2.2rem;
position: absolute;
top: 1.5rem;
left: 1.5rem;
}

.return-home a:link,
.return-home a:visited {
color: #fff8e7;
}

.return-home a:hover,
.return-home a:active {
background-color: #006c67;
color: #c15300;
}

.lastdate {
font-family: var(--heading-font);
font-size: 1rem;
}

.subtitle {
font-style: italic;
}

a:link,
a:visited {
color: var(--link-color);
}

a:hover,
a:active {
color: var(--link-hover-color);
background-color: var(--link-hovor-background-color);
text-decoration: none;
}

nav > ul {
text-align: center;
padding-left: 0;
}

nav > ul {
font-family: var(--nav-font);
list-style-type: none;
list-style-position: inside;
text-transform: uppercase;
margin: 1rem;
}

nav > ul > li {
display: inline;
}

nav > ul > li > a {
display: inline-block;
margin: 0.5rem;
}

nav > ul > li > a:link,
nav > ul > li > a:visited {
color: var(--nav-color);
}

nav > ul > li > a,
header > h1 > a {
text-decoration: none;
}

nav > ul > li > a:hover,
nav > ul > li > a:active {
color: var(--nav-hover-color);
background-color: var(--nav-hovor-background-color);
text-decoration: none;
}


header > h1 > a:link,
header > h1 > a:visited {
color: var(--title-color);
}

header > h1 > a:hover,
header > h1 > a:active {
background-color: var(--title-hover-color);
color: var(--background-color);
padding: 0.5rem 1rem 0.5rem 1rem;
}

footer > h1 > a {
background-image: var(--cirlce-background-image);
background-color: var(--accent-color);
font-family: var(--letter-font);
text-decoration: none;
border: none;
border-radius: 50%;
margin: 1rem;
display: inline-block;
text-align: var(--circle-text-align);
font-size: var(--circle-font-size);
width: 8rem;
height: 8rem;
line-height: var(--circle-line-height);
}

footer > h1 > a:link,
footer > h1 > a:visited {
color: var(--accent-color-2);
}

footer > h1 > a:hover,
footer > h1 > a:active {
background-image: var(--cirlce-background-image-hover);
background-color: var(--accent-color-3);
color: var(--accent-color-4);
}

@media only screen and (min-width: 700px) {

body {
  width: 700px;
}
}