html, body{
    margin: 0;
    padding: 0;
    width: 100%;
    font-family: 'Montserrat', sans-serif;
    background-color: rgb(151, 176, 190);
    font-family: 'Montserrat', sans-serif;
    color: white;
}

li {
	scroll-snap-align: center;
	display: inline-block;
	border-radius: 3px;
	font-size: 0;
}


#app{
    width: 80vw;
    height:auto;
    display: flex;
    flex-direction: row;
    margin:auto;
}

#right{
    display: flex;
    flex-direction: column;
    width:50%;
    margin: 0vw auto;
}

#left{
    display: flex;
    flex-direction: column;
    width:50%;
    padding: 2vw;
    margin: 0vw auto;
    background-color: rgb(175, 152, 106);
    box-shadow: 0 0 0.4vw black;
    box-shadow: 0 0 2.2vw  rgb(61, 43, 6) inset;
}

.title{
    margin: 2vw auto 2vw auto;
    font-size: 1.8vw;
    font-weight: 600;
    font-family: 'Lobster Two', cursive;
    background-color: rgb(248, 244, 244);
    width: 12vw;
    border-radius: 2vw;
    padding: 0.5vw;
    color: black;
    box-shadow: 0 0 0.4vw rgba(0, 0, 0, 0.671);
}

#ecran{
    display: flex;
    flex-direction: column;
    margin:auto;
    padding: 1vh  auto;
    width: 30vw;
    height: 22vh;
    border-radius: 0.8vw;
    color:white;
    background-color: rgb(20, 20, 20);
    box-shadow: 0 0 0.4vw black;
    box-shadow: 0 0 2.2vw  rgb(0, 0, 0) inset;
}

.ecran_text{
    font-size: 1vw;
    font-weight: 500;
    font-family: 'Roboto Mono', monospace;
}

#buttons_sugar{
    margin:1vw auto 0vw auto;
}

#buttons_coffees{
    margin: auto;   
}

ul li {list-style: none;}

.coffee{
    display: flex;
    flex-direction: row;
    width: 20vw;
    height: 3vw;
    margin: 0vw auto 1vw auto;
    padding: 0vw 0.5vw;
    border:none;
    color:rgb(247, 245, 245);
    font-size: 1.4rem;
    font-weight: 400;
    font-family: 'Lobster Two', cursive;
}

.coffee_title{
    width: 12vw;
    padding: 1vw 1vw;
    border-radius : 0.3vw;
    color: rgb(8, 8, 8);
    background-color: rgb(245, 241, 241);
    text-align: center;
}

.circle{
    width: 1.9vw;
    height: 1.9vw;
    border-radius: 100%;
    background-color: rgb(235, 231, 231);
    border: none;
    box-shadow: 0 0 0.2vw rgba(0, 0, 0, 0.6);
    margin: auto 0vw auto 2vw;
} .circle:hover {
    cursor: pointer;
} .circle:active {
    background-color: rgb(26, 26, 26);
}

.btn{
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.sugar_icon{
    font-size: 2.5vw;
    color: rgb(12, 12, 12);
}

li{
    margin: 3vw 2vw;
    background-color: white;
    width: 20vw;
}

ul{
    padding: 0;
}

#creditCard{
    margin:3vw auto;
    background-color: rgb(39, 39, 66);
    width: 25vw;
    border-radius: 0.8vw;
    height: 13vw;
    box-shadow: 0 0 0.4vw black;
} #creditCard:hover{
    cursor: pointer;
} #creditCard:active{
    background-color: rgb(84, 84, 128);
}

#title{
    text-align:center;
    padding: 1vw;
    font-size: 2vw;
    font-weight: 600;
}

p {
    text-align: center;
}

#historiqueCard{
    width: 30vw;
    height: 50vh;
    margin:0vw auto;
    padding: auto;
    background-color: rgb(31, 31, 31);
    border-radius: 0.8vw;
    color: rgb(255, 255, 255);
    display: flex;
    flex-direction: column;
    overflow-y:auto;
}

#commandeTitle {
    margin: 2vh auto;
    font-size: 2vw;
    font-weight: 900;
}

#commandes {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
}

.commande {
    margin: 1vh auto;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
}

#payer{
    background-color: black;
    width: 10vw;
    color: white;
}

@media screen and (min-width: 700px) and (max-width: 1280px) {
.ecran_text{
    font-size: 1.3vw;
}
.coffee{
    font-size: 1rem;
    margin: 3vh auto;
}
.coffee_title{
    width: 16vw;
    height: 3vh;
}

#creditCard{
    margin: 7vw auto 0 auto;
}
#creditCard p {
    font-size: 1.3vw;
}
#title{
    font-size: 1.2vw;
}
#historiqueCard{
    width: 32vw;
    margin: 6vw auto 0 auto;
}
#commandeTitle {
    margin: 2vh auto;
    font-size: 1.5vw;
}
.commande {
    margin: 1vh auto;
    font-size: 1.4vw;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
}
}