@import url('https://fonts.googleapis.com/css2?family=Anaheim&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');
html{
    height: 100%;
    width: 100%;
}
body{
    width: fit-content;
    height: fit-content;
    font-family: 'Anaheim', sans-serif;
    background-image: url('https://github.com/mariabuitsan/assignment_1_3/blob/main/hypertext-prototype/assets/background-atrapasuenos.JPG?raw=true');
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.8;
    height: 100%;
    width: 100%;
}
h2{
    color: #F6F0F0;
    font-size: 20px;
    line-height: 18px;
    padding: 1%;
}
#author-1{
    background-color: black;
    color: aliceblue;
    display: flex;
    position: absolute;
    font-size: 13px;
    top: 250px;
    left: 600px;
}
#author-1a{
    background-color: black;
    color: aliceblue;
    display: flex;
    position: absolute;
    font-size: 13px;
    top: 250px;
    left: 1000px;
}
#author-2{
    background-color: black;
    color: aliceblue;
    display: flex;
    position: absolute;
    font-size: 13px;
    top: 390px;
    left: 600px;
}
#author-3{
    background-color: black;
    color: aliceblue;
    display: flex;
    position: absolute;
    font-size: 13px;
    top: 600px;
    left: 800px;
}
#author-4{
    background-color: black;
    color: aliceblue;
    display: flex;
    position: absolute;
    font-size: 13px;
    top: 400px;
    left: 840px;
}
#author-5{
    background-color: black;
    color: aliceblue;
    display: flex;
    position: absolute;
    font-size: 13px;
    top: 180px;
    left: 800px;
}
#no-author{
    background-color: black;
    color: aliceblue;
    display: flex;
    position: absolute;
    font-size: 13px;
    top: 550px;
    left: 1080px;
}
p{
    color: whi;
    font-size: 15px;
    line-height: 18px;
    padding: 1%;
    margin: 5%;
}
#menu{
    display: flex;
    flex-direction: row;
    width: fit-content;
    height: fit-content;
    justify-content: center;
    margin-left: 50%;
    box-shadow: 8px 8px 20px 20px rgb(254, 251, 250);
}
.container{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    flex-wrap: wrap;
    width: 100%;
    height: 550px;
}
.why{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: 380px;
    height: 500px;
    background-color: whitesmoke;
    padding-right: 5%;
    margin-right: 2%;
    margin-left: 2%;
    
}
.quotes{
    display: flex;
    flex-direction: column;
    width: 800px;
    height: 400px;
    margin-right: 1%;
    justify-content: space-evenly;
    align-content: center;
    align-items: center;
    justify-items: center;
    flex-wrap: wrap;
    margin-top: 15px;
}