.nexter { float: left; display: inline; width: 49%; margin-bottom: 10vh; } .picture_placeHolder { width: 100%; } .video { width: 100%; } .video_placeHolder { width: 100%; margin-top: 10px; } .box { display: inline-block; height: 45px; } .box select { background-color: #248f99; color: white; padding: 10px; width: 250px; border: none; font-size: 18px; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2); -webkit-appearance: button; appearance: button; outline: none; border-radius: 5px; transition: transform 0.3s ease, box-shadow 0.3s ease; /* Ensure smooth transition */ } .box:hover select { transform: translateY(-4px); /* Lift the button more on hover */ box-shadow: 0 6px 8px rgba(0, 0, 0, 1); /* Increase shadow on hover */ } .box:active select { transform: translateY(0); /* Remove lift on click */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Reduce shadow on click */ } .box select option { padding: 30px; } .arrow-icon { z-index: 100; height: 3em; width: 2.8em; padding: 0.5em; margin: 1em auto; cursor: pointer; padding-top: 1em; border-radius: 4px; bottom: 45px; /* Adjust as needed to position below the table */ left: 72%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; position: fixed; transition: transform 0.3s ease, box-shadow 0.3s ease; /* Ensure smooth transition */ } .arrow-icon:hover { transform: translateX(-50%) translateY(-10px); /* Move the arrow up on hover */ } .arrow-icon:active { transform: translateX(-50%) translateY(0); /* Remove lift on click */ } .left-bar, .right-bar { z-index: 100; position: absolute; background-color: transparent; width: 40px; height: 10px; display: block; border-radius: 2px; } .left-bar { top: 50%; left: 0; transform: rotate(35deg); } .right-bar { top: 50%; left: 26px; transform: rotate(-35deg); } .left-bar:after, .right-bar:after { content: ""; background-color: white; width: 40px; height: 10px; display: block; border-radius: 6px 10px 10px 6px; transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 0.8); z-index: -1; } .right-bar:after { border-radius: 10px 6px 6px 10px; } .open .left-bar:after { transform-origin: center center; transform: rotate(-70deg); } .open .right-bar:after { transform-origin: center center; transform: rotate(70deg); } #name_project { animation: glitch 3s steps(100) infinite; color: #151515; font-size: 6em; text-align: center; text-transform: uppercase; } @media (min-width: 480px) { #name_project { font-size: 2em; } } @keyframes glitch { 0% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);} 1% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);} 2% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);} 3% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);} 4% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);} 5% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} 6% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} 7% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} 8% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} 9% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} 10% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} 11% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);} 12% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);} 13% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);} 14% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);} 15% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);} 16% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);} 17% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);} 18% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);} 19% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);} 20% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);} 21% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);} 22% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);} 23% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);} 24% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);} 25% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);} 26% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0.5px);} 27% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0.5px);} 28% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);} 29% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);} 30% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);} 31% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);} 32% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);} 33% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);} 34% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);} 35% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0.5px);} 36% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0.5px);} 37% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0.5px);} 38% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);} 39% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);} 40% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);} 41% { text-shadow: 45px 0 0 #0c33f5, -45px 0 0 lime; filter: blur(0);} 42% { text-shadow: 0 0 0 #0c33f5, 0 0 0 lime; filter: blur(0);} 43% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);} 44% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);} 45% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);} 46% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);} 47% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0.5px);} 48% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);} 49% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);} 50% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);} 51% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);} 52% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);} 53% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);} 54% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);} 55% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0.5px);} 56% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0.5px);} 57% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0.5px);} 58% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} 59% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} 60% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} 61% { text-shadow: 30px 0 0 red, -30px 0 0 lime; filter: blur(0);} 62% { text-shadow: 0 0 0 red, 0 0 0 lime; filter: blur(0);} 63% { text-shadow: 1px 0 0 red, -1px 0 0 #0c33f5; filter: blur(0);} 64% { text-shadow: 1px 0 0 red, -1px 0 0 #0c33f5; filter: blur(0);} 65% { text-shadow: 1px 0 0 red, -1px 0 0 #0c33f5; filter: blur(0);} 66% { text-shadow: 1px 0 0 red, -1px 0 0 #0c33f5; filter: blur(0.5px);} 67% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0.5px);} 68% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} 69% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} 70% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} 71% { text-shadow: 50px 0 0 red, -50px 0 0 #0c33f5; filter: blur(0);} 72% { text-shadow: 0 0 0 red, 0 0 0 #0c33f5; filter: blur(0);} 73% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);} 74% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);} 75% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);} 76% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);} 77% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} 78% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} 79% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} 80% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} 81% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);} 82% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);} 83% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);} 84% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);} 85% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);} 86% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0.5px);} 87% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0.5px);} 88% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);} 89% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);} 90% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);} 91% { text-shadow: 60px 0 0 lime, -60px 0 0 #0c33f5; filter: blur(0);} 92% { text-shadow: 0 0 0 lime, 0 0 0 #0c33f5; filter: blur(0);} 92% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);} 93% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);} 94% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);} 95% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);} 96% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);} 97% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);} 98% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);} 99% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);} 100% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);} }