@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

* {
    margin: 0;
    padding: 0;
    font-family: 'Roboto';
}

.top {
    background-color: #1F2937;
}

.headerLogoAndNav {
    display: flex;
    justify-content: space-between;
    padding: 16px;
}

.topText {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.DogFace {
    border-radius: 50%;
    border: solid #E5E7EB;
}

.mainText {
    size: 48px;
    color: #F9FAF8;
    font-weight: bolder;
}

.secondText {
    size: 18px;
    color: #E5E7EB;
    max-width: 250px;
}

.textAndPicture {
    display: flex;
    gap: 36px;
    justify-content: center;
    align-items: center;
    padding: 2vh 8vh 8vh 8vh;
}

.firstMiddle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
    padding: 4vh;
}

.middleText {
    size: 36px;
    color: #1F2937;
}

.middlePictureAndText {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.middlePictures {
    border-radius: 5px;
    border: solid #3882F6;
}

.secondMiddle {
    background-color: #E5E7EB;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2vh 8vh 2vh 8vh;
    flex-direction: column;
}

.quoteText {
    font-style: italic;
    color: #1F2937;
}

.quoteAuthor {
    font-weight: bold;
    min-width: 389px;
    display: flex;
    justify-content: end;
}

.textAndPictureThird {
    display: flex;
    gap: 36px;
    background-color: #3882F6;
    justify-content: center;
    padding: 16px;
    width: 900px;
    min-width: fit-content;
    border-radius: 6px;
    margin: 36px 0px 36px 0px;
}

.textAndPictureThird button {
    border-color: #F9FAF8;
}

.thirdMiddle {
    display: flex;
    justify-content: center;
}

footer {
    display: flex;
    justify-content: center;
    background-color: #1F2937;
    color: #F9FAF8;
    padding: 16px;
}

button {
    border-radius: 5px;
    padding: 5px;
    background-color: #3882F6;
    color: #F9FAF8;
    width: 100px;
    margin: 16px 16px 16px 0px;
}

a {
    text-decoration: none;
    size: 18px;
    color: #E5E7EB;
}

nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
}