:root { /* bg colors */ --bg: rgb(198, 240, 144); /* color */ --hdr: rgb(241, 231, 138); /*

color */ --hdrbc: rgb(18, 131, 46); /*

border color */ --divbg: linear-gradient( to bottom, rgb(138, 247, 111), rgb(197, 233, 97) ); /*

background */ --divbc: rgb(18, 131, 46); /*

border color */ --text: rgb(0, 0, 0); /* text color */ /* highlight colors */ --solly: rgb(234, 153, 153); --demo: rgb(164, 194, 244); --med: rgb(255, 217, 102); --xplosive: rgb(246, 178, 107); --multi: rgb(147, 196, 125); --txtshadow: 5px 5px 15px rgba(0, 0, 0, 0.3); /* text shadow */ --anchorcolor: purple; /* color */ /* button colors */ --btncolor: rgb(56, 117, 37); --btnhover: rgb(48, 105, 31); --btnactive: rgb(40, 93, 25); --btncolorghost: rgba(56, 117, 37, 0.5); --btnhoverghost: rgba(48, 105, 31, 0.75); --preloader: rgb(255, 255, 255); /* preloader background color */ --themetogglebg: rgb(37, 35, 34); --loadingtxt: rgb(204, 204, 204); --landing-bg: url("images/BANNER_BG_light.webp"); transition: all 0.3s ease; } .darkmode { /* bg colors */ --bg: rgb(37, 35, 34); /* color */ --hdr: rgb(37, 35, 34); /*

color */ --hdrbc: rgb(219, 209, 204); /*

border color */ --divbg: linear-gradient( to bottom, rgb(63, 60, 60), rgb(88, 87, 87) ); /*

background */ --divbc: rgb(121, 119, 117); /*

border color */ --text: white; /* text color */ /* highlight colors */ --solly: rgb(174, 13, 13); --demo: rgb(63, 116, 204); --med: rgb(245, 194, 51); --xplosive: rgb(204, 149, 93); --multi: rgb(97, 161, 69); --txtshadow: 5px 5px 15px rgba(0, 0, 0, 1); /* text shadow */ --anchorcolor: violet; /* color */ /* button colors */ --btncolor: rgb(37, 35, 34); --btnhover: rgb(15, 15, 14); --btnactive: rgb(0, 0, 0); --btncolorghost: rgba(37, 35, 34, 0.5); --btnhoverghost: rgba(15, 15, 14, 0.75); --preloader: rgb(26, 26, 26); /* preloader background color */ --themetogglebg: rgb(198, 240, 144); --loadingtxt: rgb(51, 51, 51); --landing-bg: url("images/BANNER_BG.webp"); transition: all 0.3s ease; } * { font-family: "Poppins", sans-serif; color: var(--text); text-shadow: var(--txtshadow); } #preloader { background: var(--preloader); height: 100%; width: 100%; position: fixed; z-index: 110; top: 0; left: 0; border-radius: 0px; border-width: 0px; border-color: none; border-style: none; margin: 0px; padding: 0px; } h1 { font-size: 2.5rem; } h2 { font-size: 1.875rem; font-family: "Bebas Neue", sans-serif; text-align: center; } #GoToTop { display: flex; justify-content: center; } #menu { width: 15vw; float: left; position: fixed; left: 2.5vw; box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); border-width: 5px; border-style: groove; } #myBtn { visibility: hidden; opacity: 0; position: fixed; top: -10px; width: 20vw; min-width: 200px; height: 10vh; min-height: 100px; margin: auto; background-color: var(--btncolorghost); z-index: 100; box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); border-width: 5px; border-radius: 5px; border-color: rgb(221, 236, 196); border-style: inset; } #myBtn:hover { background-color: var(--btnhoverghost) } #myBtn img { width: 40px; height: 40px; object-fit: contain; } #myBtn.show { opacity: 1; visibility: visible; transform: translateY(0); } div { border-radius: 10px; border-width: 5px; border-color: var(--divbc); border-style: none; margin-top: 10px; padding: 5px; background-image: var(--divbg); } body { background-color: var(--bg); background-image: var(--landing-bg); background-position: top; background-size: 100vw; background-repeat: no-repeat; transition: all ease-in-out 0.3s; padding: 0; margin: 0; background-color: var(--bg); } #mainstuff { width: 50%; margin: auto; padding: 2.5%; box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); border-style: groove; border-radius: 10px; padding-bottom: 0px; } #mainstuff div { box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); } header { background-color: var(--hdr); text-align: center; color: var(--hdrtext); border-radius: 15px; border-width: 5px; border-color: var(--hdrbc); border-style: groove; } .ptlogo { height: 30%; width: 30%; margin-left: 3%; margin-right: 3%; } #theButton { display: flex; justify-content: center; margin-top: 45px; } #theButtoned { display: flex; justify-content: center; margin-top: 20px; } button { width: 100%; padding: 10px; background-color: var(--btncolor); color: rgb(221, 236, 196); border-width: 5px; border-radius: 5px; border-color: rgb(221, 236, 196); border-style: inset; font-family: inherit; font-size: 1.25rem; font-weight: bold; transition: all ease-in-out 0.3s; overflow: hidden; } button:hover { background-color: var(--btnhover); cursor: pointer; transform: scale(1.025); } button:active { background-color: var(--btnactive); transform: scale(1); transition: transform 0.3s ease; } footer { margin-top: 45px; text-align: center; background-color: var(--bg); } .tiny { width: 30vw; height: auto; } #bait { width: 30%; display: flex; justify-content: center; margin: 10px auto; } /* code by sashalegeughsse */ video { display: flex; justify-content: center; margin: 10px auto; width: 100%; height: auto; max-width: 800px; cursor: pointer; box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); transition: all ease-in-out 0.3s; } video:hover { transform: scale(1.05); } video:active { transform: scale(0.95); } .container { display: flex; justify-content: center; } iframe { aspect-ratio: 16 / 9; width: 100% !important; height: auto; box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); } #theme-switch { width: 50px; height: 50px; padding: 0; border-radius: 50%; background-color: transparent; display: flex; justify-content: center; align-items: center; position: fixed; top: 20px; right: 20px; } #theme-switch img:last-child { display: none; } .darkmode #theme-switch img:first-child { display: none; } .darkmode #theme-switch img:last-child { display: block; } a { color: var(--anchorcolor); font-family: inherit; } .italic { font-style: italic; font-size: 1rem; } .bold { font-weight: bold; font-size: 1rem; } .calloutImg { height: 100%; width: 100%; border-radius: 5px; } .miniExample { height: 150px; width: auto; border-radius: 5px; margin-top: 10px; margin-right: 10px; } .pdf { display: block; margin: 10px auto; width: 100%; height: 25vw; max-width: 800px; box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); } .download { display: block; margin: 10px auto; width: auto; padding: 10px; background-color: rgb(56, 117, 37); color: rgb(221, 236, 196); border-width: 5px; border-radius: 5px; border-color: rgb(221, 236, 196); border-style: inset; font-weight: bold; text-align: center; } .banner { width: 50%; height: auto; display: block; margin: auto; margin-top: 50px; margin-bottom: 50px; } .spin { transition: all ease-in-out 0.5s; } .spin:hover { transform: rotate(15deg) scale(1.05); } footer { text-align: center; background-color: var(--divbc); padding: 2px; display: flex; justify-content: center; align-items: center; font-weight: bold; transition: all ease-in-out 0.3s; color: rgb(221, 236, 196); } .footerLink { height: 75px; vertical-align: middle; margin-right: 10px; } p { font-size: 1rem; text-align: justify; } html { font-size: 16px; } .loading { color: var(--text); align-items: center; justify-content: center; display: flex; gap: 5px; font-style: italic, bold; } .loading-item { position: relative; animation: bounce 0.5s ease infinite alternate; } .loading-item:nth-child(2) { animation-delay: 0.1s; } .loading-item:nth-child(3) { animation-delay: 0.2s; } .loading-item:nth-child(4) { animation-delay: 0.3s; } .loading-item:nth-child(5) { animation-delay: 0.4s; } .loading-item:nth-child(6) { animation-delay: 0.5s; } .loading-item:nth-child(7) { animation-delay: 0.6s; } .loading-item:nth-child(8) { animation-delay: 0.7s; } .loading-item:nth-child(9) { animation-delay: 0.8s; } .loading-item:nth-child(10) { animation-delay: 0.9s; } @keyframes bounce { 100% { transform: translateY(-20px); } } span { padding-top: 20px; font-size: 50px; font-family: "Montserrat", sans-serif; } /* Hide scrollbar for Chrome, Safari, and Edge html::-webkit-scrollbar { display: none; } /* Hide scrollbar for Firefox html { scrollbar-width: none; } /* Hide scrollbar for IE (who uses this lol) html { -ms-overflow-style: none; }*/ .ghostbtn { padding: 0; border: none; background: none; } .classCard { position: relative; display: flex; flex-direction: column; align-items: center; width: auto; max-width: 30%; margin-top: 0; padding: 0; background: transparent; border: none; } .classimg { width: auto; max-width: 100%; height: auto; display: block; box-shadow: none; } .classDescription { visibility: hidden; opacity: 0; position: absolute; top: calc(100% + 10px); left: 0; width: 200%; padding: 10px; max-height: 475px; z-index: 10; background-color: var(--divbg); border-width: 5px; border-radius: 5px; border-color: var(--divbc); border-style: inset; box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); transition: all ease-in-out 0.3s; } .classimg:hover + .classDescription { opacity: 1; visibility: visible; transition: all ease-in-out 0.3s; } .classDescription:hover { opacity: 1; visibility: visible; transition: all ease-in-out 0.3s; } .descImg { max-width: 200px; max-height: auto; display: block; margin: auto; } #asiamedic { margin-bottom: 10px }