:root {
            --clr-neonblue: hsl(182, 100%, 50%);
            --clr-neon: hsl(305, 95%, 59%);
            --clr-bg: hsl(323 21% 16%);
            --clr-bgtwo: hsl(241, 92%, 14%);
        }

        *::before,
        *::after {
            box-sizing: border-box;
        }
        ul {
            list-style: none;
        }
        body {
            min-height: 100%;
            font-family: 'Orbitron', sans-serif;
            color: var(--clr-neon);
            z-index: 1;
            top: 0px;
            bottom: 0px;
            left: 0px;
            right: 0px;
            margin: 0px;
            
        }

        .neon-button {
            display: block;
            float: left;
            font-size: 0.8vw;
            text-align: center;
            width: 9em;
            margin: 0.5em 0.5em 0.5em 0.5em;
            color: var(--clr-neon);
            cursor: pointer;
            text-decoration: none;
            border: var(--clr-neon) 0.125em solid;
            padding: 0.25em 1em;
            border-radius: 0.25em;
            z-index: 2;
            text-shadow:
                0 0 0.125em hsl(0 0% 100% / 0.2),
                0 0 0.25em currentColor;
            box-shadow: inset 0 0 0.5em 0 var(--clr-neon),
                0 0 0.5em 0 var(--clr-neon);
            position: relative;

        }

        .neon-button::before {
            pointer-events: none;
            content: '';
            position: absolute;
            background: var(--clr-neon);
            top: 100%;
            left: 1em;
            width: 100%;
            height: 100%;
            transform: perspective(50em) rotateX(40deg) scale(1, 0.45);
            z-index: -2;
            filter: blur(1.5em);
            opacity: 0.7;
        }

        .neon-button::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            box-shadow: 0 0 2em 0.5em var(--clr-neon);
            opacity: 0;
            transition: opacity 500ms linear;
            transition: inset opacity 500ms linear;
            text-shadow: 0 0 0.5em hsla(0, 0%, 100%, 0.2),
                0 0 0.5em currentColor;

        }

        .neon-button:hover::after {
            opacity: 1;
        }

        .neon-button:hover::before {
            opacity: 1;
        }

        #sidebar {
            left: 5.5vw;
            top: 2em;
            position: absolute;
            border: var(--clr-neon) 0.125em solid;
            box-shadow: inset 0 0 1em 0 var(--clr-neon),
                0 0 2em 0 var(--clr-neon);
            border-radius: 0.25em;
            z-index: 2;

            background: linear-gradient(to top right, var(--clr-bgtwo), var(--clr-bg)20%, hsl(0, 7%, 3%));
        }

        .LeftEdge {
            float: right;
            margin-top: 50%;
        }

        #Welcome {
            text-align: center;
            font-size: 3.5vw;
            font-family: 'Orbitron', sans-serif;
            position: absolute;
            top: 5vw;
            left: 7vw;

        }

        .pages {
            background: linear-gradient(to top right, var(--clr-bgtwo), var(--clr-bg)20%, hsl(0, 7%, 3%));
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0px;
            bottom: 0px;
            left: 0px;
            right: 0px;
            z-index: 0;
            place-items: center;
            text-align: center
        }

        #badJokeTwo {
            text-align: center;
            font-size: 3vw;
            font-family: 'Orbitron', sans-serif;
            display: none;
            position: absolute;
            top: 15vw;
            left: 7vw;
        }

        #Profilepage {
            top: 100vh;
        }

        #Hobbiespage {
            top: 200vh;
        }

        #hobbieslist {
            position: absolute;
            top: 20vh;
            left: 35vw;
        }

        #Education-Room {
            top: 300vh;
        }

        #Education-Table {
            position: absolute;
            left: 20vw;
            top: 25vh;

        }
        #ED-head{
            position: absolute;
            left: 37vw;
            top: 10vh;
        }

        .tablemargins {
            height: 5vh;
            width: 25vw;
        }

        #Musicvideo-Room {
            display: flex;
            top: 400vh;
            align-items: center;
            justify-content: center;

        }

        #frozenvideo {
            position: relative;
            color: var(--clr-neonblue);
            text-decoration: none;
            border: var(--clr-neonblue) 0.125em solid;
            z-index: 1;
            border-radius: 0.25em;
            box-shadow: inset 0 0 0.5em 0 var(--clr-neonblue),
                0 0 0.5em 0 var(--clr-neonblue);


        }

        #frozenvideo::before {
            pointer-events: none;
            content: '';
            position: absolute;
            background: var(--clr-neonblue);
            top: 55%;
            width: 50%;
            height: 100%;
            left: 20em;

            transform: perspective(2.5em) rotateX(40deg) scale(1, 0.45);
            transition: opacity 200ms linear;
            filter: blur(20em);
            opacity: 0.4;
        }

        #frozenvideo::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            box-shadow: 0 0 2em 0.5em var(--clr-neonblue);
            opacity: 0;
            transition: opacity 200ms linear;

            text-shadow: 0 0 0.5em hsl(0, 0%, 100%, 0.2),
                0 0 0.5em currentColor;
            z-index: -1;

        }

        #frozenvideo:hover::after {
            opacity: 1;
        }

        #frozenvideo:hover::before {
            opacity: 1;
        }

        .nebula {
            background: var(--clr-neonblue);
            width: 50%;
            height: 100%;
            z-index: -1;
            filter: blur(20em);
            opacity: 1;
        }

        #NebPosOne {
            top: -10vh;
            left: 30vw;
            position: absolute;
            background: hsl(263, 95%, 59%);
            display: none;
        }

        #NebPosTwo {
            top: -10vh;
            left: -20vw;
            position: absolute;
            display: none;
            background: hsl(263, 95%, 59%);
        }

        #NebPosThree {
            top: 10vh;
            left: 30vw;
            position: absolute;
            display: none;

        }

        #NebPosFour {
            top: 15vh;
            left: 20vw;
            position: absolute;
            display: none;
        }

        #NebPosFive {
            top: 15vh;
            left: 10vw;
            position: absolute;
            display: none;
            background: hsl(263, 95%, 59%);
        }

        #NebPosSix {
            top: -10vh;
            left: 5vw;
            position: absolute;
            display: none;

        }

        #NebPosSeven {
            top: 10vh;
            left: -15vw;
            position: absolute;
            display: none;
        }

        #Rainbow-Room {
            background: linear-gradient(to top right, hsl(34, 84%, 54%)5%, hsl(0, 94%, 43%, 0.822)30%, hsl(54, 85%, 46%)80%);
            top: 500vh;
        }

        #relaxationtext {
            opacity: 1;
            color: white;
            text-align: center;
            margin-top: 40vh;
            font-size: 3rem;

        }

        #InfoText {
            margin-top: 20vh;
            position: absolute;
            text-align: center;
            width: 30vw;
            left: 35vw;

        }

        #InfoTextP {
            width: 30vh;

        }

        #Profilbild {
            position: absolute;
            width: 20vw;
            top: 40vh;
            right: 2vw;
        }

        #ProfilbildTwo {
            position: absolute;
            width: 10vw;
            top: 7vw;
            left: 2vw;
        }

        #me {
            position: absolute;
            top: 40vh;
            right: 22.5vw;
            font-style: italic;
        }

        #mewith {
            position: absolute;

            top: 7vw;
            left: 12.5vw;
            font-style: italic;
        }

        #quote {
            position: absolute;
            bottom: 20vh;
            left: 8vw;
            width: 20vw;
        }

        #myarrow {
            position: absolute;
            bottom: 32vh;
            left: 26vw;
            transform: perspective(1em) rotateZ(135deg) scale(1, 1);
        }

        #myquote {
            position: absolute;
            bottom: 33vh;
            left: 25vw;
            width: 8vw;
        }

        #hobbiesheadline {
            margin-bottom: 10vw;
        }

        #relaxbutton {
            border: none;
            background-color: rgba(217, 197, 18, 0.226);
            background: opacity 0.6;
            font-family: 'Orbitron';
            font-size: 1rem;

        }

        .backtotopdiv {
            position: absolute;
            bottom: 1vh;
            left: 1vh;

        }

        #backtotopbutton {
            font-size: 2rem;
            font-family: "Orbitron";
            background: none;
            color: var(--clr-neon);
            border-color: var(--clr-neon);
            border-radius: 0.25em;
            text-decoration: none;
            border: 0.125em var(--clr-neon) solid;
            padding: 0 1em 0 1em;
        }

        #backtotopbutton:hover {
            box-shadow: inset 0 0 0.5em 0 var(--clr-neon),
                0 0 0.5em 0 var(--clr-neon);
            text-shadow:
                0 0 0.125em hsl(0 0% 100% / 0.2),
                0 0 0.25em currentColor;
        }