@font-face {
font-display: swap;
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
src: url('../fonts/raleway/raleway-v37-latin-regular.woff2') format('woff2'),
url('../fonts/raleway/raleway-v37-latin-regular.ttf') format('truetype');
}
@font-face {
font-display: swap;
font-family: 'Raleway';
font-style: italic;
font-weight: 400;
src: url('../fonts/raleway/raleway-v37-latin-italic.woff2') format('woff2'),
url('../fonts/raleway/raleway-v37-latin-italic.ttf') format('truetype');
}
@font-face {
font-display: swap;
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
src: url('../fonts/raleway/raleway-v37-latin-700.woff2') format('woff2'),
url('../fonts/raleway/raleway-v37-latin-700.ttf') format('truetype');
}
@font-face {
font-display: swap;
font-family: 'Raleway';
font-style: italic;
font-weight: 700;
src: url('../fonts/raleway/raleway-v37-latin-700italic.woff2') format('woff2'),
url('../fonts/raleway/raleway-v37-latin-700italic.ttf') format('truetype');
}
body {
font-family: 'Raleway';
}
body { background-attachment: fixed; letter-spacing: 0.2px; }
p { font-weight: 300; }
strong { font-weight: 600; }
hr { border: 0; height: 1px; background-color: darkgray; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); }
h1 { font-weight: 400; text-transform: uppercase; font-size: 2.2em; padding: 0.8em 0; }
h2 { font-weight: 400; text-transform: uppercase; font-size: 1.2em; padding: 0.8em 0; }
table:not(#elm-container table) { display: flex; flex-direction: column; }
tr:not(#elm-container tr) { display: flex; justify-content: space-around; flex-wrap: wrap; align-items: center; }
header, main { max-width: 1024px; margin: 0 auto; box-sizing: border-box; }
header { border-radius: 10px 10px 0 0; text-align: center; }
#logo { padding: 20px; }
#menu-button { font-size: 40px; padding-right: 2rem; display: inline; cursor: pointer; text-align: right; display: none; }
nav ul { list-style-type: none; margin: 0; padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 1px; }
nav li { flex-grow: 1; }
nav a { text-decoration: none; display: block; padding: 15px; }
nav li ul { position: absolute; left: -999999px; z-index: 10; flex-direction: column; }
nav > ul > li { position: relative; }
nav ul li ul { box-shadow: 2px 2px 5px rgba(0,0,0,0.2); min-width: 100%; margin-left: 1px; }
nav ul > li:hover > ul { left: 0; }
nav li ul li { background-color: white; text-align: left; }
nav li ul li a { color: #e96b00; }
main { background-color: white; padding: 2em 4em; line-height: 2em; }
main > *:first-child { margin-top: 0; }
main > *:last-child { margin-bottom: 0; }
main p { text-align: justify; }
main>img:not(.float), main>img:not(.center), main>p>img:not(.float), main>p>img:not(.center) {
width: calc(100% + 8em); margin-left: -4em; height: auto;
}
footer { position: relative; text-align: center; padding: 3em 0; max-width: 1024px; margin: 0 auto 120px auto; box-sizing: border-box; }
#card { width: 240px; height: auto; position: absolute; background-color: white; right: -3em; top: -4em; padding: 2em; transform: rotate(-10deg); }
#card span { display: block; margin: 0.5em; font-size: 14px; }
@media screen and (max-width: 1180px) {
footer { padding-bottom: 0; margin: 0 auto; }
#card { margin-top: 3em; position: relative; width: 100%; transform: none; right: 0; top: 0; box-sizing: border-box; }
}
@media screen and (max-width: 1040px) {
body { background-image: none; margin: 0; }
header { border-radius: 0; }
}
@media screen and (max-width: 670px) {
h1 { font-size: 1.8em; }
#logo img { max-width: 80%; }
nav > ul { display: none; flex-direction: column; text-align: left; }
nav ul.visible { display: flex; }
nav a { text-transform: uppercase; }
nav ul li ul { left: 0; box-shadow: none; margin-left: 0;}
nav ul li ul li a { padding-left: 2em; }
#menu-button { display: block; }
main { padding: 2rem; }
main>img:not(.float), main>img:not(.center), main>p>img:not(.float), main>p>img:not(.center) {
width: calc(100% + 4rem); margin-left: -2rem; height: auto;
}
}
@media screen and (max-width: 480px) {
h1 { font-size: 1.6em; }
main p { text-align: left; }
}