/* That's bone, and the lettering is something called Silian Rail. */ html, body { height: 100vh; width: 100%; } body { background-color: #1c1c1c; display: table; text-align: center; background-image: url("data:image/svg+xml,%3Csvg width='100px' height='100px' style='background-color: rgb(19,84,164);' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 0 0 L 100 0' stroke='rgb(49,108,172)' /%3E%3Cpath d='M 0 50 L 100 50' stroke='rgb(49,108,172)' /%3E%3Cpath d='M 0 0 L 0 100' stroke='rgb(49,108,172)' /%3E%3Cpath d='M 50 0 L 50 100' stroke='rgb(49,108,172)' /%3E%3C/svg%3E"); } .content { display: table-cell; vertical-align: middle; } hr { width: 66%; border: .1px solid #1c1c1c; margin-bottom: 10px; } h1 { font-size: 100px; } h2 { font-size: 75px; } h3 { font-size: 50px; } h4 { font-size: 25px; } h1,h2,h3,h4 * { padding: 25px; } .gradient_hover:hover { transition: 1s; background: linear-gradient(to right, #dae724, #2dffa1); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 400% 100%; animation: bgpos_shift 6s normal forwards ease-in-out infinite; } @keyframes bgpos_shift { 0%,100% { background-position: 0 0; } 50% { background-position: 100% 0; } } .menu { transition: .5s; position: absolute; width: 75px; height: 75px; background-color: white; border-radius: 0 0 35% 0; } .menu.open { transition: .3s; width: 400px; height: 100%; border-radius: 0; } .barholder { cursor: pointer; } .bar { width: 50px; height: 7px; background-color: #1c1c1c; margin: 12px 10px; transition: 0.4s; } .open .bar1 { transform: rotate(45deg) scaleX(.7) translate(19px, 28px); } .open .bar2 { transform: rotate(90deg) scaleX(.9); } .open .bar3 { transform: rotate(-45deg) scaleX(.7) translate(20px, 1px); } .back .bar1 { transform: scaleX(.5) rotate(-30deg) translate(-34px, -11px); } .back .bar3 { transform: scaleX(.5) rotate(30deg) translate(-34px, 11px); } .menu_divider { margin-top:100px; } .menu_content { padding-top: 10px; opacity: 0; display: none; text-align: left; } .menu_content ul { padding: 50px; } .menu_link { padding-top: 10px; font-size: 20px; text-decoration: none; } .menu_link:hover { text-decoration: underline; } .open .menu_content { opacity: 1; transition: 1s; display: initial; } .menu_content * { color: #1c1c1c; } .mono { font-family: monospace; } li { margin-top: 10px; }