.animated-text.isNotMobile{font-size:18px;font-weight:600}.animated-text.isMobile{font-size:15px;font-weight:600}.animated-text span{position:relative}.animated-text span:before{content:"Technician";color:orange;animation:words 20s infinite}.animated-text.dark-mode span:after{content:"";position:absolute;width:calc(100% + 8px);height:100%;background-color:#111827;right:-8px;animation:cursor .8s infinite,typing 25s steps(14) infinite}.animated-text.light-mode span:after{content:"";position:absolute;width:calc(100% + 8px);height:100%;background-color:#e5e5e5;right:-8px;animation:cursor .8s infinite,typing 25s steps(14) infinite}@keyframes cursor{to{border-left:2px solid #ff7f5000}}@keyframes words{0%,20%{content:"Administrative"}41%,60%{content:"Teacher"}}@keyframes typing{10%,15%,30%,35%,50%,55%,70%,75%,90%,95%{width:0}5%,20%,25%,40%,45%,60%,65%,80%,85%{width:calc(100% + 8px)}}.header-text{position:relative;font-size:18px;z-index:2}.header-text:first-letter{color:orange;position:relative;font-size:1.4em;z-index:1}.header-text:before{content:"";position:absolute;top:.3em;left:-.3em;background-color:orange;border-radius:50%;width:1.3em;height:1.3em;z-index:1;opacity:.4}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.landing-ui{animation:fadeIn .7s ease-in-out}@keyframes openFromMiddle{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.landing-ui{animation:openFromMiddle 3s ease-in-out}@media (min-width: 320px){.layout-container{flex-direction:row;justify-content:center;align-items:flex-start}}.wrapper span{position:fixed;bottom:-50px;height:20px;width:20px;border-radius:50%;background-color:#3c6b7b;box-shadow:0 0 20px 5px #fff;animation:ani1 10s linear infinite,ani2 1.5s ease-in-out infinite alternate;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.wrapper span:nth-child(1){left:0;animation-delay:.6s}.wrapper span:nth-child(2){left:10%;animation-delay:3s;background:#ae0505}.wrapper span:nth-child(3){left:20%;animation-delay:2s}.wrapper span:nth-child(4){left:30%;animation-delay:5s;background:#939304}.wrapper span:nth-child(5){left:40%;animation-delay:1s}.wrapper span:nth-child(6){left:50%;animation-delay:7s;background:pink}.wrapper span:nth-child(7){left:60%;animation-delay:6s}.wrapper span:nth-child(8){left:70%;animation-delay:8s;background:red}.wrapper span:nth-child(9){left:80%;animation-delay:6s}.wrapper span:nth-child(10){left:90%;animation-delay:4s;background:#ff0}.banner{display:flex;justify-content:center;align-items:center;height:100vh}.content h2{-webkit-text-fill-color:white;-webkit-text-stroke-width:3px;-webkit-text-stroke-color:white;font-family:Montserrat,sans-serif;font-size:80px;text-align:center;line-height:.9}.content h2 b{-webkit-text-fill-color:transparent;font-size:65px}@keyframes ani1{0%{bottom:0;margin-left:90px;margin-right:0}20%{bottom:20%;margin-left:0;margin-right:90px}40%{bottom:40%;margin-left:90px;margin-right:0}60%{bottom:60%;margin-left:0;margin-right:90px}80%{bottom:80%;margin-left:90px;margin-right:0}to{bottom:100%;margin-left:0;margin-right:90px}}@keyframes ani2{0%{box-shadow:0 0 20px 5px #fff}to{box-shadow:0 0 40px 10px #00fafa}}.text-field-container{margin-bottom:20px}.text-field-input.dark-mode{width:100%;padding:10px;border:1px solid #3d3d3d;border-radius:5px;font-size:16px;outline:none;resize:vertical;background-color:#1c1c20}.text-field-input.light-mode{width:100%;padding:10px;border:1px solid #ccc;border-radius:5px;font-size:16px;outline:none;resize:vertical;background-color:#e9e7e7}.text-field-input:focus{border-color:orange}.work-card-container{position:relative}.image-container.isNotMobile{position:relative;width:300px;height:170px}.image-container.isMobile{position:relative;width:260px;height:140px}.image-container{width:100%;height:200px;overflow:hidden;position:relative}.image-container img{width:100%;height:auto;display:block;position:absolute;top:0;left:0;transition:transform .5s ease-in-out}.image-container:hover img{animation:scrollImage 15s linear infinite}@keyframes scrollImage{0%{transform:translateY(0)}to{transform:translateY(-100%)}}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:#0000;transition:background-color .5s ease}.overlay:hover{background-color:#8080e44d}.eye-icon{color:orange;font-size:2rem}.container{position:relative;display:flex;justify-content:center;align-items:center}.ring{width:100px;height:100px;border:0px solid #011015;border-radius:50%;position:absolute}.ring:nth-child(1){border-bottom-width:8px;border-color:#f0f;animation:rotate1 2s linear infinite}.ring:nth-child(2){border-right-width:8px;border-color:#00f7ff;animation:rotate2 2s linear infinite}.ring:nth-child(3){border-top-width:8px;border-color:#fe0;animation:rotate3 2s linear infinite}.loading{color:#f5f5f5}@keyframes rotate1{0%{transform:rotateX(35deg) rotateY(-45deg) rotate(0)}to{transform:rotateX(35deg) rotateY(-45deg) rotate(360deg)}}@keyframes rotate2{0%{transform:rotateX(50deg) rotateY(10deg) rotate(0)}to{transform:rotateX(50deg) rotateY(10deg) rotate(360deg)}}@keyframes rotate3{0%{transform:rotateX(35deg) rotateY(60deg) rotate(0)}to{transform:rotateX(35deg) rotateY(60deg) rotate(360deg)}}.board{position:relative;display:grid;grid-template-columns:repeat(3,100px);grid-template-rows:repeat(3,100px);gap:5px}.square:hover{background:#e0e0e0}.square.light-mode{background:#2b2929;border-radius:4px;font-size:5rem;font-weight:700;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:all .3s ease}.square.dark-mode{background:#0000;border-radius:4px;font-size:5rem;font-weight:700;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:all .3s ease}.square.red{color:red}.square.blue{color:#00f}.winning-line{position:absolute;background:#ff0000b3;height:4px;transform-origin:0% 50%;z-index:1}.restart-button{margin-top:20px;padding:10px;font-size:1rem;background:#4caf50;color:#fff;border:none;border-radius:5px;cursor:pointer}.restart-button:hover{background:#45a049}