* {
    font-family: "Century Gothic", CenturyGothic, Geneva, AppleGothic, sans-serif;
    margin: 0;
    padding: 0;
	text-align: justify;
}

body {
	background: url(parrainages/grungy-gray-marble-textured-background.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

img
{
	vertical-align: middle;
	height: 1.5em;
}

	body.normal > div {
		margin-top: 2vw;
		margin-left: auto;
		margin-right: auto;
		width: 70%;
	}

.mainFlexContainer {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    align-items: center;
}

header {
    top: 0;
    width: 100%;
    z-index: 1;
    background-color: black;
}

    header > div {
        display: flex;
        flex-flow: row wrap;
        align-items: stretch;
        font-weight: bold;
    }

        header > div > * {
            text-align: center;
            color: white;
            font-size: 1.8em;
            padding: 0.3em;
        }

        header > div > .title {
            flex-basis: 100%;
        }

        header > div > .menu {
            flex-basis: 1fr;
            flex-grow: 1;
            font-weight: lighter;
            text-decoration: none;
            font-size: 1.2em;
        }

            header > div > .menu:hover {
                background-color: white;
                color: black;
				cursor: pointer;
            }

            header > div > #active {
                background-color: white;
                color: black;
            }

            header > div > .active {
                background-color: white;
                color: black;
            }

ul {
    list-style: none;
}

body > div > ul, body > div > article {
    padding: 1vw;
    margin: 1vw;
    box-shadow: 0px 0px 1vw black;
    border-radius: 0.75vw;
    background-color: white;
    list-style: none;
	flex-basis: 95%;
}

    body > div > ul > *, body > div > article > * {
        margin: 0.6vw 0vw 0vw 0vw;
    }

        ul > * b {
            color: darkgreen;
			/* animation-name: clignoter; */
			/* animation-duration: 2s; */
			/* animation-iteration-count: infinite; */
			transition: none;
        }

.description {
	margin-top: 1em;
	margin-bottom: 1em;
	font-style: italic;
	font-weight: 600;
}

.icon
{
	height: 1em;
}

@keyframes clignoter {
    0% {
        opacity: 0.50;
    }

    40% {
        opacity: 0.75;
    }

    90% {
        opacity: 1;
    }
}

h2 {
    font-size: 1.2em;
	margin: 0;
	padding: 0;
}

.alert {
    color: red;
    font-style: italic;
}

@media screen and (min-width: 1000px) {
	body {
		margin-left: 10%;
		margin-right: 10%;
	}

	header {
		position: sticky;
	}
}