@import url("https://fonts.googleapis.com/css2?family=Lato&family=Playfair+Display:wght@700&display=swap");

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

body {
    background: #111312;
    background: linear-gradient(to bottom right, #111312 30%, #0e2d25 100%);
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    font-family: "Lato", sans-serif;
    font-size: 1.5rem;
}

a {
    color: rgba(83, 227, 166,.5);
    text-decoration: none;
    margin: 1rem;
}
a:hover {
    color: rgba(83, 227, 166,1);
    padding: 1rem;
    padding: 15px;
}
#console {
    margin: 2rem;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

#bandera {
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
}

#terminal {
    position: relative;
    background: #53e3a6;
    padding: .2rem;
    padding-left: .5rem;
    border-radius: 3px 0px 0px 3px;
    color: white;
}

#terminal:after {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(80, 163, 162, 0);
    border-left-color: #53e3a6;
    border-width: 17px;
    margin-top: -17px;
    z-index: 99;
}

#ruta {
    position: relative;
    background: #ffffff;
    color: #2b323a;
    padding: .2rem;
    padding-left: 1.5rem;
    padding-right: .5rem;
}

#ruta:after {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(80, 163, 162, 0);
    border-left-color: #ffffff;
    border-width: 18px;
    margin-top: -18px;
}

.text {
    color: white;
    padding: .2rem;
    padding-left: 1.5rem;
}

body.animating { animation: colorPulse 1s infinite; }

@keyframes colorPulse {
    0% {
        background: linear-gradient(to bottom right, #111312 20%, #2d2a0e 100%);
    }

    20% {
        background: linear-gradient(to bottom right, #111312 30%, #130e2d 100%);
    }

    40% {
        background: linear-gradient(to bottom right, #111312 20%, #2d0e2c 100%);
    }

    60% {
        background: linear-gradient(to bottom right, #111312 10%, #122d0e 100%);
    }

    80% {
        background: linear-gradient(to bottom right, #111312 20%, #180e2d 100%);
    }

    100% {
        background: linear-gradient(to bottom right, #111312 30%, #0e272d 100%);
    }
}

@media only screen and (max-width: 600px) {
    #console {
        flex-direction: column;
    }
    .text {
        padding-left: 0rem;    
    }    
  }