/*
    Balises
    -------
*/
html, body {
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
}

h1 {
    text-align: center;
    margin-top: 1em;
    font-family: serif;
    font-size: 3em;
    color: white;
}

h2 {
    font-size: 3em;
    color: rgb(204, 112, 63);
}

h3 {
    color: #347b16;
    text-align: center;
    font-size: 2em;
}

h4 {
    color: rgb(59, 103, 148);
    font-size: 1.5em;
    text-align: center;
    border-bottom: 1px solid rgb(59, 103, 148);
    width: 100%;
}

h5 {
    color: rgb(196, 112, 17);
    text-align: center;
    font-size: 1.5em;
}

a {
    text-decoration: none;
    color: rgb(192, 98, 44);
}

a:hover {
    color: #347b16;
}

p {
    font-size: 1.25em;
    text-align: justify;
}

li {
    font-size: 1.25em;
    text-align: justify;
}

figcaption {
    font-style: italic;
}

img {
    box-shadow: 3px 3px 6px grey;
    max-width: 100%;
}

textarea {
    min-width: 30em;
    max-width: 80em;
    height: 10em;
    border-radius: 10px;
}

input {
    border-radius: 10px;
}


/*
    Identifiants
    ------------
*/
#blogFooter {
    width: 100%;
    padding: 3em 0;
}

#blogFooter form {
    text-align: center;
}

#titleDiv {
    margin-top: 3em;
    width: 100%;
}

#titleDiv h2 {
    font-family: 'Tangerine', cursive;
    color: white;
    text-align: center;
}

#titleDiv img {
    left: 0;
    top: 0;
    z-index: 1;
}

#titleWrapper {
    display: none !important;
    background-color: rgb(73, 73, 73);
    left: 0;
    top: 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    z-index: 2;
    padding-top: 1%;
    padding-bottom: 1%;
}

#news {
    color: grey;
}

/* Menu large */
#navigation {
    background-color: white;
    height: 50px;
    top: -17px;
    width: 100%;
    box-shadow: 0px 6px 6px rgb(220, 220, 220);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    list-style-type: none;
    position: fixed;
    right: 0px;
    z-index: 999;
}

#navigation li {
    margin-right: 1em;
}

#iconMenu {
    position: fixed;
    right: 0px;
}

#learnNav {
    margin-top: 4em;
}

#learnNav ul {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style-type: none;
    width: 100%;
}

#learnNav li {
    margin-right: 1em;
}

#upBtn {
    position: fixed;
    right: 2em;
    bottom: 2em;
    display: none;
}

#upBtn img {
    box-shadow: 0 0 0 grey;
}

#contactForm {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

#formShow {
    border-bottom: 1px solid grey;
    display: flex;
    justify-content: space-between;
}

#formShow input {
    max-width: 100px;
}

#aboutPhotoOfMe {
    min-width: 300px;
}

#iconMenu {
    display: none;
}

#newBlogPostTitle {
    width: 30em;
}

#editBlogPostTitle {
    width: 50em;
}

#editBlogPostBody {
    width: 80em;
    height: 50em;
}

#newBlogComment {
    text-align: center;
}

#newBlogCommentWrapper {
    padding-bottom: 2em;
}

#newBlogPostPreviewWrapper {
    background-color: white;
    border: 1px solid grey;
    border-radius: 20px;
    padding: 1em;
    min-width: 500px;
    min-height: 200px;
    margin-top: 2em;
    box-shadow: 0px 3px 6px rgb(220, 220, 220);
}

.content {
    max-width: 80em;
    background-color: white;
    padding-right: 1em;
    padding-left: 1em;
    margin: 1em;
}

.contentFooter {
    background-color: rgb(37, 37, 37);
    display: flex;
    justify-content: center;
    color: white;
    padding: 3em 0;
    margin-top: 3em;
    width: 100%;
}

.left {
    display: flex;
    justify-content: flex-start;
}

.right {
    display: flex;
    justify-content: flex-end;
}

.center {
    display: flex;
    justify-content: center;
}

.superimposed {
    text-align: center;
}

.articleTextAndPictures {
    display: flex;
}

.note {
    color: grey;
    background-color: rgb(250, 230, 152);
    text-align: center;
    font-style: italic;
    font-size: 1em;
    padding: 0.25em 2em;
    box-shadow: 0px 3px 6px rgb(220, 220, 220);
}

.leftFloat {
    float: left;
}

.rightFloat {
    float: right;
}

.warning {
    text-align: center;
    width: 100%;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.good {
    color: rgb(70, 130, 24);
    background-color: rgb(193, 255, 145);
    box-shadow: 0px 3px 6px rgb(193, 255, 145);
}

.bad {
    color: rgb(255, 90, 82);
    background-color: rgb(255, 198, 197);
    box-shadow: 0px 3px 6px rgb(255, 198, 197);
}

.spaceAround {
    display: flex;
    justify-content: space-around;
}

.pageLink {
    color: rgb(192, 98, 44);
    text-shadow: 2px 2px 2px grey;
}

.currentPageLink {
    color: #347b16;
    border-bottom: 2px solid #347b16;
}

.formMandatory {
    color: rgb(204, 70, 63);
}

.formComponent {
    margin-top: 1em;
    display: flex;
    flex-direction: column;
}

.formComponent input {
    width: 30em;
}

.pageTitle {
    margin-top: 1.5em;
}

.aboutTitle {
    padding-top: 1em;
    color: rgb(192, 98, 44);
}

.shortPostBody {
    font-size: 1em;
    color: grey;
}

.readMore a {
    color: #e84a52;
    font-weight: bold;
    font-size: 16px;
}

.optional {
    color: grey;
}

.textForm {
    width: 30em;
}

.niceButton {
    border: 0;
    line-height: 2.5;
    padding: 0 20px;
    font-size: 1rem;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    border-radius: 10px;
    background-color: rgba(192, 98, 44, 1);
    background-image: linear-gradient(to top left, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, 0));
    /*box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6), inset -2px -2px 3px rgba(0, 0, 0, .6);*/
    margin-bottom: 1em;
}

.niceButton:active {
    color: #347b16;
}


/*
    Polices
    -------

    font-family: sans-serif;

    font-family: 'Tangerine', cursive;

*/

/*
    Media queries
    -------------
*/
@media all and (max-width: 1000px) {
    #titleWrapper {
        display: block !important;
    }

    #titleDiv {
        margin-top: 0;
    }

    #titleDiv img {
        display: none;
    }

    #iconMenu {
        display: block;
    }

    #learn0_feetImg {
        width: 40%;
    }

    .pageTitle {
        margin-top: 0.5em;
    }
}

@media all and (max-width: 600px) {

    #navigation {
        /* display: none; */
        display: grid;
        grid-template-columns: 1fr;
        height: 100%;
        position: relative;
        box-shadow: none;
        padding: 0;
    }

    #navigation li {
        margin: 0em;
        padding: 1em 0;
        text-align: center;
    }

    #learnNav {
        margin-top: 0;
    }

    #learnNav ul {
        display: grid;
        grid-template-columns: 1fr;
        list-style-type: none;
        width: 100%;
    }

    #learnNav li {
        margin-right: 0;
        padding: 1em 0;
    }
}

/* Mobiles */
@media all and (-webkit-min-device-pixel-ratio: 2) {

    #iconMenu img {
        width: 100px;
        height: 100px;
    }

    #smallMenu {
        font-size: 2em;
    }
}