@import url(https://fonts.googleapis.com/css?family=Poiret+One|Lobster|Anton|Shadows+Into+Light|Open+Sans|Roboto|Orbitron|Oswald|Raleway|Montserrat|Roboto+Slab|Indie+Flower|Fjalla+One|Bree+Serif|Pacifico|Abril+Fatface);
body {
    background: #e8ebf3;
    font: 400 16px 'Poppins', sans-serif;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.poiret{font-family:Poiret One;}
.lobster{font-family:lobster;}
.anton{font-family:Anton;}
.Shadows{font-family:'Shadows Into Light';}
.open{font-family:open sans;}
.roboto{font-family:roboto;}
.slabo{font-family:"Orbitron";}
.oswald{font-family:Oswald;}
.raleway{font-family:raleway;}
.Montserrat{font-family:Montserrat;}
.roboto2{font-family:roboto slab;}
.indie{font-family:indie flower;}
.fjalla{font-family:fjalla one;}
.bree{font-family:bree serif;}
.pacifico{font-family:pacifico;}
.abril{font-family:'Abril Fatface';font-size:16px;}

.text-number {
    font-size:80px;
    margin-bottom:0;
    overflow:auto;
    margin-top:0;
    height:140px;
}

.text-animate {
    font-size:42px;
    margin-bottom:0;
    overflow:auto;
}

.audio-container {
    text-align: center;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.file-input {
    display: block;
    margin: 10px auto 20px auto;
    padding: 10px;
    font-size: 1em;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.file-input:hover {
    background-color: #f9f9f9;
}

.audio-preview {
    width: 100%;
    max-width: 600px;
    border-radius: 5px;
    border: 5px solid #d6e3f605;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), inset 0 2px 4px rgba(255, 255, 255, 0.5);
    background-color: #f1f3f4;
}