@font-face {
  font-family: "Iosevka";
  font-style: normal;
  font-weight: 400;
  src: url("iosevka-regular.woff2") format("woff2");
}

html { scroll-behavior: smooth; }

::-webkit-scrollbar {
    width: .5rem;
    height: .5rem;
}

::-webkit-scrollbar-thumb { background-color: #4c789b; }
::-webkit-scrollbar-thumb:hover { background-color: #d9d7c7; }

@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

html, body { margin: 0; }

img {
    max-width: 100%;
    object-fit: contain;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1rem; 
    font-family: "Iosevka", monospace;
    font-weight: bold;
    letter-spacing: 0.1rem;
    overflow-y: scroll;
    text-align: justify;
}

body > header, main { width: 40em; }
body > header { padding: 3em 0.5em 0.5em 0.5em; }
body > main { padding: 2em 0.5em 0.5em 0.5em; }

@media screen and (max-width: 40em) {
    body > header, main { width: calc(100% - 1em); }
}

body { line-height: 1.5;
    background-color: #d9d7c7;
    color: #41586b;
}

.email:before {
    content: attr(data-website) "\0040" attr(data-user);
    unicode-bidi: bidi-override;
    direction: rtl;
 }