@import url("https://fonts.googleapis.com/css2?family=Poppins&family=Rubik&display=swap");

:root {
  --background-color-dark: rgba(19, 20, 21, 1);
  --background-color-white: rgba(251, 251, 251, 1);
  --text-white: rgba(255, 255, 255, 1);
  --text-black: rgba(51, 50, 50);

  --text-white: rgba(255, 255, 255, 1);
  --text-color: var(--text-black);
  --primary-color: rgba(255, 87, 51, 1);
  --secondary-color: rgba(144, 12, 63, 1);
  --primary-button: rgba(255, 3, 62, 0.8);
  --secondary-button: rgba(77, 112, 230, 0.8);
  --background-color: var(--background-color-white);

  --primary: rgba(255, 87, 51, 1);
  --secondary: rgba(61, 61, 107, 1);
  --tertiary: rgba(173, 212, 92, 1);
  --light: rgb(230, 230, 230);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  color: var(--text-color);
  margin: 0;
  font-family: "Poppins", sans-serif;
}

.poppins {
    font-family: "Poppins", sans-serif;
}

.rubik {
    font-family: "Rubik", sans-serif;
}

.nunito {
    font-family: "Nunito", sans-serif;
}

.calistoga {
    font-family: "Calistoga", sans-serif;
}

.scroll-progress {
  height:5px;
  position:fixed;
  top:0;
  z-index: 1;
  background: var(--tertiary);
  width:100%;
  scale: 0 1;
  transform-origin: left;
  animation: progress linear;
  animation-timeline: scroll(y);
}

@keyframes progress {
  to { scale: 1 1; }
}

html {
  line-height: 1.5;
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  background-color: var(--background-color);
}

a {
  text-decoration: none;
  color: var(--text-color);
  font-weight: 500;
}

.text-white {
  color: var(--text-white) !important;
}

img {
  max-width: 100%;
  display: block;
}

.lh-0 {
  line-height: 0;
  padding:0;
  margin:0;
  padding-top:5px !important;
}

.rotate {
  rotate: 90deg;
}

.container {
  max-width: 1200px;
  margin: auto;
  padding: 0 1rem;
}

.container-fluid {
  width: 100%;
  display:block;
}

/* NAVBAR */
.navbar {
  padding: 3rem 0;
  z-index: 3;
  background-color: var(--primary-color);
}

.navbar__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar__logo {
  font-weight: bold;
  padding: 0.5rem 0.5rem 0.5rem 0;
  color: var(--text-white);
}

.navbar__links {
  list-style: none;
  padding: 0;
  align-items: center;
  display: none;
}

.navbar__links-item {
  padding: 0 1rem;
}

.navbar__links-item:last-child {
  padding-right: 0;
}

.navbar__links-item a {
  position: relative;
  color: var(--text-white);
}

.navbar__links-item a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -10px;
  left: 0;
  background-color: var(--text-white);
  visibility: hidden;
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out 0s;
}

.navbar__links-item a:hover::before {
  visibility: visible;
  transform: scaleX(1);
}

/* HAMBURGER MENU */
.navbar__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 1.5rem;
  cursor: pointer;
}

.navbar__hamburger-line {
  width: 100%;
  height: 2px;
  background-color: var(--text-white);
  margin-bottom: 4px;
  transition: transform 0.3s ease-in-out 0s;
}

.navbar__hamburger--active .navbar__hamburger-line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.navbar__hamburger--active .navbar__hamburger-line:nth-child(2) {
  opacity: 0;
}

.navbar__hamburger--active .navbar__hamburger-line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.section-1{
    background-color: var(--primary-color);
}

/* MOBILE MENU */
.mobile__menu {
  position: fixed;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: var(--background-color);
  z-index: 2;
  transition: left 0.3s ease-in-out 0s;
}

.mobile__menu--active {
  left: 0;
}

.mobile__nav {
  margin: 1rem 0;
}

.mobile__links {
  list-style: none;
  padding: 0;
  align-items: center;
}

.mobile__links-item {
  padding: 1rem 0;
}

.mobile__links-item:hover {
  background-color: var(--primary);
}

.mobile__links-item:hover a {
  color: var(--text-white);
}

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

@media (min-width: 768px) {
    /* NAVBAR */
    .navbar__links {
        display: flex;
    }

    /* HAMBURGER MENU */
    .navbar__hamburger {
        display: none;
    }

    /* MOBILE MENU */
    .mobile__menu {
        visibility: visible;
        transform: translateX(-100%);
    }

    /* MODIFIER CLASS */
    .text-align {
        text-align: left;
    }
}


