:root {
  --wine-red: #C7375F;
  --bright-red: #D42D2F;
  --dark-green: #344D2F;
  --light-green: #77A047;
  --gold: #FAC57D;
  --snow: #F0F4F7;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Corinthia', cursive;
    /* font-family: 'Exo 2', sans-serif; */
    
    font-size: 1.2rem;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: 100vh;
    color: #a9c5cf;
    background-image: url("https://images.unsplash.com/photo-1453306458620-5bbef13a5bca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

h1 { 
    margin: 0;
    
}

form *:not(label),
.guest-list {
    box-sizing: border-box;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
    border-radius: 5px;
    border: none;
}

form {
    display: flex;
    flex-direction: column;
    height: 10em;
    justify-content: space-around;
}


form * {
   padding: .5em;
   font-size: 1.3rem
}

label {
    color: #fff;
    padding: 0;
}
.btn{
    border-radius: .2em;
    border-style: none
}
input { 
    background: var(--snow)
}

.guest-list {
    color: var(--wine-red);
    min-width: 220px;
    max-width: 5ch;
    overflow-y: scroll;
    overflow-x: hidden;
    background: var(--snow);
    padding: 1em 2em;
}

li {
    padding: 0.25em;
    width: 100%;
    text-align: left;
    font-weight: bold;
}

button {
    background: lightblue;
    color: var(--snow);
    margin-top: .3em
}
#btn-extra{
    background-color: var(--snow);
    color:#404040;
}
button:hover,
button:focus {
    transform: scale(1.05);
    cursor: pointer;
}
.flex{
    display: flex;
    width: 170px;
    margin-bottom: .5em
}
.btn
li{
    list-style: no;
    padding: 0;
}
/* *{
    border: 1px solid red
} */
ul{
    padding: 0;
    width: 00px;
    
}
button{
    border: 0;
    border-radius: .3em;

}
li{
    
    list-style: none;
    border: 0;
    display: flex;
    min-width: 160px;
    justify-content: space-between;
}