@import url(elements.css); @import url(code.css); ::-webkit-scrollbar { width: 4px; height: 4px; background: transparent; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: #ffffff88; border-radius: 4px; } ::-webkit-scrollbar-button { display: none; } body { margin: 0; display: flex; justify-content: center; color: #ffffff; background: linear-gradient(to right, #111101, #011111), black; } #site { display: flex; flex-direction: row; width: 90%; max-width: 1000px; height: 100vh; } .site-column { height: 100vh; max-height: 100%; /* Firefox opacity workaround */ opacity: 0.9999; } #site-left { width: 25%; overflow-x: hidden; overflow-y: hidden; } #site-left-divider { margin: 1em 0em 0em 0.5em; } #site-sub-left { /* The height is dynamically adjusted in `scripts/script.js`. */ height: 60%; overflow-y: auto; padding-top: 0.5em; } #site-right { width: 75%; overflow-y: auto; } .winframe { display: flex; flex-direction: column; margin: 0.5em; padding: 2px; background-color: rgba(255, 255, 255, 0.75); backdrop-filter: invert(1) blur(8px); border-radius: 5px; } @media screen and (orientation:portrait) { #site { width: 200vw; max-width: 200vw; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; } .site-column { flex: 0 0 100vw; scroll-snap-align: center; } #site-left { flex-basis: 75vw; } } .icon { display: flex; height: 1.5em; justify-content: center; align-items: center; user-select: none; } .icon img { display: flex; height: 1.5em; } .winframe-bar { display: flex; flex-direction: row; align-items: center; padding: 2px; } .winframe-title { width: 100%; text-align: center; margin: 0em 0.25em; overflow-x: auto; user-select: none; } .winframe-title h1 { color: #000000; text-shadow: 0 0 5px rgba(192, 192, 255, 1); } .winframe-buttons { display: flex; flex-direction: row; } .winframe-buttons button { border-radius: 128px; border-color: white; color: white; background-color: crimson; transition: 0.1s ease; } .winframe-buttons button:hover { background-color: red; cursor: pointer; } .winframe-body { padding: 0.5em; overflow-x: auto; overflow-y: auto; backdrop-filter: invert(1) blur(4px); background-color: rgba(18, 19, 19, 0.75); border-radius: 5px; } /************************/ /* More specific things */ /************************/ #logo { margin: 1em; padding: 2px; transition: 0.1s ease; } #logo:hover { transform: translateY(-0.5em); } #logo img { width: 80%; height: auto; max-width: 50vw; max-height: 20vh; object-fit: contain; } #socials { display: flex; align-items: center; justify-content: space-evenly; } #socials .icon { margin: 0.25em 0em; opacity: 0.75; transition: 0.25s ease; } #socials .icon:hover { opacity: 1; transform: translateY(-0.125em); } @media screen and (orientation:portrait) { #socials { justify-content: center; } #socials .icon { margin: 0.25em 0.5em; } } #navigation { user-select: none; } #metainfo-frame, #footnotes-frame { animation: site-left-in 0.5s ease-out forwards; } @keyframes site-left-in { from { opacity: 0; transform: translateY(1em); } to { opacity: 1; transform: translateY(0em); } } #site-right { animation: site-right-in 0.5s ease-out forwards; } @keyframes site-right-in { from { opacity: 0; transform: translateX(1em); } to { opacity: 1; transform: translateX(0em); } }