/* CUSTOM STYLINGS */
.primary {
    background-color: var(--primary);
}

.secondary {
    background-color: var(--secondary);
}

.tertiary {
    background-color: var(--tertiary);
}

.light {
    background-color: var(--light);
}

.border-primary {
    border: 1px solid var(--primary) !important;
}

.border-secondary {
    border: 1px solid var(--secondary) !important;
}

.border-tertiary {
    border: 1px solid var(--tertiary) !important;
}

.rounded-sm {
    border-radius: 5px;
}

.rounded-md {
    border-radius: 10px;
}

.rounded-lg {
    border-radius: 20px;
}

.section-1, .flex-box {
    display: flex;
    justify-content: center;
    align-items: center;
}

.card {
    width:25%;
    float:left;
    padding:5px;
}

.card__container {
    height:200px !important;
    border:1px solid #000;
    padding:5px 10px;
    border-radius: 10px;
}

.title {
    color: var(--primary);
}

.bold {
    font-weight: bold;
}

.justify {
    text-align: justify;
}

.text-center {
    text-align: center !important;
}

.text-xs {
    font-size:11px !important;
}

.text-sm {
    font-size:13px !important;
}

.text-md {
    font-size:15px !important;
}

.text-lg{
    font-size:20px !important;
}

.text-light {
    color: #ffffff !important;
}

.m-tight {
    margin:0 !important;
}

.m-loose {
    margin:10px !important;
}

.p-tight {
    padding:0 !important;
}

.p-loose {
    padding:10px !important;
}

.b-bottom {
    border-bottom: 1px solid var(--primary);
}

.badge {
  border:1px solid #000;
  margin-bottom:5px !important;
  font-size: 10px;
  font-weight: bold;
  padding:1px 8px;
  border-radius: 5px;
  background: var(--tertiary);
}

.height-100{
    height:100vh;
}

.section-1 #main-img {
    float:left;
}

#development-tools {
  background: rgb(255, 255, 255, 0.7);
  padding:0;
  border-radius: 20px;
  text-align: center;
}

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

.section-1 ul li {
  display:inline-block;
  width:15%;
  height:100px;
  vertical-align: middle;
  padding:20px 0 0 20px;
}

.section-1 ul li img {
  display: flex;
  width:50px;
}

#bootstrap, #mongo {
  width: 60px !important;
  margin-top:10px !important;
}

#tailwind {
  width: 70px !important;
  margin-top:20px !important;
}

#mysql {
  width: 70px !important;
}

.main-intro {
    padding:0 20px 30px 0;
    margin: auto !important;
    margin-top:0;
    border-radius: 50px;
    color: var(--text-white);
    font-weight: bold;
    text-shadow: 1px 1px #000;
    font-size: 20px;
}

.emphasize {
    color: var(--secondary);
    font-weight: bolder !important;
    text-shadow: 0 1px #FFF;
    line-height: 1;
}

.uppercase {
  text-transform: uppercase !important;
}

.main-intro .emphasize {
    font-size: 30px;
}

.button {
    background-color: var(--tertiary);
    padding:5px 20px;
    font-size:15px;
    text-shadow: none;
    font-weight: bold;
    border-radius: 5px;
    border:1px solid #ffffff;
    box-shadow: 0 5px 15px 0 rgba(62, 61, 61, 0.5);
}

/* About me section */
.about{
    padding:20px 100px;
}

#about img {
    width:20%;
    float:left;
    margin:5px;
    margin-right:30px;
    text-shadow: 1px 1px var(--secondary) !important;
    border-radius: 50%;
}

.text{
    display: block;
    text-indent: 3em;
    line-height: 1.3;
}

/* Testimonials section */

#testimonials .w3-third {
  padding:10px;
}

.section-1 {
  z-index: 100 !important;
}
#testimonials {
  /* background: var(--secondary); */
  background:#eee;
  opacity:0;
  padding-top:300px;
  animation: fade-top linear forwards;
  animation-timeline: view();
  animation-range: 250px 600px;
}

.testimonials-container {
  padding:20px;
  background: var(--background-color-white);
  border-radius: 10px;
  min-height: 80vh;
  border-top:5px solid var(--tertiary) !important;
  box-shadow: 0 5px 15px 0 #aaa;
}

