* {
    margin: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    height: 100%;
}


/*--- ---*/
header {
    padding: 0;
}

nav {
    background-color: #EEEEEE;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 75px;
    display: flex;
    border-radius: 1em 1em 0em 0em;
    box-shadow: 0em 0em 1em #BBBBBB;
    z-index: 1;
}

.nav__list {
    list-style: none;
    padding: 0;
    display: flex;
    height: 100%;
    flex-direction: colum;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
}

.nav__item {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.nav__link {
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 0.5em;
    height: 100%;
    color: #333333;
    text-decoration: none;
    text-align: center;
    transition: 200ms linear;
}

.nav__link:hover {
    background-color: #FFFFFF;
    color: #333333;
    border-radius: 1em;
}

.nav__icon {
}

.nav__name {
    padding: 0.5em 0em 0em 0em;
    font-size: 0.5em;
}


main {
    padding: 4%;    
    padding-bottom: 25%;
}


/*--- Card View ---*/

.card__container {
    border: 1px solid transparent;
    list-style: none;
    padding: 1em;
    display: flex;
    justify-content: space-evenly;
    flex-flow: row wrap;
    row-gap: 1em;
}

.card__item {
    border: 1px solid transparent;
    border-radius: 1em;
    background-color: #EEEEEE;
    box-shadow: 0 0 0.5em #BBBBBB;
    width: 8em;
    height:8em;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-evenly;
    align-items: center;
    cursor: pointer;
    transition: 200ms linear;
}

.card__item:hover {
    background-color: #ffffff;
    transform: scale(0.9,0.9);
    transform: rotate(5deg);
}

.card__item:active {
    transform: rotate(-15deg);
}

.card__link {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-evenly;
    align-items: center;
    text-decoration: none;
    color: #333333;
    height: 100%;
    width: 100%;
}

.card__link:hover {
    color: #333333;
}



hr.rounded-red {
    border-top: 5px solid #AA151B;
    border-radius: 5px;
}

hr.rounded-yellow {
    border-top: 5px solid #F1BF00;
    border-radius: 5px;
}

.faq-item {
    font-size: large;
    font-weight: 500;
}

#headingStartpage {
    letter-spacing: 4px;
}

#link-copyright {
    text-decoration: none;
}


.card__underconstruction {
    opacity: 0.15;
}