@font-face { font-family: 'sans'; src: url('./fonts/LiberationSans.woff') format('woff'), url('./fonts/LiberationSans.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'mono'; src: url('./fonts/LiberationMono.woff') format('woff'), url('./fonts/LiberationMono.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'hyper'; src: url('./fonts/RealityHyperRegular.woff') format('woff'), url('./fonts/RealityHyperRegular.ttf') format('truetype'); font-weight: normal; font-style: normal; } *, body { box-sizing: border-box; font-family: 'sans'; color: white; background-color: black; background-image: url("./img/bg-tiles-sprite_4x.gif"); background-repeat: space round; } footer { user-select: none; padding: 0.5rem; display: flex; align-items: center; justify-content: space-between; } .footer_element { padding: 0.5rem; } .logo_font { color: #FFF; font-family: 'hyper'; font-size: 6rem; text-shadow: 0 1px 0 #17202A, 0 2px 0 #17202A, 0 7px 0 #17202A, 0 8px 0 #17202A, 0 11px 0 #17202A, 0 12px 0 #17202A; z-index: 999; padding-left: 4rem; user-select: none; } .logo_gif { height: 8.5rem; margin: -4rem; z-index: 998; } .logo_group { display: flex; justify-content: center; align-items: center; pointer-events: none; margin-bottom: -4rem; user-select: none; } .logo_link { text-decoration: none; } .menu_bar { user-select: none; display: flex; justify-content: center; align-items: center; font-family: 'mono'; font-size: 2rem; text-shadow: 0 1px 0 #17202A, 0 2px 0 #17202A, 0 3px 0 #17202A, 0 4px 0 #17202A, 0 5px 0 #17202A, 0 6px 0 #17202A; } .menu_bar li { list-style-type: none; } .menu_bar li a { text-decoration: none; font-family: 'mono'; } .menu_bar li a:hover { text-style-type: bold; /* text-decoration: underline; text-decoration-thickness: 5px; text-decoration-color: #f3a041; */ } .menu_bar li a:before { content: '\00a0\00a0'; } .menu_bar li a:after { content: '\00a0\00a0'; } .menu_bar li a:hover:before { content: '~/'; } .menu_bar li a:hover:after { content: '/\00a0'; } .menu_bar li a:active { color: #AAA; /* text-decoration: underline; text-decoration-thickness: 6px; text-decoration-color: #41a3f3; */ } .img_list { display: flex; flex-direction: column; justify-content: space-around; align-items: center; padding: 2rem; } .img_list li { list-style-type: none; margin: 1rem; } .aud_list { display: flex; flex-direction: column; justify-content: space-around; align-items: center; padding: 2rem; } .aud_list li { list-style-type: none; margin: 1rem; } .list_text { width: 70vw; } .cat_heading { font-family: 'mono'; font-size: 2rem; padding-left: 2rem; padding-bottom: 3rem; color: #FFF; pointer-events: none; user-select: none; } .blinky_cursor { margin-left: 1rem; } .pixelart { image-rendering: pixelated; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; object-fit: contain; width: auto; } .big_content { padding: 1rem; padding-left: 5rem; } .db_utilities { padding: 2rem; } .footer_spacer { position: fixed; left: 0; bottom: 0; width: 100%; text-align: center; } form > label { margin-left: 1rem; white-space: nowrap; } .music_player { display: flex; flex-direction: column; width: 30%; } .about_section { display: flex; } .about_section p { width: 60%; padding: 3rem; } @viewport { width: device-width; } @media only screen and (max-width: 900px) { footer { padding: 0.1rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between; } .footer_element { padding: 0.1rem; } .footer_element a { padding: 0.5rem; } .footer_flavor { display: none; } .logo_font { color: #FFF; font-family: 'hyper'; font-size: 4rem; text-shadow: 0 1px 0 #17202A, 0 2px 0 #17202A, 0 7px 0 #17202A, 0 8px 0 #17202A, 0 11px 0 #17202A, 0 12px 0 #17202A; z-index: 999; padding-left: 0rem; margin-right: 4rem; } .logo_gif { height: 6rem; margin: -6rem; z-index: 998; } .logo_group { display: flex; align-items: center; pointer-events: none; margin-bottom: -4rem; } .logo_link { text-decoration: none; } .menu_bar { margin-top: 3rem; display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: 'mono'; font-size: 2rem; text-shadow: 0 1px 0 #17202A, 0 2px 0 #17202A, 0 3px 0 #17202A, 0 4px 0 #17202A, 0 5px 0 #17202A, 0 6px 0 #17202A; } .menu_bar li { margin: 0.5rem; } .massive_spacer { display: none; } .cat_heading { font-family: 'mono'; font-size: 1rem; padding-left: 0rem; padding-bottom: 1rem; color: #FFF; pointer-events: none; user-select: none; } .about_section { display: flex; flex-direction: column-reverse; } .about_section p { width: 80%; padding: 0rem; } .about_section img { margin: 0rem; } }