:root {
    --darkblue: #021927;
    --green: #8bb488;
    --yellow: #fcfcb2;
    --orange: #f7981b;
    --brightblue: #3a5f67;
    --content: white;
    --logored: #CE0000;
}

a {
    color: inherit;
    text-decoration: inherit;
    cursor: pointer;
}

button {
    border: none;
    margin: 0;
    padding: 0;
    width: auto;
    overflow: visible;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: normal;
    -webkit-font-smoothing: inherit;
    -moz-osx-font-smoothing: inherit;
    -webkit-appearance: none;
}

.logo {
    font-family: "Poiret One", sans-serif;
    font-style: normal;
    text-transform: uppercase;
}

.logo>h1 {
    font-size: 2em;
    font-weight: 800;
    letter-spacing: 0.1ch;
    margin: 0;
    animation: flicker 1.5s infinite alternate;     

}

.logo>h2 {
    font-size: 1.5em;
    font-weight: 800;
    letter-spacing: 0.1ch;
    margin: 0;
    animation: flicker 1.5s infinite alternate;     
   
}

.logo>h3 {
    margin: 1em 0 0 0;
    font-size: 1.15em;
    font-weight: 800;
    letter-spacing: 0.1ch;
}

.logo>h4 {
    margin: 0 0 1.5em 0;
    font-size: 0.8em;
    font-weight: 800;
    letter-spacing: 0.5ch;
}


input {
    all: unset;
}

ul,
ul li,
ul li {
    margin: 0;
    padding: 0;
    text-indent: 0;
    list-style-type: none;
}


body {
    background-image: url('./img/bg.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #001a26;
    color: var(--content);
    margin: 2em auto;
}

input {
    font-size: 2rem;
    text-align: center;
}

.content {
    text-align: center;
    font-size: 1.5rem;
    ;
}

#input {
    color: red;
    font-family: "Shadows Into Light", cursive;
    font-weight: 800;
    letter-spacing: 0.8ch;
    text-transform: uppercase;
    font-style: normal;
    transition: all 0.156s ease-in;
}

#input::placeholder {
    color: black;
    opacity: 0.5;
    text-transform: none;
    letter-spacing: 0.15ch;
}

#input:focus {
    background-color: var(--yellow);
    border-radius: 5px;
    opacity: 0.6;
}

.ui-input {
    background-image: url('./img/paper.png');
    padding: 15px;
    border-radius: 10px;
    display: inline-block;
    min-width: 550px;
    border-radius: 5px;
    transition: all 0.5s ease-in-out;
    -webkit-box-shadow: 0px 0px 25px 15px rgba(0, 0, 0, 0.60);
    box-shadow: 0px 0px 25px 15px rgba(0, 0, 0, 0.60);
}

.ui-input>h3 {
    color: red;
    font-family: "Shadows Into Light", cursive;
    font-weight: 800;
    font-size: 1em;
    letter-spacing: 0.3ch;
    text-transform: uppercase;
    font-style: normal;
    margin: 0;
}

button {
    margin-top: 15px;
}

#output {
    margin-top: 30px;
    color: black;
    font-family: "Shadows Into Light", cursive;
    font-weight: 800;
    letter-spacing: 0.8ch;
    text-transform: uppercase;
    font-style: normal;
}

.buttonContainer {
    display: none;
}

.button {
    cursor: pointer;
    color: var(--orange);
    border: 1px solid var(--orange);
    font-family: "Poiret One", sans-serif;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 20px;
    background: var(--yellow);
    opacity: 1;
    padding: 5px 10px;
    border-radius: 5px;
    transition: all 0.185s ease-in-out;
    width: 160px;
}

.button:hover,
.button:focus {
    cursor: pointer;
    color: black;
    border: 1px solid black;
}

ul li {
    animation: fadeIn 0.5s ease-in forwards;
    animation-fill-mode: both;
    opacity: 0;
}

ul li:nth-child(1) {
    animation-delay: 0.25s
}

ul li:nth-child(2) {
    animation-delay: 0.50s
}

ul li:nth-child(3) {
    animation-delay: 0.75s
}

ul li:nth-child(4) {
    animation-delay: 1s
}

ul li:nth-child(5) {
    animation-delay: 1.25s
}

ul li:nth-child(6) {
    animation-delay: 1.50s
}

ul li:nth-child(7) {
    animation-delay: 1.75s
}

ul li:nth-child(8) {
    animation-delay: 2s
}

.octo-body {
    fill: var(--darkblue);
}

.octo-arm {
    fill: var(--darkblue);
}

.red {
    color: red !important;
}



@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes flicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
      
        text-shadow:
            -0.2rem -0.2rem 1rem #ff4949,
            0.2rem 0.2rem 1rem #ff4949,
            0 0 2rem var(--logored),
            0 0 4rem var(--logored),
            0 0 6rem var(--logored),
            0 0 8rem var(--logored)
    }
    
    20%, 24%, 55% {        
        text-shadow: none;
    }    
}