/* adapted from basic flexbox navigation https://codepen.io/jorgemb76/pen/gNZqjm
and flexbox responsive website https://coder-coder.com/build-flexbox-website-layout/
*/
/* GLOBAL STYLES */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
* {
    box-sizing: border-box;
 }
 
.navigation a {
    color :	#CFB53B; /* oldgold	#CFB53B */
   /* color: white; */
   font-weight: 300;
   letter-spacing: 2px;
   text-decoration: none;
   background: #FFFFFF;
   /*  background: #343536;  */
   /*background: rgb(238, 13, 13);*/
   padding: 20px 5px;
   display: inline-block;
   width: 100%;
   text-align: center;
   margin : 0;
}

.navigation a:hover {
    border-radius: 25px;
   background : #FFFFFF;
   color :	#AF951B; /* oldgold	#CFB53B */
   /* background : #747576; */
   /*background: rgba(238, 13, 13, 0.75);*/
}

.main {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 3em 1.5em;
}

.navigation ul {
   border: 1px solid #232526;
   /*border: 1px solid rgb(212, 20, 20);*/
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
}

.navigation li {
   flex: 3;    
}

.navigation .user {
   flex: 1;
}

@media all and (max-width: 1000px) {
   .navigation ul {
      flex-wrap: wrap;
   }
   
   .navigation li {
      flex: 1 1 50%;
   }

   .navigation .user {
      flex: 1 1 33.33%;
   }
}

@media all and (max-width: 480px) {
   .navigation li {
      flex-basis: 100%;
   }

   .navigation .user {
      flex-basis: 50%;
   }
}

*,:after,:before{box-sizing:border-box}

html
    {
        font-size:100%
    }

body
    {
        /* font-family: 'Fira Sans', sans-serif;
        font-family:Arial,Helvetica,sans-serif; */
        font-family: 'Fira Sans', sans-serif, Arial,Helvetica;
        margin: 0;
        /*font-size:1.3rem;*/
        font-size:1.3em;
        /*color:#fff*/
        padding : 0;
        /* padding:20px; */
        color: #000000;
    }

.wrapper
    {
        margin:auto;
        /*max-width:75rem*/
    }
    
.flex-container 
    {
        height: 100%;
        width: 100%;
        /*background : pink;*/
        /*margin : 40px;*/
        /*border:4px solid #EE8;*/
        /*border:40px solid pink;*/
    }



/*aside,footer,header,main,section*/
aside,header,section
    {
        display:block;
        margin:0;
        /*margin :10px;*/
        /*padding:1.25rem;*/
        padding:1.25em;
        /*border:1px solid #000;*/
        /*color:#fff*/
    }
    
.wrapper, html, body {
    height: 100%;
    margin: 0;
}
    
.wrapper
    {
        height: 100%;
        width: 100%;
        /*background : pink;*/
        /*margin : 20px;*/
        /*border:2px solid #CC6;*/
        /*border:20px solid yellow;*/
        display: flex;
        flex :1 1 auto;
        /*flex-direction: column;*/
        align-items: stretch;
        
    }

