html {
    background-image: repeating-linear-gradient(
        to right,
        rgb(228,152,191),
        rgb(228,152,191) 10%,
        rgb(242,202,106) 10%,
        rgb(242,202,106) 20%,
        rgb(134,210,137) 20%,
        rgb(134,210,137) 30%);
}
body {
    font-family: 'Archivo Black', sans-serif;
    color: rgb(255, 255, 255);
    margin: auto;
}
header {
    background-color: rgb(151,150,181);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.logo {
    width: 20%;
    padding: 2%;
}
.middle-of-page {
    margin: 2% 15%;
    border-radius: 35px;
    background-color: rgb(151,150,181);
    padding: 2%;
    font-size: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.inside {
    width: 50%;
    margin-bottom: 2%;
    border-radius: 35px;
}
.front-view {
    width: 50%;
    margin-bottom: 2%;
    border-radius: 35px;
}
#map {
    height: 350px;
    width: 50%;
    border-radius: 35px;
}
footer {
    background-color: rgb(151,150,181);
    right: 0;
    bottom:0;
    left:0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2%;
}
.social-media {
    display: flex;
    justify-content: space-between;
    width: 15%;
}
.social-media-logos {
    width: 75%;
}
@media (max-width: 450px) {
    .logo {
        width: 50%;
    }
    .middle-of-page {
        margin: 5%;
        border-radius: 25px;
        padding: 5%;
        text-align: center;
    }
    .inside {
        width: 80%;
        margin-bottom: 5%;
        border-radius: 25px;
    }
    .front-view {
        width: 80%;
        margin-bottom: 5%;
        border-radius: 25px;
    }
    #map {
        height: 250px;
        width: 80%;
        border-radius: 25px;
    }
    .social-media {
        width: 45%;
    }
}