/* 
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 {
    --mainSiteColor:           #c0392b;
    --bodyBg:                  #fafafa;  
    --separatorBg:              var(--bodyBg);
    --bg:                      white;
    --text:                    black;

    --navbarTextColor:          var(--text);
    --headerBg:                 var(--bg);
    --navBg:                   #f8f8f8;

    --slideText:               whitesmoke;
    --slideBg:                 black;
    --slideStroke:             black;

    --footerTextColor:         #636e72;
    --footerBgColor:           #2d3436;

    --iconColor:               white;
    --btnHoverBg:              #e74c3c;

    --tableText:                var(--text);
    --tableBg:                  var(--bodyBg);
    --tdBorderColor:           rgba(0, 0, 0, 0.2);
    --tableStarUnchecked:      darkgray;
    --tableStarChecked:        orange;

    --messageTextErrorColor:   red;
    --messageTextSuccessColor: green;

    --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;

    --fontSizeI:                20px;
    --fontSizeSlideP:           34px;
    --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 {
    font-family:     SourceSansPro;
    font-size:       var(--fontSizeSmall);
    margin:          0px;
    min-height:      100vh;
    display:         flex;
    flex-direction:  column;
    justify-content: space-between;
    background-color: var(--bodyBg);
    color:            var(--textColor);
}

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);
    color:             var(--textColor);
}

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

main h3 {
    max-width:     80%;
    font-size:     var(--fontSizeMedium);
    margin-left:   auto;
    margin-right:  auto;
    padding:       0.5% 3%;
    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;
    color:           var(--textColor);
    padding:         1em;
    border-collapse: collapse;
    max-width:       95%;
    margin-left:     auto;
    margin-right:    auto;
}

main th {
    font-size:        var(--fontSizeSmallPlus);
    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"] {
    border:        var(--inputBorder);
    border-radius: var(--inputBorderRadius);
}

main input[type="submit"],
main button {
    color:            var(--textColor);
    font-size:        var(--fontSizeSmall);
    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);
}