* {
                                                                margin: 0;
                                                                padding: 0;
                                                                box-sizing: border-box;
                                                            }
                                                            
                                                            @font-face {
                                                                font-family: Roboto, Helvetica, sans-serif;
                                                                src: url(fonts/Roboto-Regular.ttf);
                                                                font-style: Roboto-regular;
                                                                font-weight: 400;
                                                            }
                                                            
                                                             :root {
                                                                --primary-color: #808080;
                                                                --secondary-color: #FFFFFF;
                                                                --tertiary-color: #aeaeae;
                                                                --title-color: #787878;
                                                                --primary-background-color: #FFFFFF;
                                                                --secondary-background-color: rgba(235, 235, 235, 0.1);
                                                            }
                                                            
                                                            body {
                                                                font-size: 15px;
                                                                widows: 100vw;
                                                                /* height: 100vh */
                                                            }
                                                            
                                                            .word-counter {
                                                                position: relative;
                                                                bottom: 10px;
                                                                padding-top: -130px;
                                                            }
                                                            
                                                            .school-container {
                                                                padding: 30px 30px 0;
                                                                text-align: center;
                                                                font-size: 18px;
                                                                color: rgba(43, 44, 78, 0.642);
                                                            }
                                                            
                                                            .main-content {
                                                                background-color: #F0F0F0;
                                                                display: flex;
                                                                flex-direction: column;
                                                                justify-content: center;
                                                                align-items: center;
                                                                padding: 50px 20px;
                                                                border-radius: 16px;
                                                                margin: 30px 20px 0px;
                                                            }
                                                            
                                                            #wordDisplay {
                                                                width: 90%;
                                                                min-height: 2.5rem;
                                                                background-color: white;
                                                                border: 2px solid rgba(43, 44, 78, 0.242);
                                                                border-radius: 1.5rem;
                                                                display: flex;
                                                                justify-content: center;
                                                                align-content: center;
                                                                align-items: center;
                                                                color: rgba(43, 44, 78, 0.842);
                                                                font-size: 1.2rem;
                                                                margin-bottom: 30px;
                                                            }
                                                            
                                                            #main h2 {
                                                                text-align: center;
                                                                font-family: Roboto-regular;
                                                                color: rgba(43, 44, 78, 0.442);
                                                                margin-bottom: 20px;
                                                            }
                                                            
                                                            .word-counter {
                                                                text-align: center;
                                                                font-size: 20px;
                                                                position: absolute;
                                                                top: 270px;
                                                                color: rgba(59, 62, 138, 0.542);
                                                            }
                                                            
                                                            #footer {
                                                                position: absolute;
                                                                bottom: 0;
                                                                left: 0;
                                                                width: 100%;
                                                                /* background-color: #F0F0F0; */
                                                            }
                                                            
                                                            .designer {
                                                                position: absolute;
                                                                bottom: 8px;
                                                                text-align: center;
                                                                width: 100%;
                                                            }
                                                            
                                                            .designer p {
                                                                margin: 0 auto;
                                                                color: #808080;
                                                            }
                                                            
                                                            .word-button {
                                                                width: 110px;
                                                                height: 40px;
                                                                background-color: rgba(43, 44, 78, 0.542);
                                                                color: white;
                                                                font-size: 0.8rem;
                                                                font-weight: bold;
                                                                padding: 8px 6px;
                                                                display: flex;
                                                                justify-content: center;
                                                                align-items: center;
                                                                border-radius: 20px;
                                                                margin-top: 50px;
                                                                margin-bottom: 30px;
                                                                box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.442);
                                                                transition: background-color 0.1s, box-shadow 0.5s, color 0.5s;
                                                                cursor: pointer;
                                                                z-index: 100;
                                                            }
                                                            
                                                            .word-button-container {
                                                                display: flex;
                                                                justify-content: center;
                                                                margin-bottom: 50px;
                                                            }
                                                            
                                                            #footer h5 {
                                                                font-size: 18px;
                                                                text-align: center;
                                                                margin-top: 10px;
                                                            }
                                                            
                                                            @media(max-width:500px) {
                                                                .footer-content {
                                                                    display: grid;
                                                                    grid-template-columns: 1fr;
                                                                    place-items: center;
                                                                    /* margin-top: 40px; */
                                                                }
                                                            }
                                                            
                                                            @media(min-width:500px) and (max-width:700px) {
                                                                .footer-content {
                                                                    display: grid;
                                                                    grid-template-columns: 1fr;
                                                                    place-items: center;
                                                                }
                                                            }
                                                            
                                                            .word-button:active {
                                                                background-color: #E0E0E0;
                                                                color: rgba(43, 44, 78, 0.842);
                                                                font-size: 0.8rem;
                                                                box-shadow: none;
                                                                transition: background-color 0.1s, box-shadow 0.5s, color 0.5s;
                                                            }
                                                            
                                                            @media(min-width:700px) and (max-width:900px) {
                                                                .footer-content {
                                                                    display: grid;
                                                                    grid-template-columns: 1fr;
                                                                    place-items: center;
                                                                }
                                                            }
                                                            
                                                            @media(min-width:900px) and (max-width:1200px) {
                                                                .footer-content {
                                                                    display: grid;
                                                                    grid-template-columns: 1fr 1fr;
                                                                    grid-template-rows: 2fr;
                                                                    place-items: center;
                                                                }
                                                                .word-button-container {
                                                                    display: grid;
                                                                    grid-template-rows: 1fr;
                                                                    justify-content: center;
                                                                    margin-bottom: 50px;
                                                                }
                                                            }
                                                            
                                                            @media(min-width:1200px) {
                                                                .footer-content {
                                                                    display: grid;
                                                                    grid-template-columns: 1fr 1fr;
                                                                    place-items: center;
                                                                }
                                                            }
                                                            
                                                            .category,
                                                            .word-bank,
                                                            .set-time,
                                                            .countdown {
                                                                position: relative;
                                                                margin: 6px 0;
                                                                display: flex;
                                                            }
                                                            
                                                            .category span,
                                                            .word-bank span,
                                                            .set-time span,
                                                            .countdown span {
                                                                color: #404040;
                                                                font-weight: 700;
                                                            }
                                                            
                                                            .category-display,
                                                            .word-bank-display,
                                                            .set-time-display,
                                                            .countdown-display {
                                                                display: inline-block;
                                                                width: 140px;
                                                                height: 30px;
                                                                text-align: center;
                                                                border: 1px solid black;
                                                            }
                                                            
                                                            .category-button-left {
                                                                width: 50px;
                                                                height: 28px;
                                                                margin-left: 4px;
                                                                text-align: center;
                                                                border: 1px solid black;
                                                                border-radius: 5px;
                                                                box-shadow: 0 2px rgba(43, 44, 78, 0.342), 0 -2px rgba(43, 44, 78, 0.342);
                                                                transition: all 0.15s ease-out;
                                                                cursor: pointer;
                                                            }
                                                            
                                                            .category-button-left:active {
                                                                margin-bottom: 0;
                                                                box-shadow: none;
                                                            }
                                                            
                                                            .category-button-right {
                                                                width: 50px;
                                                                height: 28px;
                                                                margin-left: 4px;
                                                                text-align: center;
                                                                border: 1px solid black;
                                                                border-radius: 5px;
                                                                box-shadow: 0 2px rgba(43, 44, 78, 0.342), 0 -2px rgba(43, 44, 78, 0.342);
                                                                transition: all 0.15s ease-out;
                                                                cursor: pointer;
                                                            }
                                                            
                                                            .category-button-right:active {
                                                                margin-bottom: 0;
                                                                box-shadow: none;
                                                            }
                                                            
                                                            .word-bank-reset {
                                                                width: 85px;
                                                                height: 28px;
                                                                text-align: center;
                                                                border: 1px solid black;
                                                                box-shadow: 0 2px rgba(43, 44, 78, 0.342), 0 -2px rgba(43, 44, 78, 0.342);
                                                                cursor: pointer;
                                                                margin: 0 2px 0px;
                                                                border-radius: 5px;
                                                                transition: all 0.15s ease-out;
                                                                cursor: pointer;
                                                            }
                                                            
                                                            .word-bank-reset:active {
                                                                margin-bottom: 0;
                                                                box-shadow: none;
                                                            }
                                                            
                                                            .category-display {
                                                                margin-left: 24px;
                                                            }
                                                            
                                                            .word-bank-display {
                                                                margin-left: 8px;
                                                            }
                                                            
                                                            .align-div {
                                                                display: grid;
                                                                place-items: center;
                                                            }
                                                            
                                                            .angle-left {
                                                                width: 30px;
                                                                fill: rgb(155, 155, 155);
                                                            }
                                                            
                                                            .angle-right {
                                                                width: 30px;
                                                                fill: rgb(155, 155, 155);
                                                            }
                                                            
                                                            .display {
                                                                display: none;
                                                            }