:root {
  --cpa: #00ffff;
  --cpb: #009EE2;
  --cpc: #404998;
  --cpd: #000420;
  --cpe: #1B2831;
  --csa: #f5910eff;
  --csb: #93C01F;
}

@media screen and (min-width: 769px){
    #onlyMobile {
      display: none!important;
  }
}

#menuMobile {
  position: fixed;
  bottom: 0.5rem!important;
  left: 1em!important;
  z-index: 1030;
}

@media screen and (min-width: 769px){
  #carousel-mobile {
    display: none!important;
}
}

@media screen and (max-width: 769px){
  #gallery-desktop {
    display: none!important;
}
}

.carousel-control-prev:hover{
  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,0) 70%, rgba(0,212,255,0) 90%) !important;
  filter: opacity(0.5);
}

.carousel-control-next:hover{
  background: linear-gradient(270deg, rgba(2,0,36,1) 0%, rgba(9,9,121,0) 70%, rgba(0,212,255,0) 90%) !important;
  filter: opacity(0.5);
}

.imgproyect {
  opacity: 0.9;
  transform: rotate3d(10, -20, 1, 0.6rad);
  box-shadow: 0px 0px 2px #000000;
}

.imgproyect:hover {
  transition-duration: 2000ms;
  transform-style: preserve-3d;
  transform: rotate3d(10, -20, 1, 0rad);
  box-shadow: 0px 0px 10px #000000;
  opacity: 1;

}

#contactW {
  position: fixed;
  right: 1rem!important;
  bottom: 0.5rem!important;
  z-index: 1030;
  color: white;
  background-color: #25D366;
}

#develop {
  color: white;
  padding-bottom: 3em;
  margin-bottom: -2.5em;  
  background: linear-gradient(82deg, #020024, #090979, #055ad0);
  background-size: 600% 600%;
  -webkit-animation: AnimationName 21s ease infinite;
  -moz-animation: AnimationName 21s ease infinite;
  animation: AnimationName 21s ease infinite;
}

@-webkit-keyframes AnimationName {
  0%{background-position:0% 58%}
  50%{background-position:100% 43%}
  100%{background-position:0% 58%}
}
@-moz-keyframes AnimationName {
  0%{background-position:0% 58%}
  50%{background-position:100% 43%}
  100%{background-position:0% 58%}
}
@keyframes AnimationName {
  0%{background-position:0% 58%}
  50%{background-position:100% 43%}
  100%{background-position:0% 58%}
}

#motion-3d {
    background-color: var(--cpd);
    margin-bottom: 2em;
    height:min-content;
    transform: skewY(-3deg);
    box-shadow: 0px 0px 10px #000000;
}

.m3a {
  font-family: 'Bungee Spice', cursive !important;
  text-shadow: 0px 2px 2px #000000;
}

#contacto {
  background-color: var(--csa);
}

.hovw:hover{
  font-weight: bold;
}

#name-head {
  font-family: 'Water Brush', cursive;
  font-size: 3em;
  /* letter-spacing: 0.1em; */
  text-shadow: 0px 2px 2px #000000;
}

@media screen and(max-width: 769px) {
  #name-head {
    font-size: 2em;
  }
}

.display-7 {
  font-size: 20px;
}

.site-img {
  border-radius: .5rem;
  transition: filter 1s;
}

.site-img:hover {
  filter: contrast(120%);
}

.shadow:hover {
  box-shadow: 10px 10px;
}

.modal-xl {
  max-width: 1300px !important;
}

.modal-body {
  padding: 0 !important;
}

.vws {
  width: 96%;
  margin: 2%;
  height: 100vh;
}

.illustration {
  max-width: 100%;
}

.scale:hover { 
  transform: scale(1.1);
  box-shadow: 0px 0px 9px 0px rgba(95,162,250,1);
}

.title-a {
  font-family: 'Montserrat', sans-serif;
}

.title-b {
  font-family: 'Sofia', cursive;
}

.v-c {
  display: flex;
  align-items: center;
}

/* Gallery effect */

.ild {
  color: var(--csa) !important;
}
.illustration {
  box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.75);
  filter: brightness(.7);
}
.illustration:hover {
  filter: brightness(1) !important;
  box-shadow: 7px 7px 0px 0px rgba(0,0,0,0.75);
}

.badgess {
  max-width: 100%;
}

.badgess:hover {
  transition: 500ms;
  transform: scale(1.05);
  filter: saturate(1.5);
}

.pb-develop {
  padding-top: 3rem!important;
}

@media screen and(max-width: 769px) {
  .pb-develop {
    padding-top: 2rem!important;
  }
}

.typed-cursor {
  opacity: 1;
  color: var(--csa);
}

.rol {
 font-family: 'Readex Pro', sans-serif; 
 color: var(--csa);
 font-size: 2.5rem;
}

@media screen and (max-width: 1100px){
  .rol {
   color: var(--csa);
   font-size: 2rem;
  }
}

.py-5c {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

@media screen and (max-width: 600px){
  .py-5c {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
}

.modal-body img{
  width: 100%;
}

.modal-lg{
  max-width: 1000px!important;
}