style-compat.css

@import "https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;0,800;1,400&display=swap";

:root {
  --background-primary: #0d1b2d;
  --background-secondary: #12294b;
  --twitter: #508bdf;
  --github: #452087;
  --soundcloud: #e44e13;
  --bandcamp: #01b68c;
  --inner-glow: #8be6ff80;
  --border-radius: 12px;
}

* {
  transition: all .2s ease-in-out;
}

body {
  color: #fff;
  background: var(--background-primary);
  scroll-behavior: smooth;
  flex-direction: column;
  align-items: center;
  font-family: Poppins, Arial, Helvetica, sans-serif;
  display: flex;
  overflow-x: hidden;
}

.header {
  background-color: #0000;
  background-image: linear-gradient(0deg, #0d1b2d, #0d1b2d00 10%), url("./banner_alt.png");
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll, scroll;
  background-origin: padding-box, padding-box;
  background-clip: border-box, border-box;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40em;
  display: flex;
  overflow: hidden;
}

@media only screen and (max-width: 768px) {
  .header {
    justify-content: unset;
    background-position: 70% 100%;
    flex-direction: column-reverse;
    height: 35em;
  }
}

.socials {
  flex-direction: row;
  width: 80vw;
  min-width: -moz-fit-content;
  min-width: fit-content;
  max-width: 1200px;
  margin-left: -7%;
  display: flex;
}

@media only screen and (max-width: 768px) {
  .socials {
    margin-left: unset;
    zoom: 70%;
    margin-bottom: 5em;
  }
}

.socials .pfp {
  border-radius: 50%;
  width: 9.5em;
  height: 9.5em;
  margin-right: 1em;
  display: flex;
  overflow: hidden;
}

.socials .content {
  flex-direction: column;
  display: flex;
}

.name {
  width: -moz-fit-content;
  width: fit-content;
  margin-top: .2em;
  margin-bottom: .2em;
  font-size: 4em;
  font-weight: 600;
}

.social-button {
  border-radius: var(--border-radius);
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 70%;
  width: 5em;
  height: 3em;
}

#twitter {
  background-color: var(--twitter);
  background-image: url("twitter.svg");
}

#github {
  background-color: var(--github);
  background-image: url("github.svg");
}

#soundcloud {
  background-color: var(--soundcloud);
  background-image: url("soundcloud.svg");
}

#bandcamp {
  background-color: var(--bandcamp);
  background-image: url("bandcamp.svg");
}

.links {
  flex-direction: row;
  gap: 1.4em;
  display: flex;
}

.main {
  border-radius: var(--border-radius);
  background: var(--background-secondary);
  height: calc(max-content + 3em);
  width: 80vw;
  max-width: 1200px;
  min-height: 20em;
  margin-top: -10em;
  margin-bottom: 3em;
  padding: 3em 4em;
}

@media only screen and (max-width: 768px) {
  .main {
    margin-top: unset;
    border-radius: 0;
    width: 100vw;
    max-width: -moz-fit-content;
    max-width: fit-content;
    margin-bottom: 0;
    padding: 3em;
    box-shadow: none !important;
    filter: none !important;
  }
}

.main h1 {
  font-size: 4em;
  font-weight: 800;
}

.main h2 {
  font-size: 3em;
  font-weight: 600;
}

.main a:not(.folio-button) {
  color: #a6d4fe;
  background: #214985;
  border: 2px solid #143c79;
  border-bottom-width: 6px;
  border-radius: 4px;
  margin-top: .2em;
  padding: 0 .5em 0;
  line-height: 2em;
  text-decoration: none;
  transition: all !important;
}

.main a:not(.folio-button):hover {
  color: #6eb7fb;
  border-bottom: 2px solid #143c79;
  position: relative;
  top: 4px;
  transition: all !important;
}

.main p {
  font-size: 1.2em;
  font-weight: 400;
  line-height: 1.2em;
}

.innerglow {
  box-shadow: 9px 9px #0000, inset 0px 8px 17px -6px var(--inner-glow);
}

