@import url('normalize.css');
@import url('variables.css');
@import url('font.css');
@import url('elements.css');

* {
  box-sizing: border-box;

  &::before,
  &::after {
    box-sizing: inherit;
  }
}

html,
body {
  background: #130919;
}

body {
  margin: 0;
  display: flex;
  place-items: center;
  width: 100%;
  min-width: 320px;
  height: 100%;
  min-height: 100vh;

  & main.social-container {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 16px;
    margin: 0 auto;
    padding: 2rem;
    width: 100%;
    max-width: 1280px;
    text-align: center;

    & h1.h1 {
      margin: 0;
      margin-bottom: 8px;
      font-size: 3.2em;
      line-height: 1.1;
      writing-mode: vertical-rl;
      text-orientation: sideways;
      text-align: left;
      transform: rotate(180deg);
    }

    & nav.nav {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      height: 100%;
      font-size: 1.4rem;

      & a.li-a {
        font-weight: 600;
        color: var(--font-color);
        text-decoration: inherit;
        transition: color 0.1s ease-in-out;

        &:not(:hover) {
          color: var(--font-color-variant);
          transition: color 0.2s ease-in-out;
        }
      }
    }
  }
}