@import url('https://fonts.googleapis.com/css2?family=Germania+One&family=Lora:ital,wght@0,400..700;1,400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Roboto Condensed;
}

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

li{
    margin-left: 2em;
}

h1{
    font-size: 1.5em;
}

.description{
    color: grey;
}

.panel{
    margin-top: 1em;
    display: flex;
    flex-direction: column;
    padding: 0.8em;
    background-color: rgba(0,0,0,0.05);
}

.header{
    display: flex;
    width: 100%;
    padding: 0.5em;
    justify-content: center;
    background-color: black;
    color: white;
}

.footer{
    display: flex;
    width: 100%;
    margin-top: 1em;
    gap : 0.5em;
    padding: 0.5em;
    justify-content: center;
    background-color: black;
}

.footer>a{
    text-decoration: none;
    font-size: 0.8em;
    color: white;
}

.container{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.content{
    max-width: 800px;
    min-height: 90vh;
}

.panel_container{
    margin-top: 0.5em;
    justify-content: center;
    display: flex;
    gap : 0.5em;
    flex-wrap: wrap;
    max-height: 20em;
    overflow-y: scroll;
}

.avatar{
    display: flex;
    width: 4em;
    height: 4em;
    border-radius: 100%;
    overflow: hidden;
    background-color: black;
}

.voice_item{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap : 0.5em;
    justify-content: center;
    padding: 0.5em;
    background-color: white;
    border-radius: 5px;
    user-select: none;
}

.voice_item:hover{
    cursor: pointer;
    border: 1px solid grey;
}

.voice_name{
    text-align: center;
    font-weight: 500;
}

.play_button{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3em;
    height: 3em;
    border-radius: 100%;
    background-color: grey
}

.play_button>img{
    width: 2em;
}

.big_button{
    margin-top: 0.5em;
    margin : 0.5em;
    background-color: #24B47E;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    padding: 1em;
    cursor: pointer;
    user-select: none;
    text-align: center;
    color: white;
}

@media screen and (min-width: 600px) {
  .big_button {
    margin: 0;
    margin-top: 0.5em;
  }
}

/*
.big_button:hover{
    background-color: rgb(27, 27, 27);
}
*/

.big_button:active{
    background-color: green;
}

.text_field{
    padding: 0.5em;
    margin-top: 0.5em;
    min-height: 5em;
    margin-bottom: 0.5em;
    border: 1px solid grey;
    font-size: 1em;
    font-family: Montserrat;
}

.offer{
    display: flex;
    flex-direction: column;
    max-width: 10em;
    align-items: center;
    gap : 1em;
    justify-content: space-between;
    background-color: white;
    padding: 1em;
    cursor: pointer;
}

.offer:hover{
    border: 1px solid grey;
    background-color: rgb(228, 228, 228);
}

.offer_pricing{
    font-size: 1.5em;
    color : green;
}

.offer:active{
    background-color: white;
}

.text_input{
    padding: 0.5em;
    border: none;
    font-size: 1em;
    margin-top: 0.5em;
    font-family: Montserrat;
}

.text_input:focus{
    outline: none;
    outline: 1px solid grey;
}