/* Import from google fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Sedan+SC&display=swap');

/* Wildcard selector to override default settings */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* General */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'Playfair Display';
}

h1, h2, h3, nav {
    font-family: 'Sedan SC';
}

/* Header */
header {
    width: 100%;
    background-color: #f38b43;
    text-align: center;
    padding: 10px;
    border-bottom: 1px solid #2f0f0f;
}

/* Navbar */
#nav {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: baseline;
    background-color: #f38b43;
    padding: 5px;
}

.nav-item {
    margin: 0px 5px;
}

nav>a {
    text-decoration: none;
    color: #2f0f0f;
}

nav>a:hover {
    text-decoration: underline;
}

/* Main Content */
main {
    width: 100%;
    overflow-wrap: break-word;
    /* Let main element expand to push down footer */
    flex: 1 0 auto;
}
/* Amphora */

#amphora {
    background-color: rgba(228, 221, 221, 0.6);
    padding: 10px;
}

.margin-10px {
    margin: 10px;
}

.full-screen-width {
    width: 100%;
}

#amphora h2,
#mythology h2 {
    font-size: 160%;
    padding: 5%;
}

#amphora p,
#mythology p {
    margin: 10px;
    padding: 2%;
    line-height: 2;
    font-size: 140%;
}

/* Mythology */
#mythology {
    padding: 10px;
}

/* Sources */
#sources {
    width: 100%;
    background-color: rgba(228, 221, 221, 0.6);
    padding: 10px 5px;
}

#sources>h2 {
    font-size: 160%;
}

#sources>h3 {
    padding-left: 5px;
}

.source-list-item {
    padding: 5px;
}

/* Feedback */
#feedback-form {
    margin: 20px auto;
    background-color: rgba(60, 60, 60, 0.6);
    padding: 20px;
    width: 255px;
    height: 370px;
}

.text-entry {
    margin: 10px 5px 10px 5px;
}

#feedback > h2 {
    text-align: center;
    padding-top: 10px;
    font-size: 160%;
}

#feedback-box {
    height: 152px;
    width: 190px;
}

/* Footer */
footer {
    width: 100%;
    color: #2f0f0f;
    background-color: #f38b43;
    font-size: 160%;
    text-align: center;
    overflow-wrap: break-word;
}

#social-media {
    text-align: center;
    display: flex;
    justify-content: space-evenly;
    list-style: none;
    padding: 10px 0;
}

footer>h2 {
    padding: 10px 5px;
}

footer p {
    font-size: 90%;
}

/* Media query: for tablets and larger screens (768px and larger) */
@media screen and (min-width: 768px) {
    /* Make text appear next to images on larger screens */
    #amphora-content,
    #mythology-content {
        display: flex;
    }

    #amphora p,
    #mythology p {
        line-height: 1;
        font-size: 100%;
    } 

    #amphora-content div,
    #mythology-content div {
        width: 50%;
    }
}

/* Media query: for 4k and larger screens (2560px and larger) */
@media screen and (min-width: 2560px) {
    /* shrinking width of content on the largest screens */
    main {
        width: 80%;
        margin: 0 auto;
    }
}