@font-face {
            font-family: "UniHelvetica";
            src: url("18_Uni Homepage Helvetica.woff") format("woff");
            font-weight: normal;
            font-style: normal;
        }

        body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
            background: #00275B;
        }

        .frame {
            aspect-ratio: 4 / 3;
            width: 100vw;
            height: 100vh;
            max-width: calc(100vh * (1.414 / 1));
            max-height: calc(100vw * (1 / 1.414));
            background: #000329;
            display: flex;
            overflow: hidden;
            justify-content: center;
            align-items: flex-start;
            position: relative;
        }

        .cont {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 91%;
            height: 94%;
            z-index: 1;
            overflow: hidden;
        }

        .banner {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 12%;
        }

        .main {
            position: absolute;
            top: 12%;
            left: 0;
            width: 100%;
            height: 55.5%;
            background: #00275B;
            z-index: -1;
        }

        .highlights {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 32.5%;
            z-index: -1;
        }

        .strip {
            position: absolute;
            top: 9%;
            left: 0;
            width: 100%;
            height: 4.2%;
            filter: drop-shadow(0 5px 3px rgba(0, 0, 0, 0.507));
            overflow: hidden;
        }

        .overlay-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #0068A7;
            font-family: "UniHelvetica", sans-serif;
            font-size: 0.9rem;
            text-align: center;
            width: 100%;
            z-index: 1;
        }

        .overlay-text ul {
            display: flex;
            justify-content: space-between;
            list-style-type: none;
            padding: 0 6%;
            line-height: 3;
        }

        .overlay-text li {
            opacity: 0;
            transform: translateY(-40px);
            color: white;
            transition: opacity 0.1s ease-out,
                transform 0.2s cubic-bezier(0.16, 1.9, 0.38, 1.05),
                color 0.1s ease-in-out 0.1s;

        }

        .overlay-text li.visible {
            opacity: 1;
            transform: translateY(0);
            color: #0068A7;
        }

        .overlay-text li span {
            display: inline-block;
            cursor: pointer;
        }

        .overlay-text li:hover span {
            animation: hoverBounce 0.4s ease-out forwards;
        }

        .overlay-text li span:not(:hover) {
            animation: settle 0.35s ease-in forwards;
        }

        .sidemenu {
            position: absolute;
            top: 8%;
            right: 0;
            width: 21%;
            height: 63%;
            z-index: 2;
            background: #ff0000;
            transform: translateX(100%);
            animation: slideIn 0.5s cubic-bezier(0.28, 0.71, 0.25, 1) forwards;
            animation-delay: 2.9s;
        }

        .border {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: fill;
            filter: drop-shadow(0 0 6px black) drop-shadow(0 0 6px black) drop-shadow(0 0 6px black);
            transform-origin: center;
            transform: scaleY(100.5%);
            pointer-events: none;
            z-index: 4;
        }

        .centerelement {
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            z-index: 1;
            top: 8%;
            left: 20.5%;
            width: 57.5%;
            height: 82.5%;
            background-color: #ff0000;
        }

        @keyframes hoverBounce {
            0% {
                transform: translateY(0);
            }

            25% {
                transform: translateY(-5px);
            }

            50% {
                transform: translateY(40px);
            }

            51% {
                transform: translateY(-40px);
            }

            75% {
                transform: translateY(6px);
            }

            100% {
                transform: translateY(0);
            }
        }

        @keyframes settle {
            0% {
                transform: translateY(0);
            }

            30% {
                transform: translateY(40px);
            }

            31% {
                transform: translateY(-40px);
            }

            70% {
                transform: translateY(5px);
            }

            100% {
                transform: translateY(0);
            }
        }

        @keyframes slideIn {
            to {
                transform: translateX(0);
            }
        }