@import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Condiment&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Petit+Formal+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Petit+Formal+Script&family=Rubik+Distressed&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mouse+Memoirs&family=Rubik+Distressed&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barriecito&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lacquer&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sirivennela&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik+Dirt&display=swap');


body {
    font-family:"Courgette";
    margin: 0;
    background-color: #2d5773;
}
.quotes-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.remy {
background-color: #6394bf;
width: 400px, 600px, 400px, 600px;
padding: 20px;
margin: 10px;
border-radius: 12px;
color: #eed28f;
font-size: 16px;
font-style: italic;
text-emphasis: initial ;
display: flex;
align-items: center;
font-family:'Mouse_Memoirs';
font-size: 30;
text-align: center;
justify-content: center;
font-style: italic;
}
.remy img{
    width: 180px;
    margin-bottom: 10px;
}

.linguini {
    background-color:#eed28f;
    width:300px;
    padding: 10px;
    margin: 10px;
    border-radius: 12px;
    color:black;
    font-size:small;
    display: flex;
    align-items: center;
    font-family: 'Condiment';
}
.linguini img{
    width:80px;
    margin: 10, 20,10,20;
}

.colette {
background-color:#f2f2f3;
width:300px;
padding:10px;
margin:10px;
border-radius:12px;
color:#2d5773;
font-size:20px;
display:flex;
align-items: right;
font-family: 'Petit_Formal_Script', bold;
}

.colette img {
    width: 50px;
    margin: 25px;
}

.gusteau {
background-color:#7297a5;
font-family:'Luckiest_Guy', cursive;
width:300px;
padding:10px;
margin:10px;
border-radius:12px;
color:#eed28f;
opacity: 0.75;
font-size: small;
display: flex;
align-items: left;
}

.gusteau img {
    width: 100px;
    margin: 5px;
}

.anton {
background-color: #6394bf;
width: 400px, 600px, 400px, 600px;
padding: 20px;
margin: 10px;
border-radius: 12px;
color: #f2f2f3;
font-size: 16px;
display: flex;
align-items: center;
font-family:'Rubix_Distressed';
font-size: smaller;
text-align: center;
justify-content: center;
}

.anton img {
    width:140px;
    margin-bottom:10px;
}

.quotes-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.django {
background-color:#7297a5;
font-family:'Lacquer';
width:300px;
padding:10px;
margin:10px;
border-radius:12px;
color:black;
font-size: medium;
display: flex;
align-items: left;
}

.django img {
    width:140px;
    margin-bottom: 15px;
}

.emile {
background-color:#f2f2f3;
font-family:'Barriecito';
width:300px;
padding:10px;
margin:10px;
border-radius:12px;
color:#6394bf;
font-size: medium;
font-weight: bold;
display: flex;
align-items: center;
}

.emile img {
    width: 160px;
    margin-bottom: 18px;
}

.horst {
background-color:#eed28f;
font-family:'Sirivennela';
width:300px;
padding:10px;
margin:10px;
border-radius:12px;
color:#2d5773;
font-size: medium;
font-weight: bold;
display: flex;
align-items: center;
}

.horst img {
    width: 140px;
    margin-bottom: 10px;
}

.skinner {
background-color: #6394bf;
width: 400px, 600px, 400px, 600px;
padding: 20px;
margin: 10px;
border-radius: 12px;
color: black;
font-size: 25px;
align-items: center;
display: flex;
font-family: 'Rubik Dirt';
font-size: medium;
text-align: center;
justify-content: center;
}

.skinner img {
    width: 120px;
    margin-bottom: 10px;
}