/* 
  Author: Samuel Felipe
  URL: https: //github.com/shemuelx/
*/

/* Font */
@import url('https://fonts.googleapis.com/css2?family=Pontano+Sans:wght@300..700&display=swap');

/* Variables */
:root {
  --mobile-max-width: 37em;
  --tablet-max-width: 42.5em;
  --desktop-max-width: 45em;

  --font-family: "Pontano Sans", sans-serif;
  --title-font-size: 2em;
  --subtitle-font-size: 1.5em;
  --nav-font-size: 1.2em;
  --content-font-size: 1em;
  --icon-font-size: 1.5em;
  --footer-font-size: 0.8em;

  --primary-color: #ffffff;
  --secondary-color: #0c0f0a;
  --accent-color: #820b8a;
}

/* Global Styles */
*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-family: var(--font-family);
  line-height: 1.8;
}

body {
  -webkit-font-smoothing: antialiased;
  background-color: var(--primary-color);
}

ul {
  list-style-type: none;
}

a,
a:link {
  outline: none;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: 100%;
}

h1,
h2,
h3,
h4,
a {
  color: var(--secondary-color);
}

h2 {
  font-size: var(--subtitle-font-size);
  color: var(--accent-color);
}

.container {
  display: flex;
  flex-direction: column;

  row-gap: 2em;

  max-width: var(--mobile-max-width);
  padding-left: 0.6250em;

  @media only screen and (max-width: 64em) {
    max-width: var(--tablet-max-width);
    margin: 0 auto;
  }

  @media screen and (min-width: 64.5em) {
    max-width: var(--desktop-max-width);
    margin: 0 auto;
  }

  .navbar {
    top: 0;
    overflow: hidden;

    & .links {
      display: flex;
      flex-direction: row;

      column-gap: 30px;

      & li {
        padding: 15px 0;

        & a {
          font-size: var(--nav-font-size);
          color: var(--secondary-color);
          cursor: pointer;
        }

        & a:hover {
          color: var(--accent-color);
          transition: color .4s
        }
      }
    }
  }

  .about {
    & .title {
      font-size: var(--title-font-size);
    }

    & .content {
      margin-top: 1.2em;
      font-size: var(--content-font-size);

      & .profession {
        & .artist {
          color: var(--accent-color);
        }
      }
    }

    & .icons {
      display: flex;
      flex-direction: row;

      column-gap: 30px;
      margin-top: 1em;

      & .icon {
        padding: 5px 0;

        & i {
          font-size: var(--icon-font-size);
          color: var(--secondary-color);
        }
      }
    }
  }

  .projects {

    & .content {
      margin-top: 1.6em;

      & .slider {
        display: flex;
        flex-direction: row;

        column-gap: 18px;

        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;

        @media only screen and (max-width: 64em) {
          scrollbar-width: thin;
        }

        @media screen and (min-width: 64.5em) {
          scrollbar-width: thin;
        }

        & .slide {
          flex-shrink: 0;
          width: 200px;
          height: 300px;

          cursor: pointer;

          & img {
            object-fit: cover;
          }
        }
      }
    }
  }

  .inclusion {
    margin-bottom: 6em;

    & .blockquote {
      display: flex;
      flex-direction: column;
      gap: 1em;

      margin-top: 1.6em;

      footer {
        display: flex;
        gap: 0.5em;
      }
    }

    & li blockquote p::before {
      content: '\201C';
    }

    & li blockquote p::after {
      content: '\201D';
    }

    & li blockquote h4::before {
      content: '\002D';
    }
  }
}

.footer {
  max-width: var(--mobile-max-width);
  padding: 2em 0;

  font-size: var(--footer-font-size);
  text-align: center;
  color: var(--secondary-color);

  @media only screen and (max-width: 64em) {
    max-width: var(--tablet-max-width);
    margin: 0 auto;
  }

  @media screen and (min-width: 64.5em) {
    max-width: var(--desktop-max-width);
    margin: 0 auto;
  }
}