User:Rothwell/boxes/styles.css

.Rothwell.Castle.container {
	background-image: url(https://static.miraheze.org/rothwellwiki/9/97/1366733_e7c52b3b_%28small%29.jpeg);
}
.Roman.Settlement.container {
	background-image: url(https://static.miraheze.org/rothwellwiki/9/92/Caesar%27s_first_invasion_of_Britain%3B_Caesar%27s_boat_is_pulled_Wellcome_V0048276_%28small%29.jpg);
}
.Thorpe.Hall.container {
	background-image: url(https://static.miraheze.org/rothwellwiki/2/21/Thorpe_Hall_G_Roberts_%28small%29.jpg);
}
.Rothwell.Civic.Building.container {
	background-image: url(https://static.miraheze.org/rothwellwiki/a/a7/507316_6b49b0a7_%28small%29.jpg);
}
.container {
    background-size: cover; /* Optional: Ensure the image covers the element */
    background-repeat: no-repeat; /* Optional: Prevent the image from repeating */
    height: 40%; /* Optional: Ensure the element has height */
    border-radius:5px;
    box-shadow: inset 0 4px 8px 0 rgba(0, 0, 0, 0.2), inset 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background-position: center;

}

@media (min-width: 800px) {
    .container {
        height: 50%;
    }
}

/* For screens between 800px and 721px */
@media (max-width: 799px) and (min-width: 721px) {
    .container {
        height: 40%;
    }
}

/* For screens between 721px and 400px */
@media (max-width: 720px) and (min-width: 401px) {
    .container {
        height: 50%;
    }
}

/* For screens 400px and below */
@media (max-width: 400px) {
    .container {
        height: 40%;
    }
}

a {
    text-decoration: none !important;
}

.place_box_c {
    color: black;
    font-size: 75%;
    text-align: center;
    margin: 2.5%;
}

.place_box_p {
    color: black;
    font-size: 100%;
    text-align: left;
    border-top: 4px solid #b1d3e1;
    padding-top: 5%;
    box-shadow: inset 0 4px 4px -8px rgb(177,211,225), inset 0 6px 10px -8px rgb(177,211,225)
}