.newbg { background: rgb(37, 37, 37); background: radial-gradient(circle, rgb(41, 41, 41) 2%, rgb(12, 12, 12) 30%); } .header { position: fixed; top: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; background-color: #121212; z-index: 999; } .left { color: white; } .left p { margin: 0; font-size: 1.5rem; padding: 1rem; color: transparent; background: linear-gradient(90deg, rgba(0, 151, 255, 0.9976365546218487) 3%, rgba(115, 154, 242, 1) 21%, rgba(255, 159, 224, 1) 40%, rgba(255, 194, 133, 1) 60%, rgba(245, 242, 81, 0.884) 80%, rgba(255, 179, 0, 0.842) 100%); background-size: 150% 50%; background-clip: text; animation: colorChange 3s linear infinite alternate-reverse; } @keyframes colorChange { 0% { background-position: 0 50%; } 100% { background-position: 100% 100%; } } .right { overflow: auto; } .right::-webkit-scrollbar { height: 0; } .right a { text-decoration: none; color: white; margin: 0 0.4rem 0 0.5rem; transition: opacity 400ms ease; font-size: 1rem; } .header:hover>.right a { opacity: 0.5; } .header:hover>.right a:hover { opacity: 1; cursor: pointer; } .footer { bottom: 0; width: 100%; position: fixed; background-color: #121212; color: white; font-family: "Poppins", serif; z-index: 999; } .footer p { text-align: center; font-size: 14px; margin: 0; padding: 0.6rem; font-family: "Poppins", serif; } .content { height: 100vh; display: flex; align-items: center; justify-content: center; } .contentContainer { display: flex; align-items: center; justify-content: center; } .contentContainer a { text-decoration: none; color: white; } .manga, .anime, .kdrama, .movies { background-color: #121212e0; color: white; border-radius: 0.5rem; transition: opacity 200ms ease, transform 200ms ease; padding: 0.4rem 2rem; margin: 0.2rem 0.2rem 0 0.2rem; border-color: rgb(80, 80, 80); border-style: groove; border-width: 0.1rem; } .content:hover>.contentContainer div { opacity: 0.5; } .content:hover>.contentContainer div:hover { opacity: 1; cursor: pointer; transform: scale(0.95) rotateX(12deg) rotateY(-8deg); } @media screen and (max-width: 1024px) { .contentContainer { display: block; } .content:hover>.contentContainer div { opacity: 0.5; } .content:hover>.contentContainer div:hover { opacity: 1; cursor: pointer; transform: scale(0.95); } }