// @font-face { // font-family: "EBGaramond-initials"; // src: url("font/EBGaramond/EBGaramond-Initials.otf") format("opentype"); // font-style: normal; // font-weight: normal; // } html body { // font-family: 'EBGaramond', 'Times New Roman'; background: url("background/interlaced/interlaced.png") repeat; margin: 0; } h1 { color: black; } a { text-decoration: none; } nav { position: absolute; width: 100%; top: 0; display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; // background-color: transparent; } nav h1 { margin: 4px 10px 0; } nav #logo { margin-right: 50px; } nav form { display: flex; flex-wrap: wrap; } nav form div { // width: 10em; margin: 0 10px; } nav form button { min-width: 5em; } nav .register-button { // width: 5em; display: block; margin: 0 20px; } @media (max-width: 720px) { nav { display: block; } nav form { display: block; width: 190px; margin-left: auto; margin-right: auto; align-items: center; } nav form div { margin: 10px auto; } nav div label,input { display: block; } nav .register-button { margin: 8px 0; } } div.landing-hero { top: 0; height: 60vh; background-color: orange; } div.hero-filter { width: 100%; height: 100%; } div.hero-filter h2 { width: 10em; font-size: 2.4em; position: absolute; top: 15%; margin-left: 3%; } div.errors { background-color: red; height: 50px; position: absolute; width: 100%; top: 50px; }