* { margin: 0; padding: 0; } @font-face { font-family: "Consolas Custom"; src: url('consola.ttf') format('truetype'); } body { font-family: "Consolas Custom"; } .background { background-image: var(--background); background-size: cover; background-position: center; filter: blur(2px); height: 100vh; width: 100%; position: fixed; top: 0; left: 0; opacity: 0; animation: main-animation 500ms ease-in-out 300ms; animation-fill-mode: forwards; z-index: -1; } .background.out { opacity: 1; animation: main-animation-out 500ms ease-in-out; animation-fill-mode: forwards; } header { background-color: var(--headercolor); color: white; position: fixed; top: 0; width: 100%; display: flex; justify-content: center; align-items: center; transform: translateY(-100%); animation: nav-animation 500ms cubic-bezier(0.42, 0, 0.13, 1.04); animation-fill-mode: forwards; z-index: 100; } header.out { transform: translateY(0%); animation: nav-animation-out 500ms ease-in-out; animation-fill-mode: forwards; } .logo { height: 100%; aspect-ratio: 1; position: absolute; left: 1em; } img { width: 100%; height: 100%; } nav { background-color: #FFFFFF77; border-radius: 1em; width: max-content; margin: .5em; color: black; } nav ul { display: flex; justify-content: center; } nav a { color: inherit; text-decoration: none; font-weight: bold; font-size: 1.2em; text-align: center; margin: 0.5em 1em; display: flex; align-items: center; } nav li { list-style: none; padding: 10px; pointer-events: none; } nav li:not(.selectedpage):hover { background-color: #FFFFFF44; border-radius: 5px; } .selectedpage { background-color: grey; border-radius: .5em; } main { margin: 0 auto; margin-top: 7em; margin-bottom: 3em; width: 80%; background-color: var(--maincolor); padding: 1em; padding-bottom: 0; border-radius: 10px; overflow: hidden; opacity: 0; animation: main-animation 500ms ease-in-out 500ms; animation-fill-mode: forwards; } main.out { opacity: 1; animation: main-animation-out 500ms ease-in-out; animation-fill-mode: forwards; } .centeredimage { margin: auto; width: clamp(100px, 300px, 70%); } .portrait { width: 300px; float: right; margin: 0.5em; } .portrait img, .centeredportrait img { box-sizing: border-box; border: 0.5em black solid; border-radius: 10% 30%; } .centeredportrait { display: none; width: 70%; margin: 0 auto; } article { background-color: var(--articlecolor); border: 0.2em solid black; border-radius: 10px; padding: 1em; overflow: hidden; position: relative; } .space { padding: 1em; } h1 { font-size: 3em; margin-bottom: 0.2em; } p { font-size: 1.2em; white-space: pre-line; } .contact { width: max-content; padding: 0 2em; font-size: 1.2em; } .keyword1 { color: orange; background: none; } .keyword2 { color: rgb(255, 234, 43); background: none; } .keyword3 { color: rgb(155, 230, 126); background: none; } footer { text-align: center; font-size: 1.2em; margin: 0.5em; } @keyframes nav-animation { 0% { transform: translateY(-100%); } 100% { transform: translateY(0); } } @keyframes main-animation { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes nav-animation-out { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } } @keyframes main-animation-out { 0% { opacity: 1; } 100% { opacity: 0; } } @media screen and (max-width: 750px) { nav a { font-size: 3vw; } .logo { display: none; } main { margin-top: 6em; font-size: 3vw; } .portrait { display: none; } .centeredportrait { display: block; } }