/* COLOR THEMES */
/* 
Blue and gray: #5D5C61 , #379683 , #7395AE , #557A95 , #B1A296

Colorful: #D79922 , #EFE2BA, #F13C20 , #4056A1 , #C5CBE3 */

.bluegray {
    color: #5D5C61;
    color: #379683;
    color: #7395AE;
    color: #557A95;
    color: #B1A296;
}

.colorful {
    color: #D79922;
    color: #EFE2BA;
    color: #F13C20;
    color: #4056A1;
    color: #C5CBE3;
}




 /* ***************************************************************** */


/* ALL */
body {
    font-family: 'Inter', sans-serif;
    position: relative;
    height: 100%;
    color: #40424a;
}

.bolded {
    font-weight: 900;
    font-size: 3em;
}

.two-em {
    font-size: 2.5em;
}

.centered {
    text-align: center;
}

.lineUp {
    animation: 2s anim-lineUp ease-out ;
    
}
  @keyframes anim-lineUp {
    0% {
      opacity: 0;
      transform: translateY(80%);
    }
    20% {
      opacity: 0;
    }
    50% {
      opacity: 1;
      transform: translateY(0%);
    }
    100% {
      opacity: 1;
      transform: translateY(0%);
    }
  }

  .red {
    color: #F13C20;
  }

  .m-20 {
    margin: 20px;
  }

  .mt-30 {
    margin-top: 30px;
  }

  .mb-25 {
    margin-bottom: 25px;
  }

  .mb-50 {
    margin-bottom: 50px;
  }

a:link { text-decoration: none; }

.white-bg {
  background-color: rgba(255,255,255,.3);
}

.color-white {
  color: white;
}

i { 
  font-weight: 1;
  font-size: .3em;
}

.underline {
  border-bottom: 2px solid currentColor;
  display: inline-block;


}

/* ----------------------------------------------------------------- */
/* INTRO  */


#intro {
    width: 100%;
    height: 100vh;
    background: url("img/magestic2-edited-dimmed-cropped.jpeg") top right;
    background-size: cover;

    /* this position changed the whole section behavior */
    position: relative;
    
    
    bottom: 0;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    /* flex-direction: column; */   


  }

  #avatar-img {
    border-radius: 50%;
    width: 60%;
    height: auto;
    margin-left: 23%;
    filter:  brightness(100%);
 
  }

  #push-right {
    margin-left: 20% ;
  }

  #unfilter {
    filter: none;
  }

/* ----------------------------------------------------------------- */
/* NAV */

#turned {

    display: inline-block;
    /* transform: rotate(90deg) translateX(99%); */
    /* background-color: yellow; */
    writing-mode: vertical-lr;
    border:#5D5C61;
    border-width: 1pxs;
    margin-right: 20px;
    text-align: center;  
    vertical-align: middle;
    overflow: hidden;
    letter-spacing: 0px;
    /* width: 100px; */
    /* height: 21%; */

    background-color: rgba(255,255,255,.3);

     
}

.navbar-nav {
    flex-direction: column;
    width: 70px;
  }
  
  .nav-link {
    padding-right: .5rem !important;
    padding-left: .5rem !important;
  }
  
  /* Fixes dropdown menus placed on the right side */
  .ml-auto .dropdown-menu {
    left: auto !important;
    right: 0px;
  }


.ml-auto .dropdown-menu {
    left: auto !important;
    right: 0px;
}

.navbar {
    padding: 0;
  }
  
  .navbar ul { 
    display: flex;
    list-style: none;
    align-items:end;
    margin: 0;
    padding: 0;
    height:fit-content
  }
  
  .navbar li {
    position: relative;
  }


/* ----------------------------------------------------------------- */
  /* ABOUT */

.about {
    margin-bottom: 300px;
    padding-top: 100px;

}


/* ----------------------------------------------------------------- */
  /* PORTFOLIO */

.portfolioClass{
    margin-bottom: auto;
    background-color:rgb(244, 250, 255);
    padding-top: 100px;

}


/* ----------------------------------------------------------------- */
  /* RESUME */

.resume{
    margin-bottom: 100px;
    /* background-color:rgb(244, 250, 255); */
    padding-top: 100px;
    min-height: 600px;
    align-items: center;

}

.resume-point-header {
    border-left: 2px solid #82909c;
    padding-left: 20px;
    position: relative;


}

.resume-point-header::before {
    content: "";
    position: absolute;
    width: 1em;
    height: 1em;
    border-radius: 50px;
    left: -9px;
    top: 5px;
    background:rgb(244, 250, 255);
    border: 2px solid #82909c;
  }

  .lineheight {
    line-height: 1.5;
  }

  .download {
    color: #F13C20;
    text-justify: center;
    align-content: center;
  }

  .pop {
    font-weight: 800;
    font-size: 1em;
  }

  .boxed {
    border: solid;
    border-width: .07em;
    border-color: #40424a;
    width:fit-content;

  }



    /* --------------- */
 /* CONTACT  */

 .contact{ 
   background-color:rgb(244, 250, 255);
   padding-top: 100px;
   display:flow-root;
 }

 .logo {
  width: 70px;
  height: auto;
  margin: 20px;
 }


 .card-text-bold {
  font-weight: 800;
  font-size: 2em;
  align-content: center;
 }

 .card-body {
  justify-content: center;
 }


 /* TESING ----------------------------------------    */


 #parent {
    margin: 50px auto;
    width: 200px;
    height: 400px;
    background: rgba(0,0,0,.2);
    overflow: hidden;
    display: table;
  }
  
  #child-1 {
    background: rgba(255,0,0,.5);
    text-align: center;
    margin: 0 auto;
    display: table-cell;
    vertical-align: middle;
    transform: rotate(90deg);
    overflow: hidden;
    color: white;
    letter-spacing: 2px;
    font-size: 22px;
  }


/* ---- */

  .window {
    width: 100%;
    height: 100vh;
    position: relative;
  }
  
  .window:nth-child(1) {
    background: red;
  }
  
  .window:nth-child(2) {
    background: green;
  }
  
  .window:nth-child(3) {
    background: blue;
  }



  /* ----*/



/* &&&&&&&&&*/

/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/

/* DEMO GENERAL ============================== */
.hover {
  overflow: hidden;
  position: relative;
  padding-bottom: 60%;
}

.hover-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 90;
  transition: all 0.4s;
}

.hover img {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.3s;
}

.hover-content {
  position: relative;
  z-index: 99;
}



/* DEMO 4 ============================== */
.hover-4 img {
  width: 100%;
  height: auto;
  /* width: 110%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); */
}

.hover-4 .hover-overlay {
  background: rgba(0, 0, 0, 0.4);
  z-index: 90;
}

.hover-4-title {
  position: absolute;
  bottom: 0px;
  right: 0px;
  padding: 8rem;
  z-index: 99;

}

.hover-4-description {
  position: absolute;
  top: 2rem;
  left: 2rem;
  text-align: right;
  border-right: 3px solid #fff;
  padding: 0 1rem;
  z-index: 99;
  transform: translateX(-1.5rem);
  opacity: 0;
  transition: all 0.3s;
}

@media (min-width: 992px) {
  .hover-4-description {
    width: 50%;
  }
}

.hover-4:hover img {
  width: 100%;
}

.hover-4:hover::after {
  opacity: 1;
  transform: none;
}

.hover-4:hover .hover-4-description {
  opacity: 1;
  transform: none;
}

.hover-4:hover .hover-overlay {
  background: rgba(0, 0, 0, 0.8);
}



/* ~~~~~~~~~~~~~~~~~~~~*/