body { 
    margin: 0;
    overflow: hidden;
}

@keyframes grabbelhand {
    0% {
        cursor: url("../cursor/grabbelhand/grabbelhand_1.png") 65 32, auto; 
    }
    20% {
        cursor: url("../cursor/grabbelhand/grabbelhand_2.png") 65 32, auto; 
    }
    40% {
        cursor: url("../cursor/grabbelhand/grabbelhand_3.png") 65 32, auto; 
    }
    60% {
        cursor: url("../cursor/grabbelhand/grabbelhand_4.png") 65 32, auto; 
    }
    80% {
        cursor: url("../cursor/grabbelhand/grabbelhand_5.png") 65 32, auto; 
    }
    100% {
        cursor: url("../cursor/grabbelhand/grabbelhand_1.png") 65 32, auto; 
    }
}

@keyframes zeigehand_links {
    0% {
        cursor: url("../cursor/zeigehand_links/zeigehand_1.png") 38 45, auto; 
    }
    20% {
        cursor: url("../cursor/zeigehand_links/zeigehand_2.png") 38 45, auto; 
    }
    40% {
        cursor: url("../cursor/zeigehand_links/zeigehand_3.png") 38 45, auto; 
    }
    60% {
        cursor: url("../cursor/zeigehand_links/zeigehand_4.png") 38 45, auto; 
    }
    80% {
        cursor: url("../cursor/zeigehand_links/zeigehand_5.png") 38 45, auto; 
    }
    100% {
        cursor: url("../cursor/zeigehand_links/zeigehand_1.png") 38 45, auto; 
    }
}

@keyframes zeigehand_rechts {
    0% {
        cursor: url("../cursor/zeigehand_rechts/zeigehand_1.png") 90 45, auto; 
    }
    20% {
        cursor: url("../cursor/zeigehand_rechts/zeigehand_2.png") 90 45, auto; 
    }
    40% {
        cursor: url("../cursor/zeigehand_rechts/zeigehand_3.png") 90 45, auto; 
    }
    60% {
        cursor: url("../cursor/zeigehand_rechts/zeigehand_4.png") 90 45, auto; 
    }
    80% {
        cursor: url("../cursor/zeigehand_rechts/zeigehand_5.png") 90 45, auto; 
    }
    100% {
        cursor: url("../cursor/zeigehand_rechts/zeigehand_1.png") 90 45, auto; 
    }
}

#title {
    position: relative;
    border: red 10px;
    width: calc(100% - 20px);
    text-align: center;
    height: 80px;
    border-style: solid dotted;
    background: black;
    margin: 0;
    z-index: 11;
}

h1 {
    font-size: 50px;
    transform: scale(4, 1);
    color: red;
}

h3 {
    font-size: 40px;
    margin: 0;
    font-weight: normal;
}

#taskbar {
    border: solid red 5px;
    height: 60px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    transition: 0.3s;
}

a {
    border: solid black 1px;
    text-align: center;
    text-decoration: none;
    color: black;
    z-index: 10;
    animation: grabbelhand 0.25s linear infinite;
    overflow: hidden;
    transform: scale(1, 1);
}

a:hover {
    transform: scale(1, 2);
    transform-origin: top center;
    transition: 0.3s;
    transition-delay: 0.1s;
}

a:hover h3 {
    transform: scale(3, 0.5);
    font-size: 60px;  
    margin-top: -10px;
}

#about_me {
    background-color: blue;
}

#taskbar:has(#about_me:hover)  {
    grid-template-columns: 2fr 1fr 1fr 1fr;
}

#booking {
    background-color: hotpink;
}

#taskbar:has(#booking:hover)  {
    grid-template-columns: 1fr 2fr 1fr 1fr;
}

#portfolio {
   background-color: #a1fa07;
}

#taskbar:has(#portfolio:hover)  {
    grid-template-columns: 1fr 1fr 2fr 1fr;
}

#aftercare {
    background-color: yellow;
}

#taskbar:has(#aftercare:hover)  {
    grid-template-columns: 1fr 1fr 1fr 2fr;
}

#space {
    perspective: 300px;
    transform-style: preserve-3d;
    perspective-origin: center;
    height: 100vh;
    width: 100vw; 
    margin-top: -100px;
    pointer-events: none;
    transition: 0.4s cubic-bezier(1,-0.2,0,1.2);
}

#room { 
    transform-style: preserve-3d;
    perspective-origin: center;
    height: 100vh;
    width: 100vw;
    /*animation: rotate 30s linear infinite;*/
    pointer-events: none;
    transition: 0.4s cubic-bezier(.76,-0.06,.43,.39);
}

.zoom {
    perspective: 3000px !important;   
}

@keyframes rotate {
    0% {    transform: rotateY(0deg)
    }
    100% { transform: rotateY(360deg)
    }
}

.face {
    position: absolute; 
    width: 100vw;
    height: 100vh;
    pointer-events: auto;
    font-size: 20vw;
    text-align: center;
    backface-visibility: hidden;
    user-select: none; /* Standard syntax */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
}

.wall {
    background: url("https://img.myredro.de/fototapeten/abgerissene-natuerliche-wand-700-184524927.jpg");
    background-size: cover;
    width: 100vw;
    height: 100vh;
}

#front {
    transform: translateZ(-50vw);
}

#left {
     transform: rotateY(90deg) translateZ(-50vw); 
}

#right {
    transform: rotateY(-90deg) translateZ(-50vw);    
}

#back {
    transform: rotateY(180deg) translateZ(-50vw);    
}

#ceiling {
    transform: rotateX(-90deg) translateZ(-100vh);
    background: url("https://scitechdaily.com/images/Expanding-Hole-Optical-Illusion.jpg");
    height: 100vw;
    background-size: 100% 100%;
}

#floor {
    transform: rotateX(90deg);
    background: url("https://scitechdaily.com/images/Expanding-Hole-Optical-Illusion.jpg");
    height: 100vw;
    background-size: 100% 100%;
}

.grabbelhand {
    animation: grabbelhand 0.25s linear infinite;
}

.zeiger_links {
   animation: zeigehand_links 0.25s linear infinite; 
}

.zeiger_rechts {
   animation: zeigehand_rechts 0.25s linear infinite; 
}