body{
scroll-behavior: smooth;
margin: 0;
padding: 0;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
color: white;
}
.btn2 {

    position: relative;
    display: inline-block;
    padding: 15px 15px;
    border: 2px solid #fefefe;
    text-transform: uppercase;
    color: #fefefe;
    text-decoration: none;
    font-weight: 600;
    font-size: 20px;
    transition: 0.3s;
  }
  
  .btn2::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    width: calc(100% + 4px);
    height: calc(100% - -2px);
    background-color: #212121;
    transition: 0.3s ease-out;
    transform: scaleY(1);
  }
  
  .btn2::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    width: calc(100% + 4px);
    height: calc(100% - 50px);
    background-color: #292929b0;
    transition: 0.3s ease-out;
    transform: scaleY(1);
  }
  
  .btn2:hover::before {
    transform: translateY(-25px);
    height: 0;
  }
  
  .btn2:hover::after {
    transform: scaleX(0);
    transition-delay: 0.15s;
  }
  
  .btn2:hover {
    border: 2px solid #fefefe;
  }
  
  .btn2 span {
    position: relative;
    z-index: 3;
  }
  
  button {
    text-decoration: none;
    border: none;
    background-color: transparent;
  }

nav{
position: relative;
z-index: 100;
top: 0;
left: 0;
width: 100%;
justify-content: center;
display: flex;
flex-wrap: wrap;
background-color: black;
animation:su 1.5s linear forwards ;
}
nav img{

    position: absolute;
}


@keyframes su {
    
0%{

    height: 100vh;
}

100%{
position: relative;
height: 100px;

}

}



#servicios {
margin-top: -25px;

}


@keyframes fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

#info{
opacity: 0;
animation-name: fade;
animation-delay:1.5s;
animation-duration: 1s;
animation-fill-mode: forwards;
}
#minecraft{

border-bottom: 1px solid white;
border-top: 1px solid white;
animation-name: fade;
animation-delay:1.5s;
animation-duration: 1s;
animation-fill-mode: forwards;
opacity: 0;
background-image: url('img/mc.jpg');
background-size: cover;
background-position: center;
width: 100%;
height: 400px;
transition: 0.5s;
filter: grayscale(100%);
}
#minecraft:hover{
transition: 0.5s;
filter: grayscale(0%);  
}
#info-mc:hover + #minecraft {
  transition: 0.5s;
filter: grayscale(0%);
}
#info-mc{
opacity: 0;
animation-name: fade;
animation-delay:1.5s;
animation-duration: 1s;
animation-fill-mode: forwards;
z-index: 100;
position: absolute;
filter: none;
padding: 10px;
background-color: #292929ef;
border-radius: 15px;
width: 40vw;
margin-left: 10vw;
margin-top: 10vh;
}




