pages/styles/styles-old.css

@import url(https://fonts.bunny.net/css?family=inter-tight:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|unbounded:200,300,400,500,600,700,800,900);

:root {
  --background: #24273a;
  --background-transparent: #24273ac2;
  --foreground: #cad3f5;
  --subtext-0: #a5adcb;
  --surface-0: #363a4f;
  --overlay-0: #6e738d;
  --surface-1: #494d64;
  --surface-1-transparent: #494d64c2;
  --mantle: #1e2030;
  --accent: #a6da95;

  --border: var(--overlay-0);

  --special-glow: rgba(165, 173, 203, 0.7);

  --radius: 12px;
  --radius-big: calc(var(--radius) * 1.5);

  /* Important Stuff */
  --important-background: #3a222b;
  --important-foreground: #f5cadc;
  --important-border: #f5cadc7c;
  --important-accent: #7dc4e4;
  /* Catppuccin Macchiato Sapphire */
}

body {
  margin: 0px;
  padding: 0px;
  background-image: url(/assets/wallpaper.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  color: var(--foreground);
  font-family: "Inter Tight", sans-serif;
}

strong {
  font-weight: bolder;
}

a,
a:visited {
  color: var(--accent);
  text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Unbounded", sans-serif;
  margin-block: 4px;
  font-weight: 400;
}

img {
  max-width: 100%;
}

strong {
  font-weight: 900;
}

img.avatar {
  border: 4px solid var(--overlay-0);
  border-radius: 100%;
  max-height: 42%;
  max-width: 42%;
}

.contact-header {
  margin-top: 0px;
}

.subtext {
  color: var(--subtext-0);
}

.wrapper {
  background-color: var(--background-transparent);
  width: 100vw;
  min-height: 100vh;
}

.center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 18px;
  min-height: 100vh;
  width: 100%;
}

hr.invisible {
  border-color: transparent !important;
}

.content {
  max-width: 800px;
  background-color: var(--background);
  padding: 20px;
  box-shadow: 0px 0px 32px 12px rgba(0, 0, 0, 0.55);
  border-radius: var(--radius);
  border: 2px solid var(--border);
}

.content.landing.main {
  margin-top: 24px;
}

.content.previewcard {
  border: none;
  border-radius: 0px;
  padding: 32px;
  /* width: 450px;
  height: 140px; */
  ratio: 16 / 9;
  background-color: var(--background-transparent);
  backdrop-filter: brightness(35%) blur(16px);
  box-shadow: none;

  /* GRID START */

  display: grid;
  grid-template-columns: 1fr 1fr;
  /* grid-template-rows: 1fr 1fr; */
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    /* "top top" */ "top-1 top-2";
  /* "bottom-1 bottom-2"; */
}

.top {
  grid-area: top;
  /* border-bottom: 2px solid var(--surface-0); */
}
.top-1 {
  grid-area: top-1;
}
.top-2 {
  grid-area: top-2;
  justify-content: center;
  align-items: center;
  /* padding: 32px; */
}
.bottom-1 {
  grid-area: bottom-1;
}
.bottom-2 {
  grid-area: bottom-2;
}

/* ANOTHER GRID */

.grid-contacts {
  width: fit-content;
  height: fit-content;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px 16px;
  grid-auto-flow: row;
  grid-template-areas:
    ". ."
    ". .";
  justify-content: center;
  align-items: center;
}

.grid-contacts > div > a > img {
  width: 50px;
  opacity: 0.6;
}

.wrapper-123:has(.grid-contacts) {
  height: 100%;
  display: flex;
  justify-content: right;
  align-items: center;
}

.grid-contacts > div {
  width: fit-content;
}

/* GRID END*/

.content.landing {
  width: 335px;
  background: linear-gradient(
    to bottom,
    var(--surface-1),
    var(--background) 30%
  );
}

.content.landing.important {
  background: var(--important-background);
  color: var(--important-foreground);
  border: 2px solid var(--important-border);
}

.content.landing.important a {
  color: var(--important-accent) !important;
}

.text-shadow {
  text-shadow: 0px 0px 10px black;
}

foreground .waving {
  animation: wave 1s alternate infinite ease-in-out;
  animation-iteration-count: 2;
  display: inline-block;
}

.emote {
  vertical-align: sub;
  transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1.5);
}

.emote:hover {
  transform: scale(300%);
}

@keyframes wave {
  0% {
    transform: rotateZ(0deg);
  }

  100% {
    transform: rotateZ(-15deg);
  }
}

#contact {
  list-style-type: none;
  margin: 0px;
  margin-bottom: 24px;
  padding: 0px;
  display: flex;
  gap: 12px;
}

#contact li {
  opacity: 0.5;
  transition: 0.15s ease-in;
}

#contact li:hover {
  opacity: 1;
}

#contact img {
  width: 32px;
}

hr {
  background-color: transparent;
  border: 2px solid var(--surface-0);
}

.trans {
  background-image: linear-gradient(
    to right,
    rgb(85, 205, 252),
    rgb(179, 157, 233),
    rgb(247, 168, 184),
    rgb(246, 216, 221),
    rgb(255, 255, 255)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.enby {
  background-image: linear-gradient(
    to right,
    rgb(253, 219, 0),
    rgb(238, 212, 143),
    rgb(255, 255, 255) 30%,
    rgb(255, 255, 255),
    rgb(255, 255, 255) 36%,
    rgb(212, 181, 222),
    rgb(156, 92, 212),
    rgb(88, 50, 96),
    rgb(0, 0, 0)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0px 0px 1px var(--special-glow);
}