:root {
    /*light custom buttons - dev page*/
    --lgt-btn-a-back: #b5c99a;
    --lgt-btn-a-text: #fffeec;
    --lgt-btn-a-hov: #862b0d;
    --lgt-btn-b-back: #e9db50;
    --lgt-btn-b-text: #a651b1;
    --lgt-btn-b-hov: #eb3889;
    --lgt-btn-c-back: #a68dad;
    --lgt-btn-c-text: #ffffff;
    --lgt-btn-c-hov: #7d6e83;
    --lgt-btn-d-back: #9bbc0f;
    --lgt-btn-d-text: #0f380f;
    --lgt-btn-d-hov: #70981c;
    /*dark custom buttons - dev page*/
    --drk-btn-a-back: #fffeec;
    --drk-btn-a-text: #862b0d;
    --drk-btn-a-hov: #b5c99a;
    --drk-btn-b-back: #eb3889;
    --drk-btn-b-text: white;
    --drk-btn-b-hov: #a651b1;
    --drk-btn-c-back: #ec6e4c;
    --drk-btn-c-text: white;
    --drk-btn-c-hov: #ebbca9;
    --drk-btn-d-back: #9bbc0f;
    --drk-btn-d-text: #0f380f;
    --drk-btn-d-hov: #70981c;
  }
  p {
    color: var(--drk-paragraph-color);
  }

  .developer-header {
    
    margin: auto;
    text-align: left;
  }

  .p-container {
    margin: auto;
    position: relative;
    z-index: 1;
  }
  .developer-container {
    max-width: 80%;
    margin: 0 auto;
  }
  
  .card-view {
    -webkit-box-shadow: 0 10px 10px 0 rgba(255, 255, 255, 0.5);
    box-shadow: 0 10px 10px 0 rgba(255, 255, 0, 0.05);
    border-radius: 20px;
    padding: 10px;
    margin-bottom: 20px;
    background: #393646;
    background: linear-gradient(0deg, rgba(57, 54, 70, 1) 0%, rgba(79, 69, 87, 1) 20%, rgba(109, 93, 110, 1) 100%);
  }
  .flex-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
  }
  .spacer {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  
  .dev-projects {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
  }
  
  .dev-projects li:first-child {
    margin-top: 0;
  }
  .dev-projects li {
    width: 100%;
    position: relative;
    margin-top: 50px;
  }

  .dev-projects-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 20px;
  }

  .fade-in[data-scroll] {
    opacity: 0;
    will-change: transform, scale, opacity;
    -webkit-transform: translateY(6rem) scale(0.93);
    transform: translateY(6rem) scale(0.93);
    transition: all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  
  .fade-in-right[data-scroll] {
    opacity: 0;
    will-change: transform, scale, opacity;
    -webkit-transform: translatex(6rem) scale(0.93);
    transform: translatex(6rem) scale(0.93);
    transition: all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  .fade-in-left[data-scroll] {
    opacity: 0;
    will-change: transform, scale, opacity;
    -webkit-transform: translatex(-6rem) scale(0.93);
    transform: translatex(-6rem) scale(0.93);
    transition: all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  
  .fade-in[data-scroll="in"],
  .fade-in-right[data-scroll="in"],
  .fade-in-left[data-scroll="in"] {
    opacity: 1;
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
  }

 /* developer page */ 
  @media (max-width: 1200px) {

    .developer-btn-project-a {
      background-color: var(--drk-btn-a-back);
      color: var(--drk-btn-a-text);
    }
    .developer-btn-project-a:hover {
      background-color: var(--drk-btn-a-hov);
    }
  
    .developer-btn-project-b {
      background-color: var(--drk-btn-b-back);
      color: var(--drk-btn-b-text);
    }
    .developer-btn-project-b:hover {
      background-color: var(--drk-btn-b-hov);
    }
  
    .developer-btn-project-c {
      background-color: var(--drk-btn-c-back);
      color: var(--lgt-btn-c-text);
    }
    .developer-btn-project-c:hover {
      background-color: var(--drk-btn-c-hov);
    }
  
    .developer-btn-project-d {
      background-color: var(--drk-btn-d-back);
      color: var(--drk-btn-d-text);
    }
    .developer-btn-project-d:hover {
      background-color: var(--drk-btn-d-hov);
    }
    /*light dev page btns*/
    .light .developer-btn-project-a {
      background-color: var(--lgt-btn-a-back);
      color: var(--lgt-btn-a-text);
    }
    .light .developer-btn-project-a:hover {
      background-color: var(--lgt-btn-a-hov);
    }
  
    .light .developer-btn-project-b {
      background-color: var(--lgt-btn-b-back);
      color: var(--lgt-btn-b-text);
    }
    .light .developer-btn-project-b:hover {
      background-color: var(--lgt-btn-b-hov);
    }
  
    .light .developer-btn-project-c {
      background-color: var(--lgt-btn-c-back);
      color: var(--lgt-btn-c-text);
    }
    .light .developer-btn-project-c:hover {
      background-color: var(--lgt-btn-c-hov);
    }
  
    .light .developer-btn-project-d {
      background-color: var(--lgt-btn-d-back);
      color: var(--lgt-btn-d-text);
    }
    .light .developer-btn-project-d:hover {
      background-color: var(--lgt-btn-d-hov);
    }
  }
  @media (max-width: 960px) {
  }
  @media (max-width: 768px) {
  }
  @media (max-width: 480px) {
  }
  
  @media (max-width: 767px) {}