html,body{background-color:#333;margin:0;font-size:9pt;color:#000;font-family:Verdana,Arial,Helvetica,Roboto,sans-serif;line-height:135%}#outer-wrap{position:relative;max-width:1100px;margin:0 auto;background-color:#888}header{background:url("/static/images/bgggg.jpg") no-repeat center center;background-size:100% 100%;height:150px;display:flex;flex-direction:column;justify-content:flex-end}header h1{margin:0;padding:10px;font-size:38px;text-align:center;color:white;font-weight:bold;letter-spacing:22px;-webkit-text-stroke:1.5px black;word-break:break-word}nav#topnav{display:flex;justify-content:center;gap:20px;padding:20px;background:rgba(0,40,69,1)}nav#topnav a{text-decoration:none;font-size:8pt;color:white}nav#topnav a:hover{background-color:cyan;border-radius:0px;transition:background-color .3s;color:black}#intro1{position:relative;overflow:hidden;color:#fff}#blurbg{position:absolute;top:0;left:0;right:0;bottom:0;background-position:center;background-size:cover;filter:blur(0px)}#intro3{position:relative;background-color:rgba(0,70,99,.75);padding:5px 2%;text-align:center}.boxwhite{position:relative;padding:30px;text-align:center;overflow:hidden;min-height:400px;background-color:#000}.boxwhite-canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;border-radius:0;background:0 0}.boxwhite>*{position:relative;z-index:1}h3.boxwhite-title{color:#fff!important;margin-bottom:100px;margin-top:-350px}.boxwhite .grid-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;margin-top:-60px;padding:10px 0 0 0;animation:fadeIn .8s ease-in}.boxwhite .grid-container .grid-item{color:#0f0!important;background-color:rgba(30,30,30,.1);border-radius:5px!important;box-shadow:none!important;border:1px solid gray;padding:2px;text-align:center;transition:transform .3s ease,box-shadow .3s ease;opacity:0;margin:10px;animation:slideUp .8s ease forwards,rainbowBackground 10s linear infinite}.boxwhite .grid-container .grid-item:first-child{animation-delay:.7s}.boxwhite .grid-container .grid-item:nth-child(2){animation-delay:.8s}.boxwhite .grid-container .grid-item:nth-child(3){animation-delay:.9s}.boxwhite .grid-container .grid-item:hover{background-color:rgba(255,255,255,.7)!important;color:#fff!important;transform:scale(1.05);box-shadow:0 6px 16px rgba(0,64,93,.3);border:2px solid #fff}.boxwhite .grid-container .grid-item a,.boxwhite .grid-container .grid-item h3,.boxwhite .grid-container .grid-item p{color:inherit!important;text-decoration:none;display:block}.boxwhite .grid-container .grid-item:hover a,.boxwhite .grid-container .grid-item:hover h3,.boxwhite .grid-container .grid-item:hover p{color:#000!important}@keyframes rainbowBackground{0%{background-color:rgba(255,0,0,.2)}14%{background-color:rgba(255,127,0,.2)}28%{background-color:rgba(255,255,0,.2)}42%{background-color:rgba(0,255,0,.2)}57%{background-color:rgba(0,255,255,.2)}71%{background-color:rgba(0,0,255,.2)}85%{background-color:rgba(139,0,255,.2)}100%{background-color:rgba(255,0,0,.2)}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.typing{font-size:1.1rem;font-family:Roboto,sans-serif;white-space:pre-wrap;margin-top:30px;margin-bottom:30px}.cursor{display:inline-block;width:2px;background:#000;animation:blink .8s infinite;vertical-align:bottom}@keyframes blink{0%,50%{opacity:1}100%,50.01%{opacity:0}}.btn{cursor:pointer;background-color:rgba(12,12,12,.7);color:white!important;padding:2px 8px;border-radius:5px;text-decoration:none;font-size:9pt;display:inline-block;margin-top:3px;font-weight:bold;transition:background-color .3s}.btn:hover{background-color:cyan;color:#000!important}footer{background:rgba(0,40,69,1);padding:50px;font-size:8pt;text-align:center;color:#668899}footer a{margin:0 10px;text-decoration:none;color:#668899;font-family:Courier New,sans-serif}footer a:hover{color:white}.modal{display:none;position:fixed;z-index:9999;bottom:80px;left:50%;transform:translateX(-50%);width:100%;max-width:900px;pointer-events:auto}.modal.show{display:block}.modal-content{background:rgba(50,50,50,.9);border:1px solid #0f0;border-radius:8px;padding:20px;color:#fff;text-align:center;box-shadow:0 6px 20px rgba(0,64,93,.4);width:90%;max-width:600px;margin:0 auto;position:relative;font-size:11px}.modal-content h3{margin-top:0}.modal-content .close{position:absolute;top:10px;right:15px;font-size:1.5rem;cursor:pointer}.modal-content .close:hover{color:#000}@media (max-width: 480px) { html, body { font-size: 9pt; } header { height: auto; background-size: contain; background-position: top center; background-repeat: no-repeat; } header h1 { font-size: 17pt; letter-spacing: 8px; } nav#topnav { flex-direction: column; gap: 10px; padding: 10px;} .boxwhite { padding: 15px; } footer { padding: 15px; font-size: 7pt; } h3.boxwhite-title {margin-top: -370px;} #authModal .modal-content { max-width: 95%; } }
