@import url("/assets/fonts/lato.css");
@import url("/assets/fonts/open-sans.css");
html, body {
  min-height: 100vh;
  margin: 0;
  font-size: 14pt;
  background-color: #fff7ee;
}

header, aside, main, footer {
  padding: 8px;
}

/* Fonts and text styling */
* {
  font-family: "Open Sans", sans-serif;
}

h1, h2, h3, a.button {
  font-family: "Lato", sans-serif;
}

a[href], a:visited {
  color: rgb(167, 25, 115);
  text-decoration: none;
}

a[href]:hover {
  text-decoration: underline;
}

/* Navigation */
nav {
  display: inline;
  padding-right: 1em;
}

nav a.title span {
  font-weight: bolder;
  background: rgb(255, 38, 174);
  background: linear-gradient(30deg, rgb(255, 38, 174) 10%, rgb(29, 150, 253) 50%, rgb(15, 192, 71) 90%);
  background-clip: text;
  -webkit-background-clip: text;
  text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Footer */
footer {
  color: rgba(0, 0, 0, 0.2);
}

/* Content */
div.stream {
  max-width: 720px;
  margin: 0 auto;
}

main.big-title h1 {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */
}

@supports (display: grid) {
  body {
    display: grid;
    grid-template-rows: min-content auto min-content;
  }
  /* Background content */
  div.background {
    position: fixed;
    z-index: -1;
    /* background: rgb(55,23,75);
    background: linear-gradient(127deg, rgba(55,23,75,1) 0%, rgba(84,8,8,1) 50%, rgba(124,75,8,1) 100%); */
    width: 100vw;
    height: 100vh;
  }
}
@supports (display: flex) {
  main.big-title {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  main.big-title h1 {
    font-size: max(min(min(180pt, 40vh), 15vw), 30pt);
    margin: 0;
    background: #ff26ae;
    background: linear-gradient(45deg, #ff26ae 0%, #1d96fd 16.667%, #2dff70 33.333%, #1d96fd 50%, #ff26ae 66.667%, #1d96fd 83.333%, #2dff70 100%);
    background-size: auto;
    background-clip: border-box;
    background-clip: text;
    -webkit-background-clip: text;
    text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
  }
  @supports (animation: test) {
    @keyframes title {
      to {
        background-position: -400vw 0;
      }
    }
    main.big-title h1 {
      background-size: 400vw 200vw;
      animation-name: title;
      animation-duration: 20s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }
  }
}
.contact-name h2,
.contact-name h3 {
  margin: 0;
}

.contact-name {
  margin-top: 20pt;
  margin-bottom: 20pt;
}

.proj-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6pt;
}
@media screen and (max-width: 720px) {
  .proj-cards {
    grid-template-columns: 1fr;
  }
}
.proj-cards .proj-card {
  background-color: #fff;
  display: grid;
  grid-template-rows: min-content 1fr min-content;
  border-radius: 1em;
  padding: 1em;
  word-wrap: break-word;
}
.proj-cards .proj-card h3 {
  margin: 0;
  font-variant: small-caps;
}
.proj-cards .proj-card p {
  margin-top: 4pt;
  margin-bottom: 4pt;
}
.proj-cards .proj-card .buttons a {
  background-color: rgb(167, 25, 115);
  color: white;
  padding: 4pt;
  border-radius: 8pt;
  display: inline-block;
  text-align: center;
}
.proj-cards .proj-card .buttons a:hover {
  background-color: rgb(167, 25, 77);
}

.linktree {
  display: flex;
  flex-direction: column;
  gap: 4pt;
  align-items: center;
}
.linktree a {
  background-color: #07c7c4;
  color: white;
  padding: 4pt;
  border-radius: 8pt;
  display: block;
  text-align: center;
  min-width: 180pt;
  width: min-content;
}

@media (prefers-color-scheme: dark) {
  body, html {
    color: #cccccc;
    background: #181818;
  }
  footer {
    color: rgba(255, 255, 255, 0.2);
  }
  .proj-cards .proj-card {
    background-color: #1f1f1f;
  }
  .linktree a {
    background-color: #0c5c95;
    color: white;
  }
}

/*# sourceMappingURL=main.css.map */