@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"); } body { background-color: #002234; } article { min-height: 100%; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: 100%; } main { padding: 0.5rem; } footer { padding-bottom: 0.5rem; } /* Icon 1 */ .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; } .ham span { 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%; } header { padding-top: 0.5rem; padding-left: 1rem; padding-right: 1rem; } header nav a p { font-size: 3vh; font-family: 'Titling Gothic FB'; color: #CC7A98; } header nav a p span { font-size: 3.2vh; font-family: 'Grifter'; } /*# sourceMappingURL=style.css.map */