@font-face { font-family: 'Chillax-Variable'; src: url('../fonts/Chillax-Variable.woff2') format('woff2'), url('../fonts/Chillax-Variable.woff') format('woff'), url('../fonts/Chillax-Variable.ttf') format('truetype'); font-weight: 200 700; font-display: swap; font-style: normal; } html { font-size: 14px; font-family: "Chillax-Variable", "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; font-feature-settings: "cv02","cv03","cv04","cv11"; scroll-behavior: smooth; } body { background-color: #161a23; color: #a9bad4; margin: 0; padding: 0; min-height: 100%; overflow-x: hidden; overflow-y: auto; font-weight: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } .background-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; } .background-image { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; z-index: -2; } .background-video { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; z-index: -1; } .content-container { display: flex; flex-direction: column; width: 100%; height: 100vh; z-index: 1; } .content-container .content { position: relative; display: flex; flex: 1; flex-direction: column; align-items: center; align-self: center; background-color: rgba(36, 42, 53, .9); outline: 1px solid #404552; border-radius: 10px; width: 300px; height: 100%; margin: 15px 0; overflow: hidden; } .content-container .content:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 35px; background: linear-gradient(to top, rgb(36, 42, 53), transparent); pointer-events: none; } @media (min-height: 550px) { .content-container .content { margin: 50px 0; } .content-container .content:after { height: 75px; } } @media (min-width: 500px) { .content-container .content { width: 400px; } } @media (min-width: 1250px) { .content-container .content { width: 500px; } } .content-container .content .logo-container { position: relative; margin-top: 10px; width: 100px; height: 100px; background-image: url('../assets/logo.png'); background-size: cover; background-repeat: no-repeat; transition: background-image .2s ease-in-out; overflow: hidden; } .content-container .content .logo-container:hover { background-image: url('../assets/logo-devil.png'); } @media (min-width: 840px) and (min-height: 450px) { .content-container .content .logo-container { width: 150px; height: 150px; } } @media (min-width: 1250px) { .content-container .content .logo-container { width: 175px; height: 175px; } } .content-container .content .logo-container .logo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.2s ease-in-out; } .content-container .content .description { font-size: 16px; text-align: center; margin-top: 15px; } .content-container .content .description p { margin: 0; padding: 0; } .content-container .content .links { display: flex; flex-direction: column; flex: 1; gap: 15px; margin-top: 15px; padding-top: 5px; padding-bottom: 25px; width: 100%; height: 100%; overflow-y: auto; } @media (min-height: 550px) { .content-container .content .links { padding-bottom: 50px; } } .content-container .content .links::-webkit-scrollbar { background-color:#060911; width:5px } .content-container .content .links::-webkit-scrollbar-track { background-color:#060911 } .content-container .content .links::-webkit-scrollbar-track:hover { background-color:#060911 } .content-container .content .links::-webkit-scrollbar-thumb { background-color:#404552; border-radius:16px; } .content-container .content .links::-webkit-scrollbar-thumb:hover { background-color:#404552; } .scrollbar::-webkit-scrollbar-button { display:none } .content-container .content .links .link { position: relative; display: flex; margin: 0 15px; padding: 15px; background-color: #060911; outline: 1px solid #404552; border-radius: 15px; height: fit-content; } .content-container .content .links .icon { position: absolute; height: 20px; top: 50%; left: 15px; transform: translateY(-50%); z-index: 1; } .content-container .content .links .icon img { height: 100%; } @media (min-width: 500px) { .content-container .content .links .icon { height: 25px; } } .content-container .content .links .link .info { flex: 1; text-align: center; z-index: 2; } .content-container .content .links .link .info .title { font-weight: 700; } .content-container .content .links .link .info .url { font-size: 13px; } .content-container .footer { display: flex; align-items: center; height: 45px; background-color: rgba(36, 42, 53, .9); outline: 1px solid #404552; border-radius: 10px; margin-bottom: 25px; margin-left: 30px; margin-right: 30px; overflow: hidden; } @media (min-width: 840px) { .content-container .footer { margin-left: 100px; margin-right: 100px; } } @media (min-width: 1250px) { .content-container .footer { margin-left: 150px; margin-right: 150px; } } .content-container .footer .footer-content { display: flex; flex: 1; gap: 10px; align-items: center; padding: 0 15px; } .content-container .footer .footer-clock { width: 100px; text-align: right; overflow: hidden; font-size: 18px; font-weight: 500; padding-right: 20px; background: linear-gradient(to right, #2f3543, #292f3b); clip-path: polygon(40px 0%, 100% 0%, 100% 100%, 0% 100%); }