@import url("https://fonts.googleapis.com/css?family=Roboto"); * { font-family: "Roboto", sans-serif; } body { background-color: #131415; margin: 0; padding: 0; } .main { width: 100%; } .nav { position: fixed; z-index: 14; background: #131415; width: 100%; } .header { line-height: 36px; display: flex; color: #e1e1e1; align-items: center; } .header .extra { display: none; } .header .name { animation: rightToLeft 0.75s ease 1; border-radius: 20px; font-size: 2rem; padding: 10px 10px; font-weight: bold; display: flex; align-items: center; column-gap: 20px; } .header .name .tag-line { font-size: 1.2rem; color: rgba(225, 225, 225, 0.6); } .header .menu { line-height: 1.5em; padding: 0.5rem 1rem; list-style-type: none; display: flex; margin-left: auto; } .header .menu li { padding: 4px; } .header .menu li > a { transition: filter 0.75s ease; justify-content: center; background-color: #1e1e1e; width: 1rem; padding: 12px 12px; margin: 0px; border-radius: 40px; text-decoration: none; display: block; height: 1rem; outline: none; } .header .menu li > a:hover, .header .menu li > a:focus { filter: invert(100%); } .full { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 13; } .rainbow { transition: 0.75s ease; position: absolute; z-index: -1; width: 100%; height: 100%; background: linear-gradient(255deg, #b827fc, #2c90fc, #b8fd33, #fec837, #fd1892); background-size: 1000% 1000%; animation: rainbowRotate 9s ease infinite; } .main { color: #e1e1e1; width: 100%; display: flex; justify-content: center; } .main .body { display: flex; flex-direction: column; width: 75%; padding-top: 100px; padding-bottom: 100px; } .card { background: linear-gradient(255deg, #b827fc, #2c90fc, #b8fd33, #fec837, #fd1892); background-size: 1000% 1000%; animation: rainbowRotate 9s ease infinite; padding: 10px; margin-bottom: 15px; display: flex; } .card .content { width: 100%; background: rgba(0, 0, 0, 1); padding: 25px; transition: background .5s ease; } .card .content h3 { margin-top: 28px; } .card .content a { color: #e1e1e1; } .card .content a:active { color: inherit; } .card:hover .content { background: rgba(0, 0, 0, 0.9); transition: background .5s ease; } .hidden { display: none; } .black { background-color: black; } @keyframes rainbowRotate { 0% { background-position: 0% 50%; } 50% { background-position: 100% 51%; } 100% { background-position: 0% 50%; } } .smallname { font-size: 0.5em; color: rgba(225, 225, 225, 0.6); } .btn { padding: 5px 20px; color: #131415 !important; background: #e1e1e1; border-radius: 5px; text-decoration: none; transition: filter 0.5s ease; width: fit-content; display: block; } .btn:hover { filter: invert(100%); } .icon-github-dark { background-image: url(/files/svgs/brands/github.svg); height: 1rem; background-size: contain; background-repeat: no-repeat; display: flex; width: 1rem; float: left; padding: 0px 2px; } .icon-github { background-image: url(/files/svgs/brands/github.svg); height: 1rem; background-size: contain; background-repeat: no-repeat; display: flex; filter: invert(100%); width: 1rem; position: absolute; } ::-webkit-scrollbar { width: 0; background: transparent; } @media (max-width: 800px) { .header .name { width: 100%; font-size: 1.8rem; flex-direction: column; padding: 1.25rem 1rem 1rem 1rem; } .header .name .tag-line { font-size: 1rem; padding-left: 0; } .main .body { width: 100%; padding-top: 108px; } }