:root{
    background-color: rgb(0, 0, 0);
}

.html

*{
    background-color: rgb(0, 0, 0);
}

h1{
    /* text-align: center; */
    color: rgb(0, 255, 157);
    font-size: 30px;
    font-family: 'Courier New', Courier, monospace;
}

li{
    font-size: 25px;;
    list-style-type: square;
    color: rgb(255, 255, 255);
    
}

a{
    font-size: 20px;
    text-decoration: solid;
    color: white;
}

li:hover{
    color: rgb(0, 255, 157);
}

a:hover{
    text-decoration: underline;
    color:  rgb(0, 255, 157);
}

.elementos{
    margin: auto;
}

.elementos::before, .elementos::after, .elementos{
    position: absolute;
    top: 100%;
    bottom: 10%;
    left: 0;
    right: 0;
}



/* h1:hover{
    background-color: blueviolet;
    color: white;
} */

/* footer{
    height: 35px;
    background-color: rgb(130, 126, 122);
    color: white;
    font-family: 'Courier New', Courier, monospace;
} */

/* p2:active{
    color: blue;
} */

/* input:focus{
    border: red 5px solid;
} */



.animación{
    width: 200px;
    height: 200px;
    margin: auto;
    font-size: 30px;
    text-align: center;
    /* background-image: url(/signo-de-dolar.png); */
    color: rgb(250, 250, 250);
    box-shadow: 0 0 0 5px rgb(0, 255, 157);
  }
  
  p{
    margin-top: 35%;
  }
  
.animación::before, .animación::after, .animación{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
  
.animación::before, .animación::after{
    content: "";
    z-index: -1;
    margin: -5%;
    box-shadow: inset 0 0 0 5px;
    animation: borde 6s linear infinite;
}
  
.animación::before{
    animation-delay: -3s;
}
  
@keyframes borde {
    0%, 100%{
      clip: rect(0px, 220px, 2px, 0px);
      transform: scale(1.2);
    }
    25%{
      clip: rect(0px, 2px, 220px, 0px );
      transform: scale(1.2);
    }
    50%{
      clip: rect(218px, 220px, 220px, 0px);
      transform: scale(1.2);
    }
    75%{
      clip: rect(0px, 220px, 220px, 218px);
      transform: scale(1.2);
    }
  }

  footer{
    margin-top: 100%;
    margin-bottom: 1%;
    height: 20px;
    color: rgb(0, 255, 157);
    background-color: rgb(0, 0, 0);
}


body {
    color: #000;
    margin: 0;
    font-family: "Lucida Console", Monaco, monospace;
  }
  
  .container {
    background: rgb(0, 0, 0);
    height: 10vh;
    padding: 20px;
    margin-top: 75%;
    text-align: center;
    
  }
  
  .content {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: 155%;
    transform: translate(-50%, -50%);
  }
  .content p {
    margin: 0 0 200px;
  }
  
  /* Arrow & Hover Animation */
  #more-arrows {
    width: 75px;
    height: 65px;
  }
  #more-arrows:hover polygon {
    fill: rgb(0, 255, 157);
    transition: all 0.2s ease-out;
  }
  #more-arrows:hover polygon.arrow-bottom {
    transform: translateY(-18px);
  }
  #more-arrows:hover polygon.arrow-top {
    transform: translateY(18px);
  }
  
  polygon {
    fill: rgb(0, 255, 157);
    transition: all 0.2s ease-out;
  }
  polygon.arrow-middle {
    opacity: 0.75;
  }
  polygon.arrow-top {
    opacity: 0.5;
  }

  nav{
    margin-left: 50px;
  }