@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* variables */
:root {
  /* Colors */
  --primary-color: #f1a16c;
  --secondary-color: #f1a16c;
  --bg-primary: #ffffff;
  --text-color: #1b1b1b;
  --text-color-two: #ffffff;
  --bg-secondary: #E5E5E5;
  --card-background: #FDF6F2;
  --bg-secondary-two: #1b1b1b;
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  --solo-black: #1B1B1B;
  --solo-white: #ffffff;
  

  /* Font Weight */
  --weight-x-small: 300;
  --weight-small: 400;
  --weight-semibold: 600;
  --weight-bold: 800;

  /* Max width */
  --width-small: 768px;
  --width-medium: 1480px;
  --width-large: 1680px;
}

[data-theme="dark"] {
  --primary-color: #FFB27F;
  --secondary-color: #FFB27F;
  --bg-primary: #000000;
  --text-color: #ffffff;
  --text-color-two: #1b1b1b;
  --bg-secondary: #1b1b1b;
  --card-background: #1b1b1b;
  --bg-secondary-two: #FDF6F2;
  --shadow: 0 2px 10px rgba(95, 95, 95, 0.2);
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
}
p, li, em {
  margin: 1rem 0;
  line-height: 1.8rem;
  text-rendering: optimizeLegibility;
}

/* Reset default styling */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
  list-style: none;
}

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

.link {
  color: var(--primary-color);
  font-weight: 800;
  &:hover {
    color: var(--text-color);
    transition: all .3s ease;

  }
}
.link.is-disabled {
  cursor: not-allowed;
  filter: saturate(0.2);
}
.link.is-disabled > a {
  color: currentColor;
  display: inline-block;  /* For IE11/ MS Edge bug */
  pointer-events: none;
}
/* Main styling */
body {
  background: var(--bg-primary);
  color: var(--text-color);
  font-family: "Poppins", sans-serif;
  line-height: 1.5;
}

h1,
h2,
h3  {
  font-family: "Cabin", sans-serif;
}

.animation {
  animation-duration: 600ms;
  animation-fill-mode: both;
}
.fadeIn {
  animation-name: fadeIn;
}

/* HEADER */
.navbar {
  .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 20;
    /*height: 7.5rem;*/
    width: 100%;
    padding: 5rem 2rem;
  }

  .nav-menu {
    display: flex;
    align-items: center;
    background: var(--bg-primary);

    a.nav-link.btn.btn-primary {
      margin-right: 1.5rem;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        position: relative;
        right: -5px;
      }
    }
  }

  .nav-menu.active {
      position: absolute !important;
  }

  #logo {
    font-size: 1.6rem;
    line-height: 2.2rem;
    font-weight: var(--weight-x-small);
  }
}


/* HEADER MOBILE */
/* hamburger */
.hamburger {
  margin-bottom: 0.5rem;
  display: none;
}

.bar {
  display: block;
  width: 23px;
  height: 3px;
  margin: 4px auto;
  transition: all 0.3s ease-in-out;
  border-radius: 30px;
  background-color: var(--bg-secondary-two);
}


/* CONTENT */

/* hero */
#hero {
  display: flex;
  flex-direction: column;
  height: 100%;
}


@keyframes bounce {
  from {
    transform: translateY(0px);
  }

  to {
    transform: translateY(-10px);
  }
}



/* Projects home */
#projects {
  display: flex;
  flex-direction: column;
  margin: 3rem auto;

  .project {
    display: flex;
    flex-flow: column wrap;
    max-height: 110rem;
  
    .card {
      margin: 1.3rem;
      overflow: hidden;
      position: relative;
      color: #FFFFFF;
  
      .project-bio {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        position: relative;
        color: #FFFFFF;
  
        p {
          font-size: 1.4rem;
        }
  
        h3 {
          font-size: 2rem;
        }
      }
  
      .project-info {
        opacity: 0;
        transition: 0.5s ease-in-out;
        position:absolute; 
        width:93%;
        height:94%;
        top:1rem;
        left: 1rem;
      }
    }
  }
}


/* FOOTER */
#footer {
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 10rem;
    text-align: center;
    padding-top:0;

    a {
      font-size: 1.4rem;
      &:hover {
        opacity: 0.6;
      }
    }

    p {
      font-size: 0.8rem;
    }
  }
}