/* HEADER */

.page-header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    padding: 1em 0 2em 0;
    margin: 0;
    width: 100%;
}

.page-header a {
    text-decoration: none;
    font-weight: normal;
}

.page-header a:hover {
    color: #023020;
}

#nav-logo {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 1em;
}

#nav-logo p {
    margin: 0;
    padding: 0;
}

#page-logo {
    height: 5em;
    stroke: green;
    stroke-width: 1px;
    animation: logo-color 10s infinite;
}

@keyframes logo-color {
    0% {stroke: #84a98c;
        stroke-width: 1px;}
    17% {stroke: #e3b23c;}
    33% {stroke: #a4969b;}
    50% {stroke: #655560;
        stroke-width: 3px;}
    66% {stroke: #50858b;}
    83% {stroke: #c1666b;}
    100% {stroke: #84a98c;
        stroke-width: 1px;}
}

/* NAV */

nav ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5em;
    list-style-type: none;
    padding: 0;
}

nav a {
    text-decoration: none;
}

nav a:hover {
    border-bottom: 7px solid;
    transition: border 0.5s ease;
}

#about-nav:hover {
    color: #84a98c;
    border-color: #84a98c;
}

#about-nav-selected {
    color: #84a98c;
    border-bottom: 7px solid #84a98c;
}

#join-nav:hover {
    color: #e3b23c;
    border-color: #e3b23c;
}

#join-nav-selected {
    color: #e3b23c;
    border-bottom: 7px solid #e3b23c;
}

#projects-nav:hover {
    color: #a4969b;
    border-color: #a4969b;
}

#projects-nav-selected {
    color: #a4969b;
    border-bottom: 7px solid #a4969b;
}

#people-nav:hover {
    color: #655560;
    border-color: #655560;
}

#people-nav-selected {
    color: #655560;
    border-bottom: 7px solid #655560;
}

#day-nav:hover {
    color: #50858b;
    border-color: #50858b;
}

#day-nav-selected {
    color: #50858b;
    border-bottom: 7px solid #50858b;
}

#kvissentali-nav:hover {
    color: #c1666b;
    border-color: #c1666b;
}

#kvissentali-nav-selected {
    color: #c1666b;
    border-bottom: 7px solid #c1666b;
}

/* BODY */

#page-body {
    width: 100%;
    margin: 0 auto;
}

@media only screen and (min-width: 1000px) {
    #page-body {
        width: 80%;
    }
}

/* PEOPLE */

h2 {
    text-align: left;
    font-weight: 400;
    margin: 2em 0;
    border-bottom: 0.5px dashed #655560;
    color: #655560;
    text-transform: uppercase;
    font-size: 1.5em;
}

#board-members {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 2em;
}

.person {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 1em;
}

.person img {
    width: 200px;
    height: 200px;
}

#join-add {
    text-align: center;
    margin: 2em 0 4em 0;
}

#join-add a {
    text-decoration: none;
    outline-width: 0.3em;
    outline-style: double;
    outline-color: #e3b23c;
    transition: outline-width 1s;
    padding: 1em 3em;
}

#join-add a:hover {
    color: #e3b23c;
    outline-width: 0.5em;
}

/* ABOUT */

#about-body {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2%;
}

#about-body div {
    min-width: 45%;
}

#statute-button {
    text-align: center;
}

#statute-button a {
    text-decoration: none;
    outline-width: 0.3em;
    outline-style: double;
    outline-color: #84a98c;
    transition: outline-width 1s;
    padding: 1em 3em;
}

#statute-button a:hover {
    color: #84a98c;
    outline-width: 0.5em;
}

#statue {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: -2em;
    gap: 2em;
}

#media-button {
    text-align: center;
    padding: 2em 0
}

#media-button a {
    text-decoration: none;
    outline-width: 0.3em;
    outline-style: double;
    outline-color: #c1666b;
    transition: outline-width 1s;
    padding: 1em 3em;
}

#media-button a:hover {
    color: #c1666b;
    outline-width: 0.5em;
}

/* PROJECTS */

h3 {
    text-align: left;
    font-weight: 400;
    margin: 0.5em 0;
    font-size: 1.5em;
}

#projects {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 2em;
}

.project {
    max-width: 100%;
}

.project img {
    max-width: 100%;
}

@media only screen and (min-width: 500px) {
    .project {
        max-width: 400px;
    }
    .project img {
        max-width: 400px;
    }
}

.project-date {
    margin: 0;
}

/* KVISSENTALI DAY */

#day-body {
    width: 100%;
    margin: 0 auto;
}

@media only screen and (min-width: 1000px) {
    #day-body {
        width: 50%;
    }
}

.day-photo {
    width: 100%;
    display: block;
    margin: auto;
    padding: 2em 0;
}

#day-button {
    text-align: center;
    margin: 3em 0;
}

#day-button a {
    text-decoration: none;
    outline-width: 0.3em;
    outline-style: double;
    outline-color: #50858b;
    transition: outline-width 1s;
    padding: 1em 3em;
}

#day-button a:hover {
    color: #50858b;
    outline-width: 0.5em;
}

/* KVISSENTALI */
iframe {
    width: 100%;
    height: auto;
}

@media only screen and (min-width: 1500px) {
    iframe {
        width: 1120px;
        height: 630px;
    }
}