/*
############################################################################
#                                                                          #
# Description: Fichier principal regroupant les éléments communs à toutes  #
#              les pages.                                                  #
#                                                                          #
############################################################################

Sites web utilisés pour le CSS:
https://css-tricks.com/guides/
https://stackoverflow.com/
https://www.w3schools.com/css/default.asp

Toutes les recherches sont effectuées en anglais
sur mon instance SearX https://searx.debulois.fr
*/


:root {
    /* Global */
    --mainSiteColor:             #c0392b;
    --bodyBg:                    #fafafa;
    --separatorBg:                var(--bodyBg);
    --bg:                        white;
    --text:                      black;
    /* Header & navbar */
    --navbarTextColor:            var(--text);
    --headerBg:                   var(--bg);
    --navBg:                     #f8f8f8;
    /* Slideshow */
    --slideText:                 whitesmoke;
    --slideBg:                   black;
    --slideStroke:               black;
    /* Footer */
    --footerTextColor:           #636e72;
    --footerBgColor:             #2d3436;
    /* Tableaux */
    --tableText:                   var(--text);
    --tableBg:                     var(--bodyBg);
    --tdBorderColor:              rgba(0, 0, 0, 0.2);
    --tableStarUnchecked:         darkgray;
    --tableStarChecked:           orange;
    /* Messages */
    --messageTextErrorColor:      red;
    --messageTextSuccessColor:    green;
    /* Input icon et button */
    --iconColor:                  white;
    --btnHoverBg:                 #e74c3c;
    /* Input border */
    --inputBorder:                 2px solid var(--mainSiteColor);
    --thBorder:                    2px solid var(--mainSiteColor);
    --tdBorder:                    2px solid var(--tdBorderColor);
    --iBorderRadius:               5px 0px 0px 5px;
    --inputBorderRadius:           0px 5px 5px 0px;
    /* Notification */
    --notifAsideBg:               #f8f8f8;
    --notifAsideBorder:            4px solid #cf7e39;
    --notifButtonCloseColor:      #1a1a1a;
    --notifButtonCloseBg:         #d3c9c3c9;
    --notifButtonCloseBorder:      solid 1px #6e5e5e;
    --notifButtonCloseHoverColor: #e7e7e7;
    --notifButtonCloseHoverBg:    #ff5959;
    /* Fonts size */
    --fontSizeI:                   20px;
    --fontSizeSlideP:              34px;
    --fontSizeSmallPhone:          12px;
    --fontSizeSmallLess:           14px;
    --fontSizeSmall:               16px;
    --fontSizeSmallPlus:           18px;
    --fontSizeMedium:              26px;
    --fontSizeLarge:               28px;
}

@font-face {
    font-family: "akira";
    src:          url("../Fonts/akira.otf")
}

@font-face {
    font-family: "SourceSansPro";
    src:         url("../Fonts/SourceSansPro.ttf")
}

.show_flex {
    display:        flex !important;
    flex-direction: column;
}

.show_block {
    display: block !important;
}

.noBorder {
    border:           none !important;
    background-color: var(--bg) !important;
}

.separator {
    height:             10vh;
    background-color:   var(--separatorBg);
}

.info {
    font-style: italic;
}

.spacer {
    flex-grow: 2;
}

html {
	scroll-behavior: smooth;
}

body {
    min-height:       100vh;
    font-family:      SourceSansPro;
    display:          flex;
    flex-direction:   column;
    justify-content:  space-between;
    margin:           0px;
    background-color: var(--bodyBg);
    color:            var(--textColor);
    font-size:        var(--fontSizeSmall);
}

main {
    width:             80%;
    min-height:        70vh;
    margin-left:       auto;
    margin-right:      auto;
    display:           flex;
    flex-direction:    column;
    justify-content:   center;
    text-align:        center;
    border-top:        6px solid var(--mainSiteColor);
    border-right:      3px solid var(--mainSiteColor);
    border-bottom:     3px solid var(--mainSiteColor);
    border-left:       3px solid var(--mainSiteColor);
    border-radius:     3px;
    background-color:  var(--bg);
}

main h2 {
    max-width:     80%;
    margin-left:   auto;
    margin-right:  auto;
    padding:       1.5% 3%;
    font-size:     var(--fontSizeLarge);
    border-bottom: var(--mainSiteColor) 3px solid;
}

main h3 {
    max-width:     80%;
    margin-left:   auto;
    margin-right:  auto;
    padding:       0.5% 3%;
    font-size:     var(--fontSizeMedium);
    border-bottom: var(--mainSiteColor) 2px solid;
}

main label {
    display:         flex;
    justify-content: center;
}

main i {
    width:            60px;
    margin:           0px !important; /* important à cause de -> flag.css */
    height:           2em !important; /* important à cause de -> all.css fontawesome*/
    line-height:      2em !important; /* important à cause de -> all.css fontawesome*/
    font-size:        var(--fontSizeI);
    color:            var(--iconColor);
    background-color: var(--mainSiteColor);
    border-radius:    var(--iBorderRadius);
}

main table {
    display:         block;
    Overflow-x:      auto;
    Overflow-y:      auto;
    padding:         1em;
    border-collapse: collapse;
    width:           -moz-fit-content;
    width:           fit-content;
    max-width:       95%;
    margin-left:     auto;
    margin-right:    auto;
    color:           var(--textColor);
}

main th {
    border:           var(--thBorder);
    background-color: var(--tableBg);

}

main td {
    border:           var(--tdBorder);
    background-color: var(--tableBg);
}

select {
    height:        1.6em;
    line-height:   1.6em;
    border-radius: 3px;
    border:        var(--inputBorder);
}

main input[type="text"],
main input[type="email"],
main input[type="password"] {
    padding:       2px;
    height:        2.5em;
    font-size:     calc(32px / 2.5); /* nécessaire par rapport à quand c'est une div */
    border:        var(--inputBorder);
    border-radius: var(--inputBorderRadius);
}

main input[type="submit"],
main button {
    color:            var(--textColor);
    border:           var(--inputBorder);
    background-color: var(--bg);
    border-radius:    5px;
    padding:          0.2em 0.3em;
    transition:       all 0.08s ease-in-out;
}

main input[type="submit"]:hover,
main button:hover {
    cursor:             pointer;
    color:              var(--bg);
    background-color:   var(--btnHoverBg);
}

@media screen and (max-width: 768px) {
    body {
        font-size: var(--fontSizeSmallLess);
    }

    main h2 {
        font-size: var(--fontSizeMedium);
    }

    main h3 {
        font-size: var(--fontSizeSmallPlus);
    }
}