.backdrop {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.74);
    padding: 50px;
}

.modal {
    background-color: #fff;
    border-radius: 5px;
    max-width: 500px;
    min-height: 300px;
    margin: 0 auto;
    padding: 30px;
    margin-top: 15%;
}

@font-face {
    font-family: 'Nunito';
    src: url('../fonts/Nunito-Regular.ttf')  format('truetype'),
         url('../fonts/Nunito-Regular.woff') format('woff')
}

@font-face {
    font-family: 'Lobster';
    src: url('../fonts/Lobster-Regularr.ttf')  format('truetype'),
         url('../fonts/Lobster-Regular.woff') format('woff')
}

@font-face {
    font-family: 'Gloria Hallelujah';
    src: url('../fonts/GloriaHallelujah-Regular.ttf')  format('truetype'),
         url('../fonts/GloriaHallelujah.woff') format('woff')
}

@font-face {
    font-family: 'Dancing Script';
    src: url('../fonts/DancingScript-Regular.ttf')  format('truetype'),
         url('../fonts/DancingScript-Regular.woff') format('woff')
}

@font-face {
    font-family: 'Amatic SC';
    src: url('../fonts/AmaticSC-Bold.ttf')  format('truetype'),
         url('../fonts/AmaticSC-Bold.woff') format('woff')
}