@font-face {
font-family: 'Georgia';
src: url('/public/fonts/Georgia-Regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Georgia';
src: url('/public/fonts/Georgia-Italic.woff2') format('woff2');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'Georgia';
src: url('/public/fonts/Georgia-Bold.woff2') format('woff2');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Georgia';
src: url('/public/fonts/Georgia-BoldItalic.woff2') format('woff2');
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: 'Inter';
src: url('/public/fonts/ProximaNova-Regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Inter';
src: url('/public/fonts/Inter-Italic.woff2') format('woff2');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'Inter';
src: url('/public/fonts/Inter-Bold.woff2') format('woff2');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Inter';
src: url('/public/fonts/Inter-BoldItalic.woff2') format('woff2');
font-weight: bold;
font-style: italic;
}
:root {
--color1: #ffffff;
--color2: #eeeeef;
--color3: #e8e2d1;
--color4: #808080;
--text1: #000000;
--text2: #808080;
--text3: #ffffff;
--border1: #663300;
--size1: 1px;
--size2: 2px;
--size3: 4px;
--size4: 8px;
--size5: 16px;
--size6: 32px;
--size7: 64px;
--size8: 128px;
--size9: 256px;
--size10: 512px;
--size11: 1054px;
--red: #b62324;
--yellow: #FFFF00;
--green: #127749;
--blue: #36c;
--darkblue: rgb(27, 76, 173);
--brown: #663300;
--darkbrown: #2d1600;
}
html{
padding: var(--size4);
background: var(--color3);
}
body {
margin: 0;
margin-left: auto;
margin-right: auto;
max-width: var(--size11);
font-family: 'Arial', serif;
background: var(--color1);
box-sizing: border-box;
word-break:initial;
padding: var(--size5);
gap: var(--size5);
box-shadow: 6px 10px 17px rgba(102, 51, 0, 0.8);
border: 1px solid var(--border1);
}
h1, h2, h3{
margin: var(--size5) 0;
font-family: 'Georgia', serif;
font-weight: bold;
}
h1{
line-height: 28px;
font-size: 28px;
}
h2{
line-height: 24px;
font-size: 24px;
}
h3{
line-height: 20px;
font-size: 20px;
}
h1:last-child {
margin-bottom: 0;
}
h1:first-child{
margin-top: 0px;
}
h2:last-child {
margin-bottom: 0;
}
h2:first-child{
margin-top: 0px;
}
h3:last-child {
margin-bottom: 0;
}
h3:first-child{
margin-top: 0px;
}
a {
font-family: 'Arial', serif;
margin: var(--size4) 0 var(--size4) 0;
text-decoration: underline;
color: var(--brown);
}
a:hover {
color: var(--darkbrown);
}
a:first-child{
margin-top: 0px;
}
a:last-child {
margin-bottom: 0;
}
p{
font-family: 'Arial', serif;
color: var(--text1);
margin: 0;
}
p:last-child {
margin-bottom: 0;
}
p:first-child{
margin-top: 0;
}
header {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0;
height: var(--size7);
position: relative;
}
.header1 {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
min-width: 0;
}
.header2 {
display: flex;
justify-content: center;
}
.header3 {
display: flex;
align-items: center;
justify-content: flex-end;
flex: 1;
min-width: 0;
gap: var(--size1);
}
.logo{
height: var(--size7);
margin: 0;
}
.logo-image {
height: 100%;
}
.header-button {
width: var(--size6);
height: var(--size6);
padding: 0;
display: flex;
background-color: transparent;
border: none;
align-items: center;
justify-content: center;
cursor: pointer;
font: inherit;
gap: var(--size1);
}
.dropdown-menu {
display: none;
position: absolute;
width: 100%;
box-sizing: border-box;
background: var(--color1);
top: 50px;
border: 1px solid #663300;
box-shadow: 6px 10px 17px rgba(102, 51, 0, 0.8);
padding: var(--size5);
}
.dropdown-menu ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: var(--size4);
}
.dropdown-menu li {
margin: 0;
}
.dropdown-menu a{
width: 100%;
display: block;
}
.dropdown-menu.show {
display: block;
}
.content{
margin: var(--size6) 0;
}
footer{
text-align: center;
}
#search{
width: 100%;
border-radius: 0;
outline: 0;
border: 0;
background-color: var(--color3);
height: var(--size6);
box-sizing: border-box;
padding: var(--size4);
}
.search-results {
list-style: none;
padding-left: 0;
margin: 0;
}
.search-results li {
box-sizing: border-box;
font-size: 14px;
font-style: inherit;
align-content: center;
margin-top: var(--size5);
}
.search-results h2{
	margin-bottom: var(--size4);
}
.search-results a {
font-size: 18px;
font-style: inherit;
text-decoration: none;
margin: 0;
}
.search-results p {
font-size: 16px;
font-style: inherit;
text-decoration: none;
margin: 0;
}
.search-results a:hover {
cursor: pointer;
text-decoration: underline;
}
@media (min-width: 600px) {
html{
padding: 30px;
}
body{
padding: var(--size5);
}
.dropdown-menu{
width: max-content;
min-width: var(--size9);
}
}