html {
    box-sizing: border-box;
}

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

/* every single element with its margins, paddings etc. will now be treated as a whole box for specifications like width, high etc.*/

.body {
    width: 100%;
    margin: 0;
}

.container {
    width: 100%;
    font-family: "PT Sans Narrow", sans-serif;
    margin: 0 auto;
    padding: 10px 5%;
    color: #000000;
    background-color: rgb(255, 255, 255);
    font-size: 18px;
}

.dark {
    color: rgb(255, 255, 255);
    max-width: 4000px;
    background-color: #000000;
}

.element {
    display: block;
    width: 100%;
}

.houses {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    flex-wrap: wrap;
    width: 100%;
}

.list {
    width: 100%;
    list-style-type: none;
}

.attractions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    flex-wrap: wrap;
    grid-gap: 10px 10px;
}

.picture {
    width: 300px;
    height: 200px;
}

@media (max-width: 767px) {
    .container {
        font-size: 12px;
        width: 100%;
        padding: 0 5%;
    }
}

@media (min-width: 1500px) {
    .container {
        font-size: 21px;
    }
}