/*        *
 * BODIES *
 *        */
body {
    font-family: "Josefin Sans", sans-serif;
    background-attachment: fixed;
}

/*                     *
 * TOP NAVIGATION MENU *
 *                     */
header {
    overflow: hidden;
    transition: margin-left 0.5s;
    background-color: #333;
}

header a {
    float: left;
    display: flex;

    color: white;
    text-align: center;
    text-decoration: none;
    padding: 12px;
    font-size: 17px;
    transition: 0.2s;
}

header a:hover {
    background-color: #ddd;
    color: black;
}

header a.active {
    background-color: #151515;
    color: white;
}

header > a + div       { display: none;  }
header > a:hover + div { display: block; }
header > a + div:hover { display: block; }

@media screen and (max-width: 500px) {
    header a {
        float: none;
        display: block;
    }
}

/*                      *
 * SIDE NAVIGATION MENU *
 *                      */
#sideMenu {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 250px;
    overflow-x: hidden;

    padding-top: 50px;
    transition: 0.5s;
    transform: translateX(-100%);

    background-color: #111;
}

#sideMenu.open {
    transform: translateX(0)
}

#sideMenu ul {
    list-style-type: none;
}

#sideMenu a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.1s;
}

#sideMenu a:hover {
    color: #f1f1f1;
}

#sideMenu a.active {
    color: black;
    background-color: white;
}

#sideMenu #sideMenu\:closeBtn {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 36px;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
    .menu {padding-top: 15px;}
    .menu a {font-size: 18px;}
}

/*             *
 * OTHER STUFF *
 *             */
#content {
    transition: margin-left 0.5s;
    padding: 20px;
}

.dawn {
    background-image: linear-gradient(135deg, #4159e7 0%, #a45ef5 100%);
    color: white;
}

.promenade {
    background-image: linear-gradient(135deg, #99e550 0%, #2a7913 100%);
    color: white;
}

.culinaire {
    background-image: linear-gradient(135deg, #ecc954 0%, #daaa34 100%);
    color: white;
}

.artisanat {
    background-image: linear-gradient(135deg, #54a8ec 0%, #2586ca 100%);
    color: white;
}

.mubble {
    background-image: linear-gradient(135deg, #ec6154 0%, #be2e21 100%);
    color: white;
}

.universal_ores {
    background-image: linear-gradient(135deg, #48e8bc 0%, #2ab08b 100%);
    color: white;
}

p {
    text-align: center;
}

p, li {
    font-size: 1.2em;
}

.whiteBox {
    color: black;
    border: thin solid black;
    background: white;
    text-align: left;
    padding: 10px;
    display: inline-block;
}

.whiteBox ul {
    padding-right: 20px;
}

.button {
    cursor: pointer;
}

.center {
    text-align: center;
    margin: auto;
}

/*       *
 * FONTS *
 *       */

/* vietnamese */
@font-face {
    font-family: 'Josefin Sans';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/josefinsans/v23/Qw3PZQNVED7rKGKxtqIqX5E-AVSJrOCfjY46_DjQbMlhLzTs.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: 'Josefin Sans';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/josefinsans/v23/Qw3PZQNVED7rKGKxtqIqX5E-AVSJrOCfjY46_DjQbMhhLzTs.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Josefin Sans';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/josefinsans/v23/Qw3PZQNVED7rKGKxtqIqX5E-AVSJrOCfjY46_DjQbMZhLw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}