@font-face { font-family: 'Titling Gothic FB'; src: url("../fonts/TITLINGGOTHICFB-WIDE.OTF") format("opentype"); } @font-face { font-family: 'Grifter'; src: url("../fonts/GRIFTER.otf") format("opentype"); } @font-face { font-family: 'Gilroy'; src: url("../fonts/Gilroy-ExtraBold.otf") format("opentype"); } @font-face { font-family: 'Apercu Mono'; src: url("../fonts/ApercuMono.ttf") format("truetype"); } html, body { width: 100%; height: 100%; } body { background-color: #002234; color: #CC7A98; } h1 { font-family: "Gilroy"; } p { font-family: "Apercu Mono"; } a:hover { color: #CDE7B0; } article { min-height: 100%; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: 100%; } header nav a span { font-size: 2rem; font-family: 'Titling Gothic FB'; color: #CC7A98; } header nav a span span { font-size: 2.2rem; font-family: 'Grifter'; } header nav #navbarSupportedContent23 ul { background-color: #CC7A98; } header nav #navbarSupportedContent23 ul li { background-color: #CC7A98; text-align: center; } header nav #navbarSupportedContent23 ul li a span { color: #002234; font-family: "Apercu Mono"; } header nav #navbarSupportedContent23 ul .active { background-color: #002234; } header nav #navbarSupportedContent23 ul .active a span { color: #CC7A98; } main { padding: 0.5rem; } main h1 { padding-bottom: 1rem; font-size: 4.5rem; } main h1 span { text-decoration: underline #CC7A98; text-decoration-style: wavy; } main p { font-size: 2rem; margin-bottom: 5px; } footer { text-align: center; font-size: 1rem; padding: 0.5rem; } footer a { color: #CC7A98; text-decoration: underline #CC7A98; } .vertical-center { min-height: 100%; min-height: 100vh; display: flex; align-items: center; } .ham { width: 30px; height: 20px; position: relative; margin: 0px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; } .ham span { display: block; position: absolute; height: 3px; width: 100%; border-radius: 9px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; background: #CC7A98; } .ham span:nth-child(1) { top: 0px; } .ham span:nth-child(2), .ham span:nth-child(3) { top: 10px; } .ham span:nth-child(4) { top: 20px; } .ham.open span:nth-child(1) { top: 11px; width: 0%; left: 50%; } .ham.open span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .ham.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .ham.open span:nth-child(4) { top: 11px; width: 0%; left: 50%; } /*# sourceMappingURL=style.css.map */