html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    background-color: #fcfbf5;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Calibri, 'Trebuchet MS', sans-serif;
    font-size: 1em;


}

*::before, *, *::after{
    box-sizing: inherit;
}



header, main, h2, h1, img {
    margin: 10px;
}

header{
    font-size: 20px;
    font-weight: bolder;
    padding: 0;
}

main {
    margin-top:50px;
}
h2{
    margin: 0;
    padding: 0;
}

h1{
    margin: 0;
    padding: 0;
    font-size: 4.5em;
    
}

#summary{
    color:#7b7b7b;
    max-width: 645px;
}


button{
    margin-top: 50px;
   font-size: 2.5em; 
}

.container{
    gap: 20px;
    height: 100%;
    width: 100%;
   /* border: #e9320d 2px solid;*/
    display:flex;
    
}

#left_container {
    background-color: #fcfbf5;
    flex: 5;
   /* border: blue 3px solid; */
    margin: 10px;
}

img{
    padding: 0;
    width: 400px;
}

#right_container{
    background-color: #fcfbf5;
    flex: 6;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* This is where the random quotes will appear */
.card {
    background-color:#b6aea2;
    width: 700px;
    height: 875px;
    border: #3b2c2f 5px solid;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    overflow: hidden; /* keeps image + text inside the rounded corners */
    padding: 0px 20px;
    overflow: auto;
}

/*-------- quote sections ----------------*/
#show{
    font-size: 4em;
    font-weight: bold;
}

#quote{
    font-size: 2em;
}

#speaker{
    font-size: 1.5em;
}
/*-----------------------------------------*/