/* Variables */
:root {
    color-scheme: dark light;

    --hue: 171;
    --hue2: 342;
    --saturation: 100%;
    --lightness: 60%;

    /* light */
    --primary-light: hsl(var(--hue) var(--saturation) var(--lightness));
    --accent-light: hsl(var(--hue2) var(--saturation) var(--lightness));
    --text-light: hsl(var(--hue) var(--saturation) 10%);
    --text1-light: hsl(var(--hue) 30% 30%);
    --bg-light: hsl(var(--hue) 25% 90%);
    --nav-light: hsl(var(--hue) 20% 99%);
    --icon-light: hsl(var(--hue) 20% 82%);
    --input-light: hsl(var(--hue) 20% 85%);
    --shadow-light: hsl(var(--hue) 10% 20%);
    --shadow-light-strength: .02;

    /* dark */
    --primary-dark: hsl(
        var(--hue) 
        calc(var(--saturation) / 2) 
        calc(var(--lightness) / 1.5)
      );
    --accent-dark: hsl(
      var(--hue2) 
      calc(var(--saturation) / 2) 
      calc(var(--lightness) / 1.5)
      );
    --text-dark: hsl(var(--hue) 15% 85%);
    --text1-dark: hsl(var(--hue) 5% 65%);
    --bg-dark: hsl(var(--hue) 10% 10%);
    --nav-dark: hsl(var(--hue) 10% 15%);
    --icon-dark: hsl(var(--hue) 5% 30%);
    --input-dark: hsl(var(--hue) 5% 25%);
    --shadow-dark: hsl(var(--hue) 50% 3%);
    --shadow-dark-strength: .8;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --bg-color: var(--bg-dark);
      --primary-color: var(--primary-dark);
      --accent-color: var(--accent-dark);
      --icon-color: var(--icon-dark);
      --text-color: var(--text-dark);
      --text1-color: var(--text1-dark);
      --nav-color: var(--nav-dark);
      --input-color: var(--input-dark);
      --shadow-color: var(--shadow-dark);
      --shadow-strength: var(--shadow-dark-strength);
    }
  }

  @media (prefers-color-scheme: light) {
    :root {
      --bg-color: var(--bg-light);
      --primary-color: var(--primary-light);
      --accent-color: var(--accent-light);
      --icon-color: var(--icon-light);
      --text-color: var(--text-light);
      --text1-color: var(--text1-light);
      --nav-color: var(--nav-light);
      --input-color: var(--input-light);
      --shadow-color: var(--shadow-light);
      --shadow-strength: var(--shadow-light-strength);
    }

    .navbar {
      box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    }

    
  }

  [color-scheme="dark"] {
      --bg-color: var(--bg-dark);
      --primary-color: var(--primary-dark);
      --accent-color: var(--accent-dark);
      --icon-color: var(--icon-dark);
      --text-color: var(--text-dark);
      --text1-color: var(--text1-dark);
      --nav-color: var(--nav-dark);
      --input-color: var(--input-dark);
  }

  [color-scheme="light"] {
      --bg-color: var(--bg-light);
      --primary-color: var(--primary-light);
      --accent-color: var(--accent-light);
      --icon-color: var(--icon-light);
      --text-color: var(--text-light);
      --text1-color: var(--text1-light);
      --nav-color: var(--nav-light);
      --input-color: var(--input-light);
  }

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body{
  margin: 0;
  background-color: var(--bg-color);
  font-family: 'Lato', sans-serif;
  color: var(--text-color);
  overflow-x: hidden;
}

h2 {
  margin-bottom: 1.5rem;
}

