style.css

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;}

html{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 62.5%;}

:root{
    --colorCaja:#F2E313;
    --colorLienzo:#2D0166;
    --colorLetra:#fcf6a2;
    --colorContenedor:#2BD957;

    --luz: rgba(0,178,255,1);
    --neon: 0 0 1px var(--luz),
            0 0 3px var(--luz),
            0 0 12px var(--luz);}


body{
    width: 100vw;
    height: 100vh;
    background: rgb(188,107,242);
    background: linear-gradient(131deg, rgba(188,107,242,1) 45%, rgba(7,242,242,1) 100%);
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: flex-start;}

main{
    width: 80%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;}

.enlaces{
    color: var(--colorLetra);
    width: 80%;
    height: 80%;
    border: 10px solid var(--colorCaja);
    /*box-shadow: inset 0 0 10px 0 var(--colorCaja), 0 0 10px 0 var(--colorCaja);*/
    background-color: var(--colorLienzo);
    border-radius: 20px;
    display: grid;
    grid-template-rows: repeat(auto-fit, minmax(20px, 1fr));}

.enlaces > div{
    place-self: center;
    width: 80%;
    height: 10%;}

.enlaces > div a{
    display: flex;
    align-items: center;
    color: #C670FF;
    font-size: 2.2rem;
    text-decoration: none;}

.enlaces a:hover{
    color: var(--colorLetra);
    text-shadow: var(--neon);}

.enlaces > div hr{
    width: 0px;
    opacity: 0;    
    border: 1px solid var(--colorContenedor);
    transition: .5s cubic-bezier(0,.84,.43,.99);}

.enlaces > div:hover hr{
    width: 100%;
    opacity: 1;
    transition: .5s cubic-bezier(.51,.08,.16,1.08);}