.MainMansionImage {
    width: 90%;
    height: 90%;
    display: block; /*this means that the container is treated as a block therefore the image inside can be centralised by the margins, a block element takes up the whole line on the page*/
    margin: auto;
    padding: 10px;
}

.MainMansionImage2, .DocksImage, .SwimmingPoolImage, .MasterBedroomImage, .Bedroom1Image, .BackImage, .Bathroom1Image, .Bathroom2Image, .ThroneRoomImage {
    width: 50%;
    height: 50%;
    display: block;
    margin: auto;
    padding: 10px;
}

.Logo {
    position: fixed;
    right: 0;
    bottom: 0;
    padding: 10px;
    width: 6%;
    height: 10%;
}

body {
    background-color: #E3F0FF;
}

h1 {
    color: black;
    text-align: center;
    font-family: Garamond, "Times New Roman", serif;
}

h2 {
    color: black;
    text-align: center;
    font-family: Garamond, "Times New Roman", serif;
}

p {
    font-family: Garamond, "Times New Roman", serif;
    font-size: 20px;
    text-align: center;
}

nav {
    font-family: Garamond, "Times New Roman", serif;
    text-align: center;
}

li {
    text-align: center;
}



.ButtonCustomisation{
    width: 30%;
}

.Form {
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 80%;
    text-align: center;
}

/*Media query for mobile:*/
@media (max-width: 500px){/*when the screen size is less than 500 pixels, the font size should change*/
    body {
        font-size: large;
    }
    .MainMansionImage {
        width: 100%;
        height: 100%;
    }
}
@media (max-width: 300px){/*make text even bigger for smaller phones*/
    body {
        font-size: x-large;
    }
    .MainMansionImage {
        width: 100%;
        height: 100%;
    }
}