main
    {
        /*background:#000;*/
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

.header
    {
        /*background:#03a9f4*/
        /*background : #FFFFFF;*/
        /* background: #343536; */
        background: #FFFFFF;
    }

.advert
    {
        /*background:#d22b1f*/
        background : #FFFFFF;
    }

@media screen and (min-width:640px)

    {
        .flex-container
            {
                display:flex;
                align-items: stretch;
            }
    }
    
.divider {
  align-self: stretch;
  /* border-left:1px solid #0d2c4a; */
}

.content
    {
        /*flex:1;*/
        /*flex:1 70%;*/
        /* height: 100%; */
        width: 70%;
        /*width: 100%;*/
        /*width: 800px;*/
        display: flex; 
        /*background:#129a22;*/
        align-items: stretch;
        min-height: 100%;/* chrome needed it a question time , not anymore */
        flex-grow: 1;
        flex-direction: column;
    }

.sidebar
    {
        /*flex:0 1 300px;*/
        /*flex:0 1 30%;*/
        /* height: 100%; */
        width: 30%;
        /*width: 100%;*/
        /*width: 300px;*/
        display: flex; 
        /*background:#673ab7;*/
        align-items: stretch;
        min-height: 100%;/* chrome needed it a question time , not anymore */
        flex-grow: 1;
        flex-direction: column;
        background : #EEEEEE;
        border-radius: 25px;
        margin : 20px 20px 20px 20px;
    }
    

    
h2
    {
        margin: 0;
        padding: 0;
    }
    
label, .formSearchInput, .formSearchSubmit
    {
        font-weight : 900;
        /*font-size:2rem;*/
        font-size:2em;
        padding : 2px;
        margin : 2px;
        /*background : pink;*/
    }
    
    
    
.formSearchInput
    {
         /*background : blue;*/
         /*font-size:2rem;*/
         font-size:2em;
         padding : 20px;
        margin : 2px;
    }

.formSearchSubmit
    {
         /*background : green;*/
         /*font-size:2rem;*/
         font-size:2em;
         padding : 20px;
        margin : 2px;

        border:20px;

    }
    
        .formSearchSubmit:input[type=text] {
            padding:5px; 
            border:2px solid #ccc; 
            -webkit-border-radius: 5px;
            border-radius: 5px;
        }

        .formSearchSubmit:input[type=text]:focus {
            border-color:#333;
        }

        .formSearchSubmit:input[type=submit] {
            padding:50px 150px; 
        background:#ccc; 
        border:10 none;
        cursor:pointer;
        -webkit-border-radius: 25px;
         border-radius: 25px; 
        }
        
        input[type=text] {
            padding:25px; 
            border:5px solid #ccc; 
            -webkit-border-radius: 5px;
            border-radius: 5px;
             font-weight : 900;
            /*font-size:1rem;*/
            font-size:1em;
        }
    
        input[type=submit] {
            padding:10px 20px; 
        background: green; 
        color : white;
        font-weight : 900;
        /*font-size:2rem;*/
        font-size:2em;
        border:10 none;
        cursor:pointer;
        -webkit-border-radius: 25px;
         border-radius: 25px; 
        }
        
.contentHeading
    {
        
        font-weight : 900;
    }
    
    
.contentTitle {
            font-weight : 900;
        /*font-size:2rem;*/
        font-size:1.7em;
        word-spacing:1em;
}

.subContentTitle {
            font-weight : 700;
        /*font-size:1.5rem;*/
        font-size:1.5em;
        word-spacing:1em;
}


/*.contentContainer {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; 
}*/
/* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */


.contentContainer {
    
    /*
    static
relative
fixed
absolute
sticky
*/
  position: relative; 
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100% !important;
  z-index: 1;
  

  /* position: relative; */
  /* overflow: hidden; */
  /* width: 100%; */
  /* padding-top works on chrome not on safari */
  /* padding-top: 56.25%; */ /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  /*padding-top: 40%;*/
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.h2heading
    {
        display : block;
        margin-left:0px; 
        margin-right:0px; 
        word-wrap: break-word; 
        white-space : normal; 
        /* color : #4E3C02; */
        color : #9F850B;
        text-align : left; 
        font-family: 'Open Sans', 'Playfair Display', Helvetica, sans-serif, serif;
    }
.pheading
    {
        display : block; 
        margin-left:0px; 
        margin-right:0px; 
        word-wrap: break-word; 
        overflow-wrap : break-word; 
        white-space : normal; 
        text-align : left; 
        font-family: 'Playfair Display', 'Open Sans', Helvetica, sans-serif, serif;
    }
    
.psubheading
    {
        display : block; 
        margin-left:0; 
        margin-right:0; 
        word-wrap: break-word; 
        overflow-wrap : break-word; 
        white-space : normal; 
        text-align : left; 
        font-family: 'Playfair Display', 'Open Sans', Helvetica, sans-serif, serif;
    }
    
span
{
    /* background : purple; testing spans */
}
    
span.achievable 
    {
        color : #CFB53B;
        font-weight : 700;
        /* background-color: green; */
    }
span.achievable:hover
    {
        color : #AF951B;
        font-weight : 900;
    }
span.achievable:active
    {
        color : #CFB53B;
        font-weight : 900;
    }
span.unbelievable 
    {
        color : #AF951B;
        font-weight : 700;
        /* background-color: pink; */
    }
span.unbelievable:hover
    {
        color : #CFB53B;
        font-weight : 900;
    }
span.making 
    {
        color : #000000;
        font-weight : 700;
        /* background-color: blue; */
    }
span.making:hover
    {
        color : #CFB53B;
        font-weight : 900;
    }
    
/* blog article start */ 
                            .postexcerpt
                                {
                                    width : 80%;
                                    border : 2px solid #AF951B; 
                                    /*border-width
                                    border-style (required)
                                    border-color
                                    */
                                    background : white;
                                    margin : 5%;
                                    padding : 5%;
                                }
                            .postdate
                                {
                                    font-weight : 100;
                                    color : #999999;
                                }
                            .posttitle, .posttitle a, .posttitle a:hover, .posttitle a:visited
                                {
                                    color :#AF951B;
                                }
                            /*.post-content image-caption-format-1*/
                            .postcontent
                                {
                                    font-family: Helvetica, arial, sans-serif;
                                    -webkit-font-smoothing: antialiased
                                }
                            
                            .postreadmore
                                {
                                    padding : 5%;
                                }
                            .postreadmore p
                                {
                                    padding : 3%;
                                    margin : 4%;
                                }
                            
                            .postreadmorebutton
                                {
                                    border-radius: 5px 25px;
                                    background-color : #AF951B;
                                    color : white;
                                    border : 2px solid #000000;
                                    padding : 2%;
                                    margin : 2%;
                                    position: relative;
                                }
                        
/* blog article end */

/* advert */
.advert
    {
        background-color : #FFD55B;
        padding-left:2%;
        padding-right:2%; 
        padding-top:0; 
        padding-bottom:0;
        margin:1%; 
        border:1px solid #000000;
        border-radius: 5px;
        /* opacity: 0.1; #CFB53B; */
    }
    
.flex-container
    {
        /* background-color : #EEEEFF; */
        margin:0;
    }
.wrapper
    {
        /* background-color : #EEEEFF; */
        margin:0;
    }
.content
    {
        /* background-color : #EEEEEE; */
        padding:10;
    }
.contentheader
    {
        /* background-color : #CCCCCC; */
        margin-top:0; padding:0;
    }
.contentTitle
    {
        /* background-color : #DDDDDD; */
        padding:10; margin:0;
    }

/* end advert */

/* header */
.header
    {
        border-radius: 5px;
    }
/* header */



canvas {
    display: block;
}

audio{
    display: none;
}

.footer,.sidebar
    {
        /*border:1px solid #000*/
        /*background: #FFFFFF;*/
        border:1px solid #121315;
    }
    
.footer
    {
        /*background:#616161*/
        /* background: #ECECEC; */
        align-items : center;
        justify-content : center;
        text-align : center;
        /* background: #343536;
        color : #FFFFFF; */
        background: #CFB53B;
        color : #000000;
        
    }