@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }

  /* https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html */
  [role="list"] {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  body {
    min-block-size: 100vh;
    line-height: 1.6;
  }

  /* pull that line height down for the buttons, makes adding padding nicer */
  h1,
  h2,
  h3,
  button,
  input,
  label {
    line-height: 1.1;
  }

  /* typography touch to make headers balanced, prevents one word lines */
  h1,
  h2,
  h3,
  h4 {
    text-wrap: balance;
  }

  /* typography touch to prevent text orphans in paragraphs */
  p,
  li {
    text-wrap: pretty;
  }

  img,
  picture {
    /* same as max-width ^^ */
    max-inline-size: 100%;
    display: block;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
  }
}

/* clr: color, ff: font-family, fs: font-size */
@layer base {
  @font-face {
    font-family: "gothic";
    src: url("/OldLondon.ttf");
  }

  :root {
    --clr-white: hsl(0, 0%, 100%);
    --clr-black: hsl(0, 0%, 0%);
    --clr-brand: hsl(0, 100%, 50%);

    --ff-body: "Fira Sans", sans-serif;
    --ff-heading: "gothic", sans-serif;
  }

  :root {
    --text-main: var(--clr-white);
    --background-main: var(--clr-black);
    --text-brand: var(--clr-brand);
  }

  html {
    font-family: var(--ff-body);
    line-height: 1.6;
  }

  body {
    font-family: var(--ff-body);
    color: var(--text-main);
    background-color: var(--background-main);
  }

  a {
    color: var(--text-main);
    text-underline-offset: 8px;
  }

  a:hover,
  a:focus-visible {
    color: var(--text-brand);
    text-underline-offset: 8px;
  }

  .site-header {
    background-color: var(--background-main);
    text-underline-offset: 8px;
  }

  .site-footer,
  .site-header,
  .info {
    font-size: 1.25rem;

    @media (width < 760px) {
      font-size: 1.1rem;
    }
  }

  .site-footer,
  .site-header {
    font-weight: 700;
  }
}

@layer layout {
  .flow > * + * {
    /* using em here for spacing based on typography, it is variable */
    margin-top: 1em;
  }

  .home {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .wrapper {
    max-width: 1130px;
    margin-inline: auto;
    padding-inline: 1rem;

    &[data-width="narrow"] {
      --wrapper-max-width: 720px;
    }

    &[data-width="wide"] {
      --wrapper-max-width: 1330px;
    }
  }
}

@layer components {
  /* SOCIALS PAGE */

  .about {
    padding: 1rem 2rem;
    background-color: var(--background-main);
    font-size: 1.25rem;
    border-radius: 8px;
    border: blue 2px inset;

    @media (width < 720px) {
      margin-top: 1rem;
      font-size: 1rem;
    }
  }

  .socials-buttons__layout {
    display: flex;
    flex-direction: column;
    gap: 0.5rem 1rem;
  }

  .social-button {
    padding: 1rem 2rem;
    background-color: var(--background-main);
    margin-block: 0.5rem;
    border-radius: 8px;
    border: inset;
    font-size: 3rem;
    text-decoration: none;
    color: white;
    font-family: var(--ff-heading);

    @media (width < 720px) {
      font-size: 2rem;
      padding: 0.5rem 1.5rem;
    }
  }

  .social-button:hover,
  .social-button:focus-visible {
    background-color: #61000f;
  }

  .socials {
    --s: 100px; /* control the size*/
    --c1: #42000a;
    --c2: #000000;

    --_g: #0000 24%, var(--c2) 26% 34%, var(--c1) 36% 44%, var(--c2) 46% 54%,
      var(--c1) 56% 64%, var(--c2) 66% 74%, #0000 76%;
    background: radial-gradient(100% 100% at 100% 0, var(--_g)),
      radial-gradient(100% 100% at 0 100%, var(--_g)),
      radial-gradient(var(--c2) 14%, var(--c1) 16%) calc(var(--s) / 2)
        calc(var(--s) / 2);
    background-size: var(--s) var(--s);
  }

  /* HOME PAGE */

  main {
    margin-block: 1.5rem;
  }

  .accent {
    color: red;
    text-shadow: 1px 1px 2px red, 0 0 1em rgb(73, 73, 73),
      0 0 0.2em rgb(77, 77, 77);
  }

  .home-button:hover {
    transform: scale(1.2);
  }

  .icon {
    max-height: 100px;
    @media (width < 760px) {
      max-height: 75px;
    }
  }

  .big-image {
    max-height: 35rem;
    margin: 3rem auto;

    @media (width < 760px) {
      max-height: 28rem;
      margin: 2rem auto;
    }
  }

  .wide-image {
    width: 60%;
  }

  .image-wrapper {
    display: flex;
    justify-content: center;
  }

  .site-header,
  .site-footer {
    padding-block: 1rem;

    @media (width < 760px) {
      padding-block: 0.5rem;
    }
  }

  .site-footer__layout {
    border-top: dotted red 4px;
    padding: 1rem;
  }

  .site-header {
    margin-bottom: 1rem;
    background-image: url(tiles/redskulls.jpg);
    background-repeat: round;
  }

  .site-header__layout,
  .site-footer__layout {
    display: flex;
    gap: 0.5rem 1rem;
    flex-wrap: wrap;
  }

  .site-header__layout {
    justify-content: space-between;
    align-items: center;

    @media (width < 760px) {
      flex-direction: column;
    }
  }

  .site-footer__layout {
    justify-content: center;
  }

  .primary-navigation,
  .bottom-navigation {
    ul {
      display: flex;
      gap: 0.5rem 1rem;
      flex-wrap: wrap;
    }
  }
}

@layer utilities {
  .text-center {
    text-align: center;
  }

  .gothic {
    font-family: var(--ff-heading);
    font-weight: 300;
    font-size: 4rem;
    text-shadow: 2px 2px 4px black;

    @media (width < 760px) {
      font-size: 2.75rem;
    }
  }
}

/* HTML: <div class="ribbon">Your text content</div> */
.ribbon {
  display: flex;
  flex-direction: column;
  font-size: 1.5rem;
  color: white;
  text-align: center;

  @media (width < 760px) {
    font-size: 1rem;
  }
}

.ribbon p {
  margin-bottom: 1rem;
}

/* .ribbon {
  --d: 2em; 

  max-width: 100%;

  inset-inline: calc(-1 * var(--d));
  padding-block: var(--d);
  line-height: 1.8;
  clip-path: polygon(
    0 var(--d),
    calc(100% - var(--d)) var(--d),
    calc(100% - var(--d)) 0,
    100% var(--d),
    100% calc(100% - var(--d)),
    var(--d) calc(100% - var(--d)),
    var(--d) 100%,
    0 calc(100% - var(--d))
  );
  border-image: conic-gradient(#0008 0 0) 50% / var(--d);
  background-color: #61000f; 
}

.ribbon span {
  margin-bottom: 1.5rem;

  @media (width < 760px) {
    margin-bottom: 0.5rem;
  }
} */