html, body {
            margin: 0;
            width: 100%;
        }

        body {
            display: flex;
            align-items: center;
            flex-direction: column;
            min-height: 100vh;
            background-color: white;
        }

        @font-face {
            font-family: Karrik;
            src: url(fonts/Karrik-Regular.ttf);
        }
        @font-face {
            font-family: Flor;
            src: url(fonts/FlorDeRuina-Germen.ttf);
        }
        @font-face {
            font-family: Louise;
            src: url(fonts/Louise-Regular.ttf);
        }

        p {
            font-size: larger;
            font-family: Karrik;
        }

        #glcanvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            pointer-events: none;
            
        }

        #header {
            width: 100%;
            padding: 20px 5%; 
            box-sizing: border-box; 
            display: flex;
            justify-content: space-between; 
            align-items: center; 
        }

        .title {
            font-family: Louise;
            font-size: xxx-large;
            font-weight: bold;
        }

        .nav-links {
            width: 70%; 
            display: flex;
            justify-content: space-evenly; 
        }

        .nav-links a {
            text-decoration: none;
            color: black;
            font-family: Flor;
            letter-spacing: 0.1rem;
            font-size: xx-large;
            font-weight: bold;
        }

        #content {
            width: 100%;
            display: flex;
            flex-direction: row;
            gap: 20px;
            box-sizing: border-box;
            padding: 100px;
            flex-grow: 1;
        }

        img {
            width: 100%;
            display: block;
        }

        #boxleft {
            width: 50%;
            display: flex;
            justify-content: right;
            text-align: justify;
            overflow-wrap: break-word;
        }

        #boxright {
            width: 30%;
            justify-content: center; 
            box-sizing: border-box; 
            text-align: left;
            overflow-wrap: break-word;
        }

        .box {
            width: 100%;
            height: 100%;
        }

        .coolaf {
            margin-top: 0px;
            margin-bottom: 50px;
            text-align: justify;
            font-family: Karrik;
            font-size: 3rem;
            letter-spacing: 0.15rem;
            text-transform: uppercase;
            color: #000000;
            text-shadow: -4px 4px #ef3550,
               -8px 8px #f48fb1,
               -12px 12px #7e57c2,
               -16px 16px #2196f3,
               -20px 20px #26c6da,
               -24px 24px #43a047,
               -28px 28px #eeff41,
               -32px 32px #f9a825,
               -36px 36px #ff5722;
        }

      
        #footer {
            width: 100%;
            padding: 20px 5%;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: auto;
        }

        .footer-left p {
            margin: 0;
            font-size: larger;
            font-family: Flor;
        }

        .footer-right {
            display: flex;
            gap: 15px;
            align-items: center;
        }

        .footer-right img {
            width: 32px;
            height: 32px;
        }

        @media (max-width: 768px) {
            #header {
                flex-direction: column;
                gap: 15px;
                text-align: center;
            }

            .nav-links {
                width: 100%;
                flex-wrap: wrap;
                gap: 10px;
                justify-content: center;
            }

            .nav-links a {
                font-size: 1.25rem;
            }

            .title {
                font-size: 2.2rem;
            }

            #content {
                flex-direction: column;
                padding: 20px;
                gap: 30px;
            }

            #boxleft, #boxright {
                width: 100%;
            }

            a :link{
                text-decoration: wavy;
                color: red;
            }

            .coolaf {
                font-size: 1.8rem;
                text-shadow: -2px 2px #ef3550,
                             -4px 4px #f48fb1,
                             -6px 6px #7e57c2,
                             -8px 8px #2196f3,
                             -10px 10px #26c6da,
                             -12px 12px #43a047,
                             -14px 14px #eeff41,
                             -16px 16px #f9a825,
                             -18px 18px #ff5722;
            }

            #footer {
                flex-direction: column;
                gap: 15px;
                text-align: center;
            }
        }