:root {
    --color1: #636971;
    --color2: #353C47;
    --color3: #6E809C;
    --color4: #1E2633;
    --color5: #162133;
    --color6: #0D1C33;
}

main {
    background: var(--color3);
}

.lyrics-container {
    margin: 0 auto;
    width: 100%;
    max-width: 800px;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 0 0 10px 10px;
}

.lyrics-input {
    padding: 20px 0 30px 0;
}

.lyrics-output {
    border-radius: 10px;
    margin: auto;
    padding: 2em 1.5em;
}

.lyrics-input, .loading {
    text-align: center;
}

.lyrics-input h1 {
    margin: 0em 0 1em 0;
}

.input-wrap {
    background: #fff;
    display: flex;
    align-items: center;
    max-width: 15em;
    margin: 1.5em auto;
    border-radius: 0.3em;
    border: solid black 1px;
}

.input-wrap i {
    color: #fff;
    background: var(--color6);
    padding: 5%;
    border-radius: 5px 0 0 5px;
}

.input-wrap input {
    border: none;
    margin-left: 0.5em;
    font-size: 0.9em;
}

.input-wrap input:focus {
    outline: none;
}

.fetchBtn {
    background: var(--color6);
    color: #fff;
    border: none;
    border-radius: 0.3em;
    padding: 0.5em 1.5em;
    font-size: 1.1em;
    transition: 0.3s;
    cursor: pointer;
}

.fetchBtn:hover {
    background: var(--color3);
}

.lyrics-output, .loading {
    opacity: 0;
    transition: 0.4s ease-in-out;
}

.lyrics-output pre {
    font-size: 1.1em;
}