/* This imports the default Bink styles */
@import './bink-0.3.0/style/base.css';

.app {
    margin: auto;
    width: 840px;
    background-color: darkgrey;
}

.hero-img {
    max-width: 800px;
    height: auto;
    border-radius: 8px;
    padding: 20px;
}

.heading-component {
    border-width: 20px 20px 20px;
    margin-left: 20px;
}

.toggle-button-component {
    border-radius: 8px;
    padding: 15px 32px;
}

.quiz-fields {
    max-width: 800px;
    display: grid;
    grid-template-columns: 1fr;
}

.audio-header {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr;
    gap: 5px;
    padding-top: 20px;
}

.text-input-field-component {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
    padding-top: 50px;
}

.label-component {
    grid-column: 1;
    justify-self: end;
}

.button-avancer {
    justify-self: end;
    margin-top: 50px;
    margin-bottom: 75px;
    border-radius: 8px;
    padding: 15px 32px;
}

input {
    border-width: 0px 0px 1px;
    border-color: #DADADA;
    font-size: 14px;
    text-align: left;
    letter-spacing: 0px;
    color: #323A47;
    padding-bottom: 5px;
}