Index CSS</tistle> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } @font-face { font-family:"MPlusCode"; /*a name to be used later*/ src: url("/font/MPLUS1Code-Regular.ttf"); /*URL to font*/ } body { color: #008cff; font-size: 18px; font-family: "MPlusCode", "MS PGothic", sans-serif !important; background-color: black; overflow-y: scroll; } blink { -webkit-animation: 2s linear infinite condemned_blink_effect; /* for Safari 4.0 - 8.0 */ animation: 1s linear infinite condemned_blink_effect; } /* for Safari 4.0 - 8.0 */ @-webkit-keyframes condemned_blink_effect { 0% { visibility: hidden; } 50% { visibility: hidden; } 100% { visibility: visible; } } @keyframes condemned_blink_effect { 0% { visibility: hidden; } 50% { visibility: hidden; } 100% { visibility: visible; } } .starbg{ width: 100%; height: 100%; background-repeat: repeat; position:fixed; top:0px; left:0px; background-image: url("/images/background/stripes.png"); animation: backgroundScroll 5s linear infinite; mix-blend-mode: screen; z-index: -1; } @keyframes backgroundScroll { 0% {background-position:0px 0px; filter: opacity(100%);} 100% {background-position: 100px 100px; filter: opacity(100%);} } .pulsate { -webkit-animation: pulsate 3s ease; -webkit-animation-iteration-count: infinite; opacity: 1.0; display: inline-block; } @keyframes pulsate { 0% { opacity: 0.9; transform: scale(.9); } 50% { opacity: 1.0; -webkit-transform: scale(1); } 100% { opacity: 0.9; -webkit-transform: scale(.9); } } .filter { -webkit-filter: brightness(1) contrast(1) sepia(0) saturate(1) hue-rotate(0deg); transition: all .7s ease; width: 100%; height: 100%; border:1px solid black; font-weight: normal; letter-spacing:normal; } .filter:hover { -webkit-filter: brightness(.8) contrast(1.2) sepia(1) saturate(10) hue-rotate(181deg); font-weight: bold; letter-spacing:3px; } .characterbg{ width: 100%; height: 100%; position:fixed; background-size: auto; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; mix-blend-mode: screen; z-index: -2; top:0px; left:0px; background-image: url("/images/background/landing.png"); /* IE, only works on <img> tags */ -ms-interpolation-mode: nearest-neighbor; /* Firefox */ image-rendering: crisp-edges; /* Chromium + Safari */ image-rendering: pixelated; } /* Works on Firefox */ * { scrollbar-width: thin; scrollbar-color: #008cff black; } /* Works on Chrome, Edge, and Safari */ *::-webkit-scrollbar { width: 5px; } *::-webkit-scrollbar-track { background: #008cff; } *::-webkit-scrollbar-thumb { background-color: #008cff; border: 3px solid black; } /* Link Color */ a { color: #ff00aa; transition: all .3s ease; } /* Link Color */ a:hover { color: #ffffff; } /* Smaller Text*/ .smaller { font-size: 14px; } /* Scales images responsively */ img { padding-right: 20px; } /* Add a card effect for articles */ .card { background-color: rgba(0, 0, 0, 0.911); overflow-y: hidden; border-style: solid; border-color: #ff00aa; border-width: 1px; padding: 50px 50px 50px 50px; box-shadow: 0px 0px 30px 1px #ff00aa; width: 510px; padding: 50px 50px 50px 50px; } .center-screen { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 90vh; } .typewriter { overflow: hidden; /* Ensures the content is not revealed until the animation */ border-right: .15em solid #ff00aa; /* The typwriter cursor */ white-space: nowrap; /* Keeps the content on a single line */ margin: 0 auto; /* Gives that scrolling effect as the typing happens */ letter-spacing: .05em; /* Adjust as needed */ animation: typing 5s steps(40, end), blink-caret .75s step-end infinite; } /* The typing effect */ @keyframes typing { from { width: 0 } to { width: 100% } } /* The typewriter cursor effect */ @keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: #ff00aa; } } </style> </head> </html>