body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto Mono', monospace;
    color: #272B4B;
    touch-action: manipulation;
}

.generator.generator--generated .generator__init {
    opacity: 0;
    visibility: hidden;
    height: 0;
}

.generator.generator--generated .generator__result {
    height: auto;
    opacity: 1;
    visibility: visible;
}

.generator .generator__result {
    opacity: 0;
    visibility: hidden;
    height: 0;
}

.generator {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    min-height: calc(100vh - 100px);
}

.generator h1 {
    margin-top: -100px;
    font-size: 48px;
    text-align: center;
}

.generator p {
    font-size: 24px;
}

.generator__result {
    text-align: center;
}

.generator__length {
    width: 300px;
    margin: 0 auto;
    text-align: center;
}

.generator__button {
    display: block;
    width: 200px;
    height: 50px;
    margin: 0 auto;
    color: white;

    font-size: 20px;
    line-height: 50px;
    border: none;
    border-radius: 50px;
    background: #EA6362;
    background-image: linear-gradient(to right, #FFC0A7, #EA6362);
    box-shadow: 0 10px 20px rgba(234, 99, 98, 0.3);
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
}

.generator__button:hover,
.generator__button:focus {
    box-shadow: 0 10px 20px rgba(234, 99, 98, 0.5);
}

.generator__copy {
    padding: 0;
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    border-bottom: 1px dotted #272B4B;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
}

.generator__copy:hover,
.generator__copy:focus {
    opacity: 0.5;
}

input[type=text] {
    width: 150px;
    height: 40px;
    margin: 0 0 5px;
    padding: 0 20px;
    font-size: 20px;
    color: inherit;
    font: inherit;
    border-radius: 20px;
    border: 1px solid rgba(39, 43, 75, 0.1);
    box-shadow: 0 3px 20px rgba(39, 43, 75, 0.2);
    outline: none;
}

input[type=range] {
    -webkit-appearance: none;
    margin: 10px 0 18px;
    width: 100%;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    animate: 0.2s;
    box-shadow: none;
    background: rgba(39, 43, 75, 0.1);
    border-radius: 1.3px;
    border: none;
}

input[type=range]::-webkit-slider-thumb {
    height: 14px;
    width: 14px;
    border-radius: 50%;
    border: none;
    background: #EA6362;
    background-image: linear-gradient(to right, #FFC0A7, #EA6362);
    box-shadow: 0 2px 10px 2px rgba(234, 99, 98, 0.3);
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -6px;
}

input[type=range]:hover::-webkit-slider-thumb,
input[type=range]:focus::-webkit-slider-thumb {
    box-shadow: 0 2px 10px 2px rgba(234, 99, 98, 0.6);
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: rgba(39, 43, 75, 0.1);
}

input[type=range]::-moz-range-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    animate: 0.2s;
    box-shadow: none;
    background: rgba(39, 43, 75, 0.1);
    border-radius: 1.3px;
    border: none;
}

input[type=range]::-moz-range-thumb {
    height: 14px;
    width: 14px;
    border-radius: 50%;
    border: none;
    background: #EA6362;
    background-image: linear-gradient(to right, #FFC0A7, #EA6362);
    box-shadow: 0 2px 10px 2px rgba(234, 99, 98, 0.3);
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -6px;
}

input[type=range]:hover::-moz-range-thumb,
input[type=range]:focus::-moz-range-thumb {
    box-shadow: 0 2px 10px 2px rgba(234, 99, 98, 0.6);
}

input[type=range]::-ms-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    animate: 0.2s;
    background: transparent;
    border-color: transparent;
    border-width: 0 0;
    color: transparent;
}

input[type=range]::-ms-fill-lower {
    box-shadow: none;
    background: rgba(39, 43, 75, 0.1);
    border-radius: 1.3px;
    border: none;
}

input[type=range]::-ms-fill-upper {
    box-shadow: none;
    background: rgba(39, 43, 75, 0.1);
    border-radius: 1.3px;
    border: none;
}

input[type=range]::-ms-thumb {
    height: 14px;
    width: 14px;
    border-radius: 50%;
    border: none;
    background: #EA6362;
    background-image: linear-gradient(to right, #FFC0A7, #EA6362);
    box-shadow: 0 2px 10px 2px rgba(234, 99, 98, 0.3);
    cursor: pointer;
    margin-top: -6px;
}

input[type=range]:hover::-ms-thumb,
input[type=range]:focus::-ms-thumb {
    box-shadow: 0 2px 10px 2px rgba(234, 99, 98, 0.6);
}

input[type=range]:focus::-ms-fill-lower {
    background: rgba(39, 43, 75, 0.1);
}

input[type=range]:focus::-ms-fill-upper {
    background: rgba(39, 43, 75, 0.1);
}