.shadow {
  filter: drop-shadow(9px 9px #00000040);
}

.hoverable:hover {
  filter: drop-shadow(0 0 #0000);
  transform: translate(9px, 9px);
}

.folio-item:nth-of-type(2n) {
  flex-direction: row-reverse;
}

.folio-item {
  border-radius: var(--border-radius);
  flex-direction: row;
  width: 100%;
  max-width: 1000px;
  height: 220px;
  margin: 0 auto;
  display: flex;
  overflow: hidden;
}

@media only screen and (max-width: 968px) {
  .folio-item {
    margin: unset;
    max-width: calc(100vw - 3em);
    height: -moz-fit-content;
    height: fit-content;
    flex-direction: column !important;
  }
}

.folio-item img {
  width: auto;
  height: auto;
}

.folio-item .folio-details {
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 220px;
  padding: 1em;
  display: flex;
}

@media only screen and (max-width: 968px) {
  .folio-item .folio-details {
    height: min-content;
  }
}

.folio-item .folio-details i {
  vertical-align: top;
  color: #fff;
  font-size: 1.3em;
  line-height: 1.3em;
}

.folio-item .folio-details p {
  color: #fffc;
  width: calc(100% - 1em);
  line-height: 1.2em;
}

.folio-item .folio-details span {
  margin-bottom: .1em;
  font-size: 2.3em;
  font-weight: 600;
}

.folio-item .folio-details .folio-button {
  color: #fff;
  background-blend-mode: overlay;
  border-radius: 24px;
  align-self: flex-end;
  margin-top: auto;
  margin-bottom: 2em;
  padding: .8em 1em;
  text-decoration: none;
}

@media only screen and (max-width: 968px) {
  .folio-item .folio-details .folio-button {
    margin-top: 2em;
    margin-bottom: 0;
    margin-right: 2em;
  }
}

#unikara {
  background: radial-gradient(89.95% 92.99% at 50.4% 112.43%, #0000005c 0%, #0000 98.3%), #0f1d29;
  border: 4px solid #1e3a52;
}

#unikara .folio-button {
  background-color: #1e3a52;
  box-shadow: 9px 9px #0000, inset 0 -4px 17px -6px #8be6ff80;
}

#vignette {
  background: radial-gradient(89.95% 92.99% at 50.4% 112.43%, #0000005c 0%, #0000 98.3%), #6e182d;
  border: 4px solid #f01371;
}

#vignette .folio-button {
  background-color: #e4166f;
  box-shadow: 9px 9px #0000, inset 0 -4px 17px -6px #5406d390;
}

#pygmalion {
  background: radial-gradient(89.95% 92.99% at 50.4% 112.43%, #0000005c 0%, #0000 98.3%), #0e0b0e;
  border: 4px solid #251e25;
}

#pygmalion .folio-button {
  background-color: #a600e0;
  box-shadow: 9px 9px #0000, inset 0 -4px 17px -6px #e3aff6a5;
}

#dbots {
  background: radial-gradient(89.95% 92.99% at 50.4% 112.43%, #0000005c 0%, #0000 98.3%), #14171e;
  border: 4px solid #424a62;
}

#dbots .folio-button {
  background-color: #4b4d57;
  box-shadow: 9px 9px #0000, inset 0 -4px 17px -6px #70748388;
}

#inorbit {
  background: radial-gradient(89.95% 92.99% at 50.4% 112.43%, #0000005c 0%, #0000 98.3%), #100642;
  border: 4px solid #294599;
}

#inorbit .folio-button {
  background-color: #ad3f69;
  box-shadow: 9px 9px #0000, inset 0 -4px 17px -6px #f7a1c29e;
}

#garbage {
  color: #1b3f60;
  background: radial-gradient(89.95% 92.99% at 50.4% 112.43%, #0000005c 0%, #0000 98.3%), #c0b29e;
  border: 4px solid #bda178;
}

#garbage .folio-button {
  background-color: #1b3f60;
  box-shadow: 9px 9px #0000, inset 0 -4px 17px -6px #24629d;
}

#garbage p {
  color: #1b3f60ce;
}

#garbage i {
  color: #1b3f60;
}