/********************************
 * EAUGRATUITE StyleSheet "TORII"
 * 2020/05
 *
 * @author Alexis Raimbault (alxr)
 **/

/* Max values */
img,
table,
td,
blockquote,
code,
pre,
textarea,
input,
video,
svg {
  max-width: 100%;
}

* {box-sizing: border-box;}
h1 {font-size: .8em;font-style:italic;color:grey;margin-bottom: 3em;}
h2 {color: #c93023;}
a {color : #39569b;}
ul {list-style: square;}
button {cursor:pointer;}

/* classes */
.left       {float:left; margin-right : .5em;}
.right      {float:right; margin-left : .5em;}
.center     {margin : 0 auto;}
.rounded    {border-radius:20px;}
.ml         {margin:1em;}
.nodeco     {text-decoration: none;}
.txtcenter  {text-align:center;}
/*.txtjustif  {text-align: justify;word-wrap:break-word;overflow-wrap:break-word;hyphens:auto;}*/
.txtjustif  {text-align: justify}
.txtright   {text-align: right;}
.flexcol    {display:flex;flex-direction: column;}
.details    {color : #333; font-size : 0.9em;}
.atarik     {font-family: atarikids;}
.nowrap     {white-space: nowrap;}
.font-def   {font-family: sans-serif;}
.clear      {clear:both;}
.nomt       {margin-top: 0;}
.nomb       {margin-bottom: 0;}
.noti       {text-indent:0;}
.block      {display: block;}
.mbs        {margin-bottom:.8em;}
.maintitle  {font-style:normal; font-size:1.3em;color:black;}

/*** 
  burger 
*/
.nav-button {
  position : absolute;
  top: 26px;
  right: -48px;
  z-index: 1000;
  padding: 0.5rem   ;
  background : linear-gradient(to top, #fff8dc, 80%, #b1b1b1);
  outline: 0;
  border: 2px solid grey;
  border-radius : 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.nav-button:hover,
.nav-button:active {
    background : linear-gradient(to bottom, #fff8dc, 80%, #b1b1b1);    
}

.nav-button > * {
    display: inline-flex;
    vertical-align: top;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    height: 2.2rem;
    width: 2.2rem;
    padding: 0;
    background-color: transparent;
    background-image: linear-gradient(grey, grey);
    background-position: center;
    background-repeat: no-repeat;
    background-origin: content-box;
    background-size: 100% 5px;
}

.nav-button > *::before,
.nav-button > *::after {
      content: "";
      height: 5px;
      background: grey;
}

/**
 * Main frame
 */

body {
	background: snow;
	background: linear-gradient(45deg,snow 35%,rgba(234,225,175,1) 100%);
}

#main_panel {
    max-width: 40em;
    margin: 0 auto;
    font-family: 'Crimson Pro', serif;
    font-size: 23px;
}



/* quote */
.quote-author {
    position: relative;
    left : 35%;
    font-size: .7em;
}

/* hr */
hr {
  border: .5em solid transparent; 
}

hr::before {
  content : "~~";
  padding-left: 48%;
  
}

#footer_panel {
    display : flex;
    justify-content: space-between;
    padding : 2em;
    color : grey;
    font-size: .9em;
    max-width: 40em;
    margin : 0 auto;
}
.page-name {
    font-style: italic;
}

.footnav a {
    font-weight : bold;
    text-decoration: none;
    color : grey;
}

.page.active {
    color : grey;
    text-decoration: none;
    cursor : default;
}

/** 
sommaire
*/
.sommaire li > div {
    display : flex;
}

.sommaire strong {
    width : 8.5em;
    flex-shrink : 0;
}

.sommaire span {
    text-indent : -.4em;
}

/**
* Wide screen
*/
@media (min-width: 591px) {

    .nav-button {
        display : none;
    }
    
    #navigation {
        text-align: center;
        font-size: .9em;
        font-style: italic;
        margin: 1em 0 4em 0;
    }
    
    #navigation a {
        margin : 0 1em;
    }
    
    /* Paragraphe */
    #main_panel p:not(.txtcenter) {
        text-indent: 5em;
    }

}




/**
 small screen 
 */
@media (max-width: 590px) {
   
    #navigation {
        display : flex;
        flex-direction: column;
    }
    
    .nav-button {
        position : absolute;
        top : 5px;
        right: 10px
    }
    
    #navigation a {
        height : 4.2rem;
        padding : 1.4rem 0 0 .5rem;
        border-bottom: 1px solid grey;
    }
    
    #navigation a:not(.active) {
        display: none;
    }
    
    #navigation a:not(.page):hover,
    #navigation a:not(.page):active {
        background : gainsboro;
    }
    
    /* Paragraphe */
    #main_panel p {
        text-indent: 1em;
        hyphens: auto;
        padding: 0 5px;
    }

}