@font-face {
    font-family: "Swinston";
    src: url("Swinston.ttf") format("truetypefont");
}

:root {
    --header-height: 200px;
    --header-font: "Gendy";
    --content-font: "Gendy";
    --header-width: 60%;
    --content-width: 75%;
}

body {
    background-color: #555;
}
 
.header {
    width: var(--header-width);
    margin-left: auto;
    margin-right: auto;
    font-family: var(--header-font);
    font-weight: bold;
}

.logo {
    background-image: url("logo.jpg");
    background-repeat: no-repeat;
    background-size: 100% var(--header-height);
    border: 0px solid black;
    height: var(--header-height);
    font-size: 25pt;
    padding-left: 2em;
}
.navbar {
    border: 1px solid black;
    margin-top: 0;
    background-color: rgba(255, 255, 255, 0.6);
    font-size: 18pt;
}
#navbar ul {
    list-style-type: none;
    margin: 0;
}
#navbar li {
    display: inline-block;
}
#navbar a, #navbar a:visited, #navbar a:hover {
    color: black;
    margin-right: 2em;
    text-decoration: none;
}
.content {
    border: 0px solid green;
    background-color: rgb(255, 255, 255);
    width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
    min-height: 30em;
    font-family: var(--content-font);
    padding:20px;
    font-size: 18pt;
}
.content-image-center {
    margin-left: auto;
    margin-right: auto;
    /* border: 1px solid green; */
    width: max-content;
}

footer {
  width: 1500px;
  height: 33px;
  padding: 20px 0 4px 0;
  margin-left: auto;
  margin-right: auto;
  text-align: center; 
  background-color: black;
  color: aliceblue;
}