#ark{
    border-bottom: 1px solid white;
    border-top: 1px solid white;
    animation-name: fade;
    animation-delay:2s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
    background-image: url('img/ark.jpg');
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 400px;
    transition: 0.5s;
    filter: grayscale(100%);
    }
    #ark:hover{
      transition: 0.5s;
    filter: grayscale(0%);  
    }
    #info-ark:hover + #ark {
      transition: 0.5s;
    filter: grayscale(0%);
    }
    #info-ark{
    opacity: 0;
    animation-name: fade;
    animation-delay:2s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    z-index: 100;
    position: absolute;
    filter: none;
    padding: 10px;
    background-color: #292929ea;
    border-radius: 15px;
    width: 40vw;
    margin-left: 10vw;
    margin-top: 5vh;
    }




    #counter{
        border-bottom: 1px solid white;
        border-top: 1px solid white;
        animation-name: fade;
        animation-delay:2.5s;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        opacity: 0;
        background-image: url('img/cs.jpg');
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 400px;
        transition: 0.5s;
        filter: grayscale(100%);
        }
        #counter:hover{
          transition: 0.5s;
        filter: grayscale(0%);  
        }
        #info-counter:hover + #counter {
          transition: 0.5s;
        filter: grayscale(0%);
        }
        #info-counter{
        opacity: 0;
        animation-name: fade;
        animation-delay:2.5s;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        z-index: 100;
        position: absolute;
        filter: none;
        padding: 10px;
        background-color: #292929b0;
        border-radius: 15px;
        width: 40vw;
        margin-left: 10vw;
        margin-top: 5vh;
        }




        #ts{
            border-bottom: 1px solid white;
            border-top: 1px solid white;
            animation-name: fade;
            animation-delay:3s;
            animation-duration: 1s;
            animation-fill-mode: forwards;
            opacity: 0;
            background-image: url('img/ts.jpg');
            background-size: cover;
            background-position: center;
            width: 100%;
            height: 400px;
            transition: 0.5s;
            filter: grayscale(100%);
            }
            #ts:hover{
              transition: 0.5s;
            filter: grayscale(0%);  
            }
            #info-ts:hover + #ts {
              transition: 0.5s;
            filter: grayscale(0%);
            }
            #info-ts{
            opacity: 0;
            animation-name: fade;
            animation-delay:3s;
            animation-duration: 1s;
            animation-fill-mode: forwards;
            z-index: 100;
            position: absolute;
            filter: none;
            padding: 10px;
            background-color: #292929ea;
            border-radius: 15px;
            width: 40vw;
            margin-left: 10vw;
            margin-top: 5vh;
            }



            #rust{
                border-bottom: 1px solid white;
                border-top: 1px solid white;
                animation-name: fade;
                animation-delay:3.5s;
                animation-duration: 1s;
                animation-fill-mode: forwards;
                opacity: 0;
                background-image: url('img/rust.png');
                background-size: cover;
                background-position: center;
                width: 100%;
                height: 400px;
                transition: 0.5s;
                filter: grayscale(100%);
                }
                #rust:hover{
                  transition: 0.5s;
                filter: grayscale(0%);  
                }
                #info-rust:hover + #rust {
                  transition: 0.5s;
                filter: grayscale(0%);
                }
                #info-rust{
                opacity: 0;
                animation-name: fade;
                animation-delay:3.5s;
                animation-duration: 1s;
                animation-fill-mode: forwards;
                z-index: 100;
                position: absolute;
                filter: none;
                padding: 10px;
                background-color: #292929ea;
                border-radius: 15px;
                width: 40vw;
                margin-left: 10vw;
                margin-top: 5vh;
                }












        #nd{
            border-bottom: 1px solid white;
            border-top: 1px solid white;
            animation-name: fade;
            animation-delay:4s;
            animation-duration: 1s;
            animation-fill-mode: forwards;
            opacity: 0;
            background-image: url('nodedesign/banner.png');
            background-size: cover;
            background-position: center;
            width: 100%;
            height: 400px;
            transition: 0.5s;
            filter: grayscale(100%);
            }
            #nd:hover{
              transition: 0.5s;
            filter: grayscale(0%);  
            }
            #info-nd:hover + #nd {
              transition: 0.5s;
            filter: grayscale(0%);
            }
            #info-nd{
            opacity: 0;
            animation-name: fade;
            animation-delay:4s;
            animation-duration: 1s;
            animation-fill-mode: forwards;
            z-index: 100;
            position: absolute;
            filter: none;
            padding: 10px;
            background-color: #292929ea;
            border-radius: 15px;
            width: 40vw;
            margin-left: 10vw;
            margin-top: 5vh;
            }




            #otro{
                border-bottom: 1px solid white;
                border-top: 1px solid white;
                animation-name: fade;
                animation-delay:4.5s;
                animation-duration: 1s;
                animation-fill-mode: forwards;
                opacity: 0;
                background-image: url('img/otro.png');
                background-size: cover;
                background-position: center;
                width: 100%;
                height: 400px;
                transition: 0.5s;
                filter: grayscale(100%);
                }
                #otro:hover{
                  transition: 0.5s;
                filter: grayscale(0%);  
                }
                #info-otro:hover + #otro {
                  transition: 0.5s;
                filter: grayscale(0%);
                }
                #info-otro{
                opacity: 0;
                animation-name: fade;
                animation-delay:4.5s;
                animation-duration: 1s;
                animation-fill-mode: forwards;
                z-index: 100;
                position: absolute;
                filter: none;
                padding: 10px;
                background-color: #292929ea;
                border-radius: 15px;
                width: 40vw;
                margin-left: 10vw;
                margin-top: 5vh;
                }

footer{
    padding-top: 10px;
    bottom: 0;
width: 100%;
text-align: center;
z-index: 10;
background-color: rgb(56, 56, 56);


}



#mail {


text-align: center;

}

#logo {
margin-left: 10%;

}


#globo {
  display: none;
  color: white;
  position: absolute;
  background-color: #3b3b3b;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 80%;
  transform: translateY(5%);
  z-index: 20;
  margin-left: 10%;
  text-align: center;
  box-shadow: inset;
}

#globo a{
color: white;


}




@keyframes slideDown {
  0% {
    z-index: 0;
    transform: translateY(5%);
  }
  40%{
    z-index: 0;
    transform: translateY(-110%);


  }
  50%{
    z-index: 30;
    transform: translateY(-110%);

  }
  100% {
    z-index: 20;
    transform: translateY(5%);
  }
}

@keyframes slideUp {
  0%{
    z-index: 20;
    transform: translateY(5%);

  }
  20% {
    z-index: 20;
    transform: translateY(8%);
  }
  50% {
    z-index: 30;
    transform: translateY(-110%)
  }
  60%{

    z-index: 0;
    transform: translateY(-110%)
  }
  100%{
    z-index: 0;
    transform: translateY(5%);


  }
}

#globo {
  animation-fill-mode: forwards;
}