section {
  padding: 4rem 0;
}

ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

 html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
  }
  
  /* Sections
     ========================================================================== */
  
  /**
   * Remove the margin in all browsers.
   */
  
  
  
  /**
   * Render the `main` element consistently in IE.
   */
  
  main {
    display: block;
  }
  
  /**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */
  
  h1 {
    font-size: 2em;
    margin: 0.67em 0;
  }
  
  /* Grouping content
     ========================================================================== */
  
  /**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */
  
  hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
  }
  
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  
  pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  
  /* Text-level semantics
     ========================================================================== */
  
  /**
   * Remove the gray background on active links in IE 10.
   */
  
  a {
    background-color: transparent;
  }
  
  /**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */
  
  abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
  }
  
  /**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
  
  b,
  strong {
    font-weight: bolder;
  }
  
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  
  code,
  kbd,
  samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  
  /**
   * Add the correct font size in all browsers.
   */
  
  small {
    font-size: 80%;
  }
  
  /**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */
  
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  
  sub {
    bottom: -0.25em;
  }
  
  sup {
    top: -0.5em;
  }
  
  /* Embedded content
     ========================================================================== */
  
  /**
   * Remove the border on images inside links in IE 10.
   */
  
  img {
    border-style: none;
    max-width: 100%;
  }
  
  /* Forms
     ========================================================================== */
  
  /**
   * 1. Change the font styles in all browsers.
   * 2. Remove the margin in Firefox and Safari.
   */
  
  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
    outline: none;
    border: none;
  }
  
  /**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */
  
  button,
  input { /* 1 */
    overflow: visible;
  }
  
  /**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */
  
  button,
  select { /* 1 */
    text-transform: none;
  }
  
  /**
   * Correct the inability to style clickable types in iOS and Safari.
   */
  
  button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
    -webkit-appearance: button;
  }
  
  /**
   * Remove the inner border and padding in Firefox.
   */
  
  button::-moz-focus-inner,
  [type="button"]::-moz-focus-inner,
  [type="reset"]::-moz-focus-inner,
  [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }
  
  /**
   * Restore the focus styles unset by the previous rule.
   */
  
  button:-moz-focusring,
  [type="button"]:-moz-focusring,
  [type="reset"]:-moz-focusring,
  [type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
  }
  
  /**
   * Correct the padding in Firefox.
   */
  
  fieldset {
    padding: 0.35em 0.75em 0.625em;
  }
  
  /**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    `fieldset` elements in all browsers.
   */
  
  legend {
    box-sizing: border-box; /* 1 */
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
  }
  
  /**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */
  
  progress {
    vertical-align: baseline;
  }
  
  /**
   * Remove the default vertical scrollbar in IE 10+.
   */
  
  textarea {
    overflow: auto;
  }
  
  /**
   * 1. Add the correct box sizing in IE 10.
   * 2. Remove the padding in IE 10.
   */
  
  [type="checkbox"],
  [type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
  }
  
  /**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */
  
  [type="number"]::-webkit-inner-spin-button,
  [type="number"]::-webkit-outer-spin-button {
    height: auto;
  }
  
  /**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */
  
  [type="search"] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
  }
  
  /**
   * Remove the inner padding in Chrome and Safari on macOS.
   */
  
  [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  
  /**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */
  
  ::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
  }
  
  /* Interactive
     ========================================================================== */
  
  /*
   * Add the correct display in Edge, IE 10+, and Firefox.
   */
  
  details {
    display: block;
  }
  
  /*
   * Add the correct display in all browsers.
   */
  
  summary {
    display: list-item;
  }
  
  /* Misc
     ========================================================================== */
  
  /**
   * Add the correct display in IE 10+.
   */
  
  template {
    display: none;
  }
  
  /**
   * Add the correct display in IE 10.
   */
  
  [hidden] {
    display: none;
  }


  /* Houdini paint custom properties */
  .houdini-mix {
    --houdini-mix-min-snow: 15;
    --houdini-mix-max-snow: 30;
    --houdini-mix-min-triangle: 50;
    --houdini-mix-max-triangle: 100;
    --houdini-mix-fill: full;
    --houdini-mix-flakes: 30;
    --houdini-mix-triangles: 40;
    --houdini-mix-snow-hue: var(--hue2);
    --houdini-mix-triangle-hue: var(--hue);
    background-image: paint(houdini-mix);
  }



  
    /* navbar/vertical */
    
    .navbar{
        /* background: #181818; */
        background-color: var(--nav-color);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        position: fixed;
        min-height: 100vh;
        z-index: 100;

    }

    .nav-primary-items {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .nav-primary-items li.active .scroll{
        color: var(--primary-color);
    }
    
    .nav-primary-items .scroll{
        font-size: 1.2rem;
        color: var(--text1-color);
    }
    .nav-primary-items .scroll:hover{
        color: var(--primary-color);
    }
    
    .nav-social-itmes li{
        margin-bottom: .3rem;
    }
    
    .nav-social-itmes i{
        color: var(--text1-color);
    }
    .nav-social-itmes i:hover{
        color: var(--primary-color);
    }

    a[data-hover] {
        position: relative;
    }
    
    a[data-hover]::after {
        content: attr(data-hover);
        text-decoration: none;
        font-family: Arial, Helvetica, sans-serif;
        display: block;
        position: absolute;
        color: var(--primary-color);
        padding: .5rem 1.5rem;
        white-space: nowrap;
        bottom: -6px;
        left: 50%;
        transform: scale(0);
        transition: transform ease-out 150ms;
           
    }

    a[data-hover]:hover::after{
        transform: scale(1);
    }

    /* theme toggle */
    .nav-logo {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
    }

    .theme {
      background-color: var(--nav-color);
      width: 3rem;
      height: 3rem;
      cursor: pointer;
      display: grid;
      justify-content: center;
      justify-items: center;
      align-items: center;
    }

    .bg-stroke {
      stroke: var(--primary-color);
    }

    /* color navigation */

    .color-navigation-container{
      position: relative;
      top: 130px;
      right: 0;
    }

    .btn-color-menu{
      position: absolute;
      top: 0;
      right: 10px;
      width: 2rem;
      aspect-ratio: 1;
      background-color: var(--primary-color);
      border-radius: 2px;
      cursor: pointer;
      z-index: 10;
    }

    .btn-color-menu::after{
      content: "";
      position: absolute;
      inset: .5rem;
      border-left: 4px solid var(--text-color);
      border-bottom: 4px solid var(--text-color);
      border-radius: 2px;
      transform: translateX(4px) rotate(45deg);
      transition: transform 250ms ease;
    }

    .btn-color-menu:hover::after  {
      opacity: .8;
    }

    .btn-color-menu.active::after {
      transform: translateX(-4px) rotate(225deg);   
    }


    .color-navigation {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 5;
      padding-right: 4rem;
      display: flex;
      gap: var(--color-nav-gap, 1rem);
      transform: translateX(100%);
      transition: all 350ms ease-in-out;
    }

    .color-navigation.show {
      transform: translateX(0);
    }

    .color-item {
      width: 2rem;
      aspect-ratio: 1;
      border-radius: 2px;
      cursor: pointer;
    }

    .main {
      --hue: 171;
      background-color: hsl(
        var(--hue) 
        calc(var(--saturation) / 2) 
        calc(var(--lightness) / 1.5)
      );
    }

    .purple {
      --hue: 283;
      background-color: hsl(
        var(--hue) 
        calc(var(--saturation) / 2) 
        calc(var(--lightness) / 1.5)
      );
    }

    .navy {
      --hue: 251;
      background-color: hsl(
        var(--hue) 
        calc(var(--saturation) / 2) 
        calc(var(--lightness) / 1.5)
      );
    }
      
    .blue {
      --hue: 193;
      background-color: hsl(
        var(--hue) 
        calc(var(--saturation) / 2) 
        calc(var(--lightness) / 1.5)
      );
    }

    .peach {--hue: 6;
      background-color: hsl(
        var(--hue) 
        calc(var(--saturation) / 2) 
        calc(var(--lightness) / 1.5)
      );
    }

    .red {
      --hue: 350;
      background-color: hsl(
        var(--hue) 
        calc(var(--saturation) / 2) 
        calc(var(--lightness) / 1.5)
      );
    }

    /* welcome section */

    
    .welcome {
        min-height: 100vh;
        display: grid;
        place-items: center;
    }

    .container {
        width: 80%;
        max-width: 1200px;
        margin: 0 auto;
    }

    .row {
        display: flex;
        justify-content: space-between;
    }

    .welcome-text {
        width: 48%;
        align-self: center;
    }

    .welcome-img {
        width: 48%;
    }

    .welcome-text h1{
        font-family: 'Roboto', sans-serif;
        color: var(--text-color);
        font-size: 4.5rem;
        font-weight:700;
        letter-spacing: .125rem;
        margin: 0;
        margin-bottom: 1rem;
    }

    .welcome-text h4{
        font-family: 'Lato', sans-serif;
        color: var(--text1-color);
        font-weight: 400;
        font-size: 1.8rem;
        letter-spacing: .125rem;
        margin: 0;
        margin-bottom: 3rem;
    }

    .btn{
      display: inline-block;
      font-family: 'Lato', sans-serif;
      font-weight: 500;
      letter-spacing: 1.3px;
      text-decoration: none;
      text-transform: uppercase;
      padding: .75rem 2rem ;
    }

    .btn-cta {
      color: var(--text-color);
      background-color: var(--primary-color);
    }

    .btn-code{
        border: 2px solid var(--primary-color);       
        color: var(--primary-color);
    }

    .btn-cta:hover,
    .btn-cta:focus {
      opacity: .8;
    }

    .btn-code:hover,
    .btn-code:focus{
        background-color: var(--primary-color);
        color: var(--bg-color);
    }

    .btn-online{
        background-color: var(--primary-color);
        color: var(--text-color);
    }

    .btn-online:hover,
    .btn-online:focus{
      opacity: .7;
    }

    /* about style */

    .about-img {
        width: 48%;
    }

    .about-text {
        width: 48%;
    }

    .about-text h2{
        font-family: 'Roboto', sans-serif;
        font-size: 2rem;
    }

    .about-text p{
        font-size: 1.1rem;
        line-height: 1.5;
        font-weight: 400;
        letter-spacing: 1.1px;
    }

    .from-left {
        transform: translateX(-30%);
        opacity: 0;
    }

    .from-right {
        transform: translateX(30%);
        opacity: 0;
    }
    
    .from-left,
    .from-right,
    .from-bottom{
        transition: 
            opacity 400ms, 
            transform 1000ms ease-out;
    }

    .from-left.appear,
    .from-right.appear {
        transform: translateX(0);
        opacity: 1;
    }

    /* skills styles */

    .skills h2 {
      text-align: center;
      font-family: 'Roboto', sans-serif;
      font-size: 2rem;
  }

    .skills p,
    .work-subheading{
      font-size: 1.1rem;
      line-height: 1.5;
      font-weight: 400;
      letter-spacing: 1.1px;
      text-align: center; 
      width: 60%;
      margin: 0 auto;
  }

    .skills-flex {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .progress-bar-container {
      width: 80%;
    }

    .progress-bar-container:not(:last-child){
      margin-bottom: 1rem;
    }

    .progress-bar-container h3 {
      font-family: 'Lato', sans-serif;
      color: var(--text1-color);
      letter-spacing: 1px;
      font-size: 1.1rem;
    }

    .progress-bar {
      width: 100%;
      height: .3rem;
      margin-top: .4rem;
      border: 1px solid #565656;
      border-radius: 5px;
      box-shadow: 0 0 10px var(--primary-color);
    }

    .percentage {
      display: block;
      height: 100%;
      background-color: var(--accent-color);
      border-radius: 5px;
      animation: progress 1500ms ease-in 1;
    }

    .html {
      width: 75%;
    }

    .css {
      width: 90%;
    }

    .javascript {
      width: 65%;
    }

    .reactJs {
      width: 55%;
    }

    .figma {
      width: 60%;
    }

    

    @keyframes progress {
      from {
          width: 0;
      }
    }

    /* work styles */
    figure {
      margin: 0;
    }
    
    .work-heading{
      font-family: 'Roboto', sans-serif;
      font-size: 2rem;
      text-align: center;
      text-transform: capitalize;
      margin-bottom: 1rem;
  }

  .work-subheading {
    margin-bottom: 2rem;
  }

  .work-items {
      display: grid;
      gap: .5rem;
      grid-template-columns: repeat(4, 1fr);
  }

  .featured {
      grid-column: 1 / span 2;
      grid-row: 1 / span 2;
  }

  .featured .work-title {
      font-size: 2em;
      text-transform: capitalize;
  }

  .featured .work-desc {
      display: block;
  }
  
  .featured .work-link{
      font-size: 1em;
  }
  .work-item {
      aspect-ratio: 4/3;
      position: relative;
      overflow: hidden;
  }


  .work-item figcaption {
      position: absolute;
      top: 100%;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgb(29, 29, 29, .7);
      color: #fff;
      padding: 1.5em;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: top ease-out 250ms;
  }

  .work-item:hover figcaption,
  .work-item:focus figcaption {
      top: 0;
  }

  .work-title {
      font-size: 1.5em;
      margin-bottom: 1em;
      color: #fff;
  }

  .work-subtitle {
    color: #fff;
  }

  

  .work-desc {
      display: none;
      margin-bottom: auto;
  }

  .work-link {
      color: var(--primary-color);
      text-decoration: none;
  }

  /* #################################### Modal ################################### */

  .work-modal {
      position: fixed;
      top: 10vh;
      bottom: 10vh;
      left: 10vw;
      right: 10vw;
      background-color: var(--nav-color);
      padding: 3em 0;
      z-index: 10;
      box-shadow: 0 0 0 10em rgba(0, 0, 0, .5);
      overflow-y: scroll;
      overflow-x: hidden;

      display: none;
  }

  .is-open {
      display: block;
  }

  .close-modal {
      outline: none;
      border: none;
      background-color: transparent;
      position: fixed;
      top: 11vh;
      left: 11vw;
      cursor: pointer;
  }

  .close-modal i {
      color: var(--accent-color);
      font-size: 1.5rem;
  }

  .work-header {
      padding: 5em 0;
      margin-bottom: 2em;
      background-size: cover;
      background-position: center;
  }

  .header-one {
      background-image: url("https://ibramaida.github.io/portfolio2021/images/work/projects-img/spacedestination.png");
      background-position: top;

  }

  .header-two {
      background-image: url("https://ibramaida.github.io/portfolio2021/images/work/projects-img/images_gallery.png");
  }

  .header-three {
      background-image: url("https://ibramaida.github.io/portfolio2021/images/work/projects-img/glassmorphism.png");
      background-position: top;
  }

  .header-four {
      background-image: url("https://ibramaida.github.io/portfolio2021/images/work/projects-img/portfoliomodalcover.png");
      background-position: bottom;
  }

  .header-five {
      background-image: url("https://ibramaida.github.io/portfolio2021/images/work/projects-img/tindog.png");
  }

  .header-sex {
      background-image: url("https://ibramaida.github.io/portfolio2021/images/work/projects-img/ecommercehome.png");
      background-position: top;
  }

  .work-title-box {
      background: rgba( 24, 24, 24, .8);
      padding: 3em;
      width: 70%;
      color: var(--nav-color);
  }

  .work-content {
      width: 85%;
      margin: 0 auto;
      padding-bottom: 2em;
      color: var(--text1-color);
  }

  .work-content p {
      padding-bottom: 1em;
      line-height: 1.5;
      letter-spacing: 1.2px;
  }

  .btn-container{
    display: flex;
    gap: 2rem;
  }

  .work-full-width {
      width: 100vw !important;
      max-width: initial;
      height: 50vh;
      
      margin: 2em calc(50% - 50vw);
      object-fit: cover;
  }

  .work-pull-left {
      width: 65% !important;
      float: left;
      margin-right: 2em;
  }

  @keyframes modalIn {
      0% {opacity: 0;}
      100% {opacity: 1;}
  }

  @keyframes modalOut {
      0% {opacity: 1;}
      100% {opacity: 0;}
  }

  /* contact style */
  .contact {
    margin-bottom: 10rem;
  }

  .contact h2 {
      text-align: center;
      font-family: 'Roboto', sans-serif;
      font-size: 2rem;
  }

  .contact-form,
  .location {
    width: 47%;
  }

  input[type=text],
  input[type=email],
  textarea {
    width: 100%;
    display: inline-block;
    padding: .5rem 1rem;
    margin: .3rem 0 1rem;
    color: var(--text-color);
    background-color: var(--input-color);
  }

  input[type=text]:focus,
  input[type=email]:focus,
  textarea:focus {
    outline: 1px solid var(--primary-color);
  }

  .contact label {
    color: var(--text1-color);
    font-size: 1.1rem;
  }

  .msg-box {
    padding: 10rem 2rem;
    display: grid;
    place-items: center;
  }

  .msg-box p {
    font-size: 1.5rem;
    line-height: 1.6;
  }

  .msg-box a {
    text-decoration: none;
    font-size: 1rem;
    color: var(--primary-color);
  }

  .hidden {
    display: none;
  }

  .error-hint {
    color: red;
  }

  .invalid {
    border: 1px solid red;
  }

  iframe{
    margin-top: .3rem;
    width: 100%;
    height: 81%;
  }

  .btn-send {
    font-family: 'Lato', sans-serif;
    background-color: var(--primary-color);
    padding: .5rem 2rem;
    font-size: 1.2rem;
    cursor: pointer;
    display: block;
    margin-left: auto;
    
  }

  .btn-send:hover,
  .btn-send:focus {
    opacity: .8;
  }
  .btn-send:hover i,
  .btn-send:focus i {
    transform: translateX(20%);
    transition: all .5s;
  }

  /* footer styles */

  footer{
    background-color: var(--nav-color);
  }

  footer p{
      text-align: center;
      color: var(--text1-color);
      font-size: .7rem;
      padding: 1.5rem;
      margin: 0;
  }

  


    @media (max-width: 1200px) {
        .container {
            width: 70%;
        }

        .welcome-text h1{
          font-size: 3.5rem;
        }

    }

    @media (max-width: 1000px) {
      :root {
        font-size: 16px;
      }
    }


    @media (max-width: 901px) {

      /* Houdini paint custom properties */
      .houdini-mix {
        --houdini-mix-min-snow: 10;
        --houdini-mix-max-snow: 20;
        --houdini-mix-min-triangle: 40;
        --houdini-mix-max-triangle: 80;
        --houdini-mix-fill: full;
        --houdini-mix-flakes: 20;
        --houdini-mix-triangles: 30;
      }

      section {
        padding-top: 6rem ;
      }

      .container {
        width: 90%;
      }
      .navbar {
        width: 100VW;
        flex-direction: row;
        min-height: initial;
        padding: 1rem 2rem;
        background-color: var(--nav-color);
      }

      .nav-primary-items {
        flex-direction: row;
      }

      .nav-social-itmes {
        display: flex;
        flex-direction: row;
        gap: .3rem;
      }

      a[data-hover]::after {
        left: -170%;
        top: 100%;
        transform: scale(0);
      }

      .nav-logo {
        flex-direction: row;
      }

      .theme {
        width: 2rem;
        height: 2rem;
      }

      .welcome-text h1 {
        font-size: 2.5rem;
      }

      .work-full-width {
        object-fit: contain;
      }
    }

    @media (max-width: 700px) {

      
      .row {
        flex-direction: column;
      }

      .welcome-text {
        margin: 2rem 0;
      }

      .welcome-text h4 {
        font-size: 1.4rem;
        margin-bottom: 2rem;
      }

      .welcome-text,
      .welcome-img,
      .about-text,
      .contact-form,
      .location {
        width: 100%;
    }

    .about-img {
      display: none;
    }

    .about-text h2 {
      text-align: center;
    }

    .from-right{
      transform: translateX(0);
    }

    .from-bottom {
      transform: translateY(30%);
    }

    .work-items {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(3, 1fr);
    }

    .contact-form {
      margin-bottom: 2rem;
    }
    
    }

    @media (max-width: 500px) {

      /* Houdini paint custom properties */
      .houdini-mix {
        --houdini-mix-min-snow: 5;
        --houdini-mix-max-snow: 15;
        --houdini-mix-min-triangle: 30;
        --houdini-mix-max-triangle: 60;
        --houdini-mix-fill: full;
        --houdini-mix-flakes: 15;
        --houdini-mix-triangles: 20;
      }

      .color-navigation {
        --color-nav-gap: .5rem;
        padding-right: 3.125rem;
      }
      
      .navbar {
        flex-direction: column;
        padding: .5rem 2rem;
      }

      .nav-primary {
        max-height: 0;
        opacity: 0;
        transition: all .3s ease-in;
      }
      .nav-primary.open {
        max-height: 500px;
        opacity: 1;
        padding: .75rem;
      }
      .nav-primary-items {
        width: 100%;
        justify-content: space-between;
      }
      .nav-social {
        display: none;
      }
      
      .hamburger {
        display: block;
      }

      
      .nav-logo {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .menu-btn {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
        cursor: pointer;
        transition: all .5s ease-in-out;
    }
      .hamburger {
        width: 30px;
        height: 2px;
        background-color: var(--primary-color);
        border-radius: 100px;
        transition: all .5s ease-in-out;
    }
  
      .hamburger::before,
      .hamburger::after {
          content: "";
          display: block;
          position: absolute;
          width: 30px;
          height: 2px;
          background-color: var(--primary-color);
          border-radius: 100px;
          transition: all .5s ease-in-out;
      }
      
      .hamburger::before {
          transform: translateY(-10px);
      }
      
      .hamburger::after {
          transform: translateY(10px);
      }
      
      .menu-btn.open .hamburger{
          transform: translateX(-50px);
          background-color: transparent;
      }
      
      .menu-btn.open .hamburger::before{
          transform: rotate(45deg) translate(35px, -35px);
      }
      
      .menu-btn.open .hamburger::after{
          transform: rotate(-45deg) translate(35px, 35px);
      }

      .skills p,
      .work-subheading {
        width: 100%;
      }

      .work-items {
        grid-template-columns: 1fr; 
    }
  
      .featured {
          grid-column: 1 ;
          grid-row: 1 ;
      }

      .work-modal{
        inset: .5rem;
      }

      .close-modal{
        top: 15vh;
        left: 1rem;
      }

      .btn-container{
        justify-content: center;
      }

  }