:root {
    --text: hsl(0, 0%, 0%);
    --background: hsl(240, 11%, 96%);

    --bg-primary: hsl(207, 28%, 70%);
    --bg-secondary: hsl(240, 14%, 85%);
    --bg-accent: hsl(178, 14%, 45%);
    --bg-cta: hsl(39, 100%, 50%);
    --bg-cta-200: hsl(39, 100%, 55%);


    --font-family-heading: 'Oswald', sans-serif;
    --font-fmaily-body: 'Montserrat', sans-serif;

    --font-weight-thin: 200;
    --font-weight-regular: 400;
    --font-weight-bold: 700;

    --font-size-300: 0.750rem; /* 12px */
    --font-size-400: 1rem;  /* 16px */
    --font-size-500: 1.333rem; /* 21.28px */
    --font-size-600: 1.777rem; /* 28.48px */
    --font-size-700: 2.369rem; /* 37.92px */
    --font-size-800: 3.158rem; /* 50.56px */
    --font-size-900: 4.210rem; /* 67.36px */
}

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

h1, h2, h3, h4, h5 {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
  }

h1, h2 {
    line-height: 1.2;
    text-transform: uppercase;
}

h1 {font-size: var(--font-size-900)}

h2 {
    font-size: var(--font-size-800); 
    text-decoration: underline;
    text-align: center;
}

h3 {font-size: var(--font-size-700);}

h4 {font-size: var(--font-size-600);}

h5 {font-size: var(--font-size-500);}

small {font-size: var(--font-size-300);}

p{
    font-family: var(--font-fmaily-body);
    font-size: var(--font-size-400);
    color: hsl(0, 0%, 15%);
    line-height: 1.6;
}



/* START HEADER */
header{
    max-width: 2160px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header label {
    color: var(--text);
    font-size: var(--font-size-600);
    text-transform: uppercase;
}

.navigation-bar-links {
    list-style-type: none;
    display: flex;
    gap: 1em;
}
  

.navigation-bar a{
    color: var(--text);
    text-decoration: none;
    text-transform: uppercase;
    font-size: var(--font-size-500);
}

.navigation-bar a:hover{
    color: var(--text);
    text-decoration: underline;
}

.navigation-bar a.active {
    background-color: hsl(158, 95%, 34%);
    color: var(--text);
  }
/* END HEADER */



/* START HERO SECTION */
.hero {
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: hsla(200, 50%, 15%, 0.2);
    display: block;
}

.profile-picture {
    max-width: 1000px;
    margin: auto;
    padding: 0;
    position: relative;
}

.profile-picture-image {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.name-container {
    width: 100%;
    position: absolute;
    top: 10px;
    z-index:-1;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.name-marquee {
    font-family: 'Six Caps', sans-serif;
    font-size: 35em;
    color: hsla(0, 0%, 30%, 0.6);
    text-transform: uppercase;
    white-space: nowrap;
    margin: 0;
    animation: name-marquee 20s linear infinite; 
    -moz-animation: name-marquee 20s linear infinite;
    -webkit-animation: name-marquee 20s linear infinite;
}

@keyframes  name-marquee {
    from {
      transform: translateX(100%);
      -moz-transform: translateX(100%); 
      -webkit-transform: translateX(100%);
    }
    to {
      transform: translateX(-100%);
      -moz-transform: translateX(-100%);
      -webkit-transform: translateX(-100%);
    }
}
/* END HERO SECTION */

/* BODY CONTENT */
.container {
    max-width: 2160px;
    margin: auto;
    padding: 1em;
}

.portfolio-projects, .resume, .contact {
    background-color: var(--background);
}

.cards {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    gap: .5em;
    margin: 0;
    padding: 0;
}

.card {
    width: 370px;
    height: auto;
    background-color: hsl(0, 10%, 90%);
    border-radius: .8em;
    margin: 0;
    padding: 0;
    padding: 5px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

.card-title {
    text-align: center;
    text-decoration: underline;
}

/* START FOOTER SECTION */
footer {
    margin-top: 50px;
}

.footer-content {
    max-width: 2160px;
    margin: auto;
}

.footer-content p {
    font-family: 'Rock Salt', cursive;
    text-align: center;
    margin: auto;
  }

  .social-media {
    list-style-type: none;
    text-decoration: none;
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.social-media img {
    width: 25px;
}
/* END FOOTER SECTION */



/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
      scroll-behavior: auto;
    }
  
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
}

/* MOBILE MEDIA QUERIES */
@media (max-width:31.25em) {
    :root {
        --font-size-300: 1rem; /* 16.00px */
        --font-size-400: 1.125rem;  /* 18.00px */
        --font-size-500: 1.266rem; /* 20.25px */
        --font-size-600: 1.424rem; /* 22.78px */
        --font-size-700: 1.602rem; /* 35.63px */
        --font-size-800: 1.802rem; /* 28.83px */
        --font-size-900: 2.027rem; /* 32.44px */
    }
}	

@media (max-width:50em) and (min-width:31.25em) {
    :root {
        --font-size-300: 0.8rem; /* 12.80px */
        --font-size-400: 1rem;  /* 16px */
        --font-size-500: 1.25rem; /* 20.00px */
        --font-size-600: 1.563rem; /* 25.00px */
        --font-size-700: 1.953rem; /* 31.25px */
        --font-size-800: 2.441rem; /* 39.06px */
        --font-size-900: 3.052rem; /* 48.83px */
    }
} 

@media (max-width:50em) {
    .primary-navigation {
        display: none;

        position: fixed;
        padding: 1rem;
        inset: 4rem 1rem auto;
        max-width: 25rem;
        margin-left: auto;
        background-color: var(--background);
        border-radius: 10px;
        box-shadow: 0 0 0.75em rgb(0,0,0,0.05);
        z-index: 999;
    }

    /* .primary-navigation::before {
        content: "";
        position: fixed;
        inset: 0;
        background-image: linear-gradient(rgb(0 0 0 / 0), rgb(0 0 0 / 0.8));
    } */

    .primary-navigation[data-visible] {
        display: block;
    }

    .navigation-list {
        display: grid;
        gap: 1rem;
        text-align: center;
    }
    
    .mobile-nav-toggle {
        display: block;
        cursor: pointer;
        background: transparent;
        border: 0;
        padding: 0.5em;
    }

    .mobile-nav-toggle .icon-close {
        display: none;
    }
}