/* HEADER */

h1 {
    text-align: right;
}

header {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 0;
}

#header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    margin: 2em 0;
}

#header div:nth-child(1) {
    text-align: right;
}

#header div:nth-child(2) {
    text-align: left;
}

#header div {
    max-width: 20em;
}

#logo {
    height: 12em;
    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;}
}

#info-banner {
    text-align: center;
    margin: 0 10%;
    border: 1px dashed;
    animation: banner-color 10s infinite;
}

@keyframes banner-color {
    0% {border-color: #84a98c;}
    17% {border-color: #e3b23c;}
    33% {border-color: #a4969b;}
    50% {border-color: #655560;}
    66% {border-color: #50858b;}
    83% {border-color: #c1666b;}
    100% {border-color: #84a98c;}
}

/* BODY */

#body {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 2em;
    margin: 3em 2em;
}

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

/* COMMON */

.category {
    outline-width: 0.2em;
    outline-style: double;
    transition: outline-width 1s;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1em;
    width: 400px;
    padding: 1em;
}

.category:hover {
    outline-width: 0.5em;
}

.category-title {
    margin: 0;
    padding: 0.3em 1em;
    position: absolute;
    top: -0.3em;
    left: -0.3em;
    text-decoration: none;
    background-color: white;
    font-size: 0.8em;
    font-weight: 400;
    text-transform: uppercase;
}

.category-icon {
    font-size: 5em;
    align-items: center;
    line-height: 100px;
}

.category-description {
    width: 100%;
}

/* ABOUT */

#about {
    outline-color: #84a98c;
}

#about .category-icon {
    color: #84a98c;
}

/* JOIN */

#join {
    outline-color: #e3b23c;
}

#join .category-icon {
    color: #e3b23c;
}

/* PROJECTS */

#projects {
    outline-color: #a4969b;
}

#projects .category-icon {
    color: #a4969b;
}

/* PEOPLE */

#people {
    outline-color: #655560;
}

#people .category-icon {
    color: #655560;
}

/* DAY */

#day {
    outline-color: #50858b;
}

#day .category-icon {
    color: #50858b;
}

/* KVISSENTALI */

#kvissentali {
    outline-color: #c1666b;
}

#kvissentali .category-icon{
    color: #c1666b;
}