@import "style1.css";
@import "style2.css";
@import "style3.css";

h1 {
    color: blueviolet;
    font-family: 'Times New Roman', Times, serif;
    text-align: center;
    width: 1fr;
}

h2 {
    text-align: center;
}

.container {
    display: flex;
    flex-direction: column;
    padding: 10px;
    margin: 10px;
}

@media screen and (min-width: 700px) {
    .container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 50% 50%;
        grid-column-gap: 20px;
        margin: 20px;
        grid-row-gap: 15px;
        width: 100%;
        margin-right: 20px;
    }
}


#one,
#two,
#three,
#four,
#five,
#six {
    text-align: center;
    border: 3px solid rgb(95, 160, 140);
    border-radius: 10%;
    padding: 10px;
}

footer {
    font-style: oblique;
    padding-left: 20px;
}