html {
   scroll-behavior: smooth;
}

body {
   overflow: hidden;
}

a {
   cursor: pointer;
}

.cursor-up-custom {
   /* cursor: s-resize; */
   cursor: url(http://jaimebaroval.com/images/up.png), auto;
}

.cursor-s-resize {
   cursor: ns-resize;
}

.cursor-n-resize {
   cursor: ns-resize;
}

.home-container-link {
   cursor: ns-resize;
   height: 100dvh;
   width: 100vw;
   position: absolute;
}

.curriculum-container-link {
   cursor: ns-resize;
   height: 100dvh;
   width: 100vw;
   position: absolute;
}

div#home {
   background-image: url('../images/hero/coding-screen.jpg');
   background-size: cover;
   height: 100dvh;
   display: flex;
   justify-content: center;
   align-items: center;
   padding-top: 0;
}

section#mahou {
   background-image: url('../images/portfolio/back_mahou.png');
   background-size: cover;
   height: 100dvh;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   position: relative;
   z-index: -1;
   animation: fadeIn 0.5s ease-in-out;
}

div#mahou-link {
   display: flex;
   position: relative;
   height: 100dvh;
   /* background-color: red;
   opacity: 40%; */
}

section#alain {
   background-image: url('../images/portfolio/back_alain.jpg');
   background-size: cover;
   height: 100dvh;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   position: relative;
   z-index: -1;
   animation: fadeIn 0.5s ease-in-out;
}

section#oppositame {
   background: rgb(130, 177, 255);
   background: linear-gradient(180deg, rgba(130, 177, 255, 1) 0%, rgba(69, 115, 191, 1) 100%);
   height: 100dvh;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   position: relative;
   z-index: -1;
   animation: fadeIn 0.5s ease-in-out;
}

section#curriculum {
   background-image: url('../images/hero/coding-screen.jpg');
   background-size: cover;
   height: 100dvh;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   position: relative;
   z-index: 10;
   animation: fadeIn 0.5s ease-in-out;
}

section#contact {
   background-color: rgb(55 88 249 / var(--tw-bg-opacity));
   height: 100dvh;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   position: relative;
   z-index: 10;
   animation: fadeIn 0.5s ease-in-out;
}

.portfolio-h2 {
   font-size: 70px;
}

.portfolio-h2-submenu {
   font-size: 24px;
   font-weight: 300;
}

.reactjs-button {
   width: 60%;
   margin-left: 20px;
}

.alain-img-01 {
   object-position: top;
}

.mahou-img-01 {
   height: 80dvh;
}

.oppo-container {
   justify-content: center;
   gap: 40px;
}

.oppo-container img {
   height: 70%;
}

.tag-tech-container {
   display: inline-flex;
   flex-wrap: wrap;
}

span.tag-technology {
   background-color: rgb(55 88 249 / var(--tw-bg-opacity));
   padding: 10px 20px;
   border-radius: 100px;
   border: 1px solid white;
   color: white;
   margin-left: 24px;
   margin-bottom: 24px;
}

.curriculum-container {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   row-gap: 30px;
}

.curriculum-container img {
   width: 70%;
}

.curriculum-name {
   font-size: 30px;
   font-weight: 100;
}

.curriculum-rounded {
   border-radius: 30px;
}

.h2-contacto {
   /* max-width: 430px; */
}

.nav-desktop {
   display: flex;
}

.marg-cero-desktop {
   margin-left: 0 !important;
}

/* Display None Classes */
.nav-mobile {
   display: none;
}

div#home-link-mobile {
   display: none;
}

div#mahou-link-mobile {
   display: none;
}

section#mahou-mobile {
   display: none;
}

/* Media Queries */
@media screen and (min-width: 0px) and (max-width: 639px) {
   .nav-mobile {
      display: block;
   }

   .w-50-imp {
      width: 50% !important;
   }

   span.tag-technology {
      margin-left: 14px;
      margin-bottom: 16px;
      font-size: 3dvw;
   }

   .marg-cero-desktop {
      margin-left: 14px !important;
   }

   .portfolio-h2 {
      font-size: 40px;
   }

   .portfolio-h2-submenu {
      font-size: 20px;
  }

   .contact-mobile {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100dvh;
      padding: 5dvh 0;

   }

   section#curriculum {
      padding-bottom: 15dvh;
   }

   .curriculum-container img {
      width: 38dvh;
   }

   /* Display None Classes */

   .nav-desktop {
      display: none;
   }

   .mobile-disp-none {
      display: none;
   }

   div#home-link {
      display: none;
   }

   div#mahou-link {
      display: none;
   }

   section#mahou {
      display: none;
   }

   div#mahou-link-mobile {
      display: flex;
      position: relative;
      height: 100dvh;
      /* background-color: green;
      opacity: 100%; */
   }

   section#mahou-mobile {
      display: flex;
      position: absolute;
      height: 100dvh;
      background-image: url('../images/portfolio/back_mahou.png');
      background-size: cover;
      background-position: center;
   }

   .mahou-app-mobile-back {
      background-image: url('../images/portfolio/app_mahoumas.png');
      background-size: cover;
      height: 40dvh;
      position: absolute;
      bottom: 0;
   }

   .marg-cero-desktop {
      margin-left: 14px !important;
   }
}

.animate-me {
   animation: bounceIn 3s ease-in-out;
}

@keyframes fadeIn {
   from {
      opacity: 0;
   }

   to {
      opacity: 1;
   }
}

@keyframes bounceIn {
   0% {
      transform: scale(0.1);
      opacity: 0;
   }

   60% {
      transform: scale(1.2);
      opacity: 1;
   }

   100% {
      transform: scale(1);
   }
}