@keyframes fade-top {
  to { opacity:1; padding-top:0;}
}

@keyframes fade-top-work {
  to { opacity:1; }
}

.work-container {
  opacity:0;
  animation: fade-top-work linear forwards;
  animation-timeline: view();
  animation-range: 200px 350px;
}


/* Work section */
.work-container {
  border:1px solid var(--primary);
  padding:10px 20px;
  margin:10px 0;
  margin-top:0 !important;
  border-radius: 20px;
  background: #fffbfb;
  box-shadow: 0 5px 15px 0 #aaa;
}

.work-container .header {
  margin:10px 0;
  border-bottom:3px solid var(--primary);
  font-size:15px;
}

.work-container .header span {
  font-size:12px !important;
}

.work-container p {
  margin:8px 0;
}

.sites {
  background:#eee;
  padding:10px;
  border-radius: 10px;
}

#site {
  background: var(--secondary) !important;
  font-size:12px;
  padding:2px 10px;
  color: var(--text-white);
  border-radius: 5px;
  display:inline-block;
}

blockquote {
  font-size:12px;
}

/* Footer section */
footer {
  margin-top: 100px;
  margin:0;
  padding:0;
  width: 100%;
  min-height:50%;
  background: var(--tertiary);
  padding-top:15px;
}

footer img {
  width:50px;
  float:left;
}
footer #gmail {
  margin:35px;
}

footer ul li {
  display: flex;
  padding:10px 0;
}
footer ul li a {
  color: var(--text-black);
  font-weight: bold;
}

#footer-links ul li a:hover {
  color: var(--text-white);
}

#footer-links a:after {
  display:block;
  content: '';
  border-bottom: solid 3px var(--primary);  
  transform: scaleX(0);  
  transition: transform 250ms ease-in-out;
}

#footer-links a:hover:after { 
  transform: scaleX(1); 
}

#footer-links a.fromRight:after { 
  transform-origin:100% 50%; 
}

#footer-links a.fromLeft:after {
  transform-origin:  0% 50%;
}

@media (max-width: 1023px) {
    .main-intro, .main-intro .emphasize {
        font-size: 15px;
        padding:0 !important
    }

    #development-tools {
      background: none;
      margin-top:20px;
    }

    .section-1 ul li {
      width:15%;
      padding:0;
    }

    .section-1 ul li img {
      width:80% !important;
    }

    #bootstrap, 
    #mongo,
    #tailwind {
      margin-top:10px !important;
    }

    #javascript, #jquery {
      padding-top: 10px;
    }
    
    .section-1 ul li img {
      width:100%;
    }

    .height-100{
        height:auto;
    }

    #about{
      padding:0;
    }

    #work .container {
      padding:0;
    }

    .badge {
      display:inline-block;
    }

    #testimonials .w3-third {
      width:100%;
    }
    .testimonials-container {
      min-height: auto;
    }
}
@media (max-width: 426px) {
    .section-1 {
        display: block;
    }

    .w3-container.section-1, 
    .w3-container {
        padding:0 !important;
        text-align: center !important;
        width:100% !important;
    }

    .section-1 .w3-third {
        width:100% !important;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .main-intro {
        padding:0 10px !important;
    }

    .section-1 img {
        margin-top:50px !important;
    }

    .main-intro, .main-intro .emphasize {
        padding:0;
        font-size:15px !important;
    }

    .navbar {
        padding: 1rem 0;
    }

    #about{
        padding:10px 30px;
    }

    #about img {
        width:100%;
        border-radius: 50% !important;
        border:1px solid var(--secondary);
        margin-bottom: 10px;
    }

    .title{
        font-size: 20px;
        line-height: 2;
        text-align: center;
    }

    #development-tools {
      background: none;
    }

    .section-1 ul li {
      width:20%;
      padding:0;
    }

    #bootstrap, #mongo  {
      width: 60px !important;
      margin-top: 60px !important;
    }
    #tailwind {
      margin-top:70px !important;
    }
    
    .section-1 ul li img {
      width:100%;
    }

    .work-container .header {
      font-size:13px;
      display:block;
      padding-bottom: 20px;
    }

    .work-container .header span {
      font-size:11px;
    }

    .location {
      display:none;
    }
    footer {
      height: auto !important;
    }
    footer .w3-half {
      position: relative;
    }
    footer ul li{
      display: flex;
      padding:2px 0;
    }
}