:root {
  --font-size-large: 1.2em;
  --content-width: 680px;
  --border-radius: 8px;
  --blur-radius: 4px;
  --mobile-blur-radius: calc(var(--blur-radius) / 2);

  --spacing-base: 16px;
  --spacing-xs: calc(var(--spacing-base) / 4);
  --spacing-sm: calc(var(--spacing-base) / 2);
  --spacing-md: var(--spacing-base);
  --spacing-lg: calc(var(--spacing-base) * 1.5);
  --spacing-xl: calc(var(--spacing-base) * 2);
  --spacing-xxl: calc(var(--spacing-base) * 4);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;

  height: 100%;
  width: 100%;
}

body {
  color: white;
  background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0) 80%,
      black 100%
    ),
    url("/images/colombia_cover.jpg");
  background-color: black;
  background-repeat: no-repeat;
  background-position: left;
  background-size: auto 100%;

  @media (min-width: 680px) {
    background-size: cover;
  }

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

  font-family: "Roboto", "Arial", sans-serif;
  font-size: 16px;

  ::selection {
    background: white;
    color: black;
    text-shadow: none;
  }
}

header {
  display: flex;
  justify-content: center;
  margin: var(--spacing-xl) 0;
}

nav {
  color: #333;
  font-size: 1.4em;

  & ul {
    list-style-type: none;

    margin: 0;
    padding: 0;

    display: flex;
    justify-content: space-around;
    gap: 10px;

    & a {
      color: white;
      text-decoration: none;
    }

    & a:hover {
      color: #333;
    }
  }

  & li {
    user-select: none;
  }

  & .active {
    text-decoration: underline wavy 1px;
    text-underline-offset: 2px;
  }

  & .bullet {
    color: white;
  }
}

main {
  width: var(--content-width);
  max-width: 100vw;

  display: flex;
  flex-direction: column;
  align-items: center;

  & h2 {
    visibility: hidden;
    font-size: 0.1em;
  }

  & a {
    color: white;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
  }

  & a:hover {
    text-decoration: underline;
  }
}

section {
  width: 100%;

  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(var(--mobile-blur-radius));

  padding: var(--spacing-xl);

  @media (min-width: 680px) {
    backdrop-filter: blur(var(--blur-radius));
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
  }

  & h3 {
    margin: 0;
    color: white;
    font-style: italic;
    font-size: var(--font-size-large);
    font-weight: 400;
  }
}

footer {
  & h1 {
    font-size: 2em;
    font-family: "Orbitron", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;

    margin: var(--spacing-xl) 0;
  }
}

#intro {
  font-size: var(--font-size-large);

  & p {
    margin: var(--spacing-md);
  }

  & .hello,
  & .sig {
    user-select: none;

    & img {
      height: 50px;
      margin: var(--spacing-sm) 0;
    }
  }

  & .hello {
    margin-left: var(--spacing-sm);
  }

  & .sig {
    display: flex;
    margin-left: var(--spacing-xxl);
  }
}

#apps {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: var(--spacing-xxl);

  @media (min-width: 680px) {
    flex-direction: row;
    gap: var(--spacing-lg);
  }

  & .project {
    margin: var(--spacing-md) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
  }

  & .screenshot {
    width: 256px;
    border-radius: var(--border-radius);
    margin: var(--spacing-md) 0;
  }

  & .links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);

    & a {
      display: flex;
      align-items: center;
      gap: var(--spacing-xs);
    }
  }
}

#skills {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: var(--spacing-xl);

  @media (min-width: 680px) {
    flex-direction: row;
    gap: var(--spacing-lg);
  }

  & ul,
  & .col {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  & .col {
    flex: 1;
    margin: var(--spacing-md) 0;
    gap: var(--spacing-sm);
  }

  & ul {
    list-style-type: none;

    margin: 0;
    padding: 0;

    gap: var(--spacing-sm);
  }
}

#links {
  font-size: var(--font-size-large);

  display: flex;
  justify-content: center;

  padding: var(--spacing-xxl) 0;

  & .container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);

    & a {
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: var(--spacing-sm);
    }

    & a:hover {
      text-decoration: underline;
      text-underline-offset: 2px;
    }
  }
}