/* H E A D E R */
#myheader{/*this is the general header's div background box format*/
/*  background-size: 100px;
  background-position: 10px 100%;*/
/*  padding-left: 120px;*/
  max-width: 1120px;
  margin: auto;
 /* flex behaviour for dispalying craftymutt pic next to the title stuff */
 display: flex;
 flex-flow: row nowrap;
 gap: 10px;
}

.linkhome
{
    width: 110px;
    height: auto;
    float: left;
/* info on where the craftypic should go */
  background-size: 100px;
background-position: 10px 100%;
  background-repeat: no-repeat;
}


.titlespace
{
  padding-top: 10px;
  padding-bottom: 10px;
  flex-grow: 1;
}

#myheader h1 {
  background: none;
  text-align: left;
  font-size: 46px;
  margin-bottom: 10px;
}

/*#myheader p {
  text-align: left;
  font-size: 16px;
}

/* B O D Y */

.widthlimit{
  max-width: 1120px;
  margin: auto;
}

.mybody{
  background-color: var(--mywhite);
  margin: 20px 20px 20px 120px;
  padding: 35px;
  max-width: 1000px;
  border-radius: 16px;
}

/* F O O T E R formatted to follow the subpage body section */
.footer{
  margin: 15px 20px 0 120px;
  max-width: 1000px;
}





                /* mobile formatting section */
                @media screen and (max-width: 681px){ /*with just making the screen wider and narrower, there will be a horizontal scroll bar appear if it's not about 20px wider cutoff than my header width*/
                  
                  .pconly{
                    display: none;
                  }
                  .mobileonly{
                    display: block;
                  }
                  
                  /*#myheader{/*this is the general header's div background box format*/
                  /*background-size: 17%;     /*was 100px*/
                  /*padding-top: 1%;          /*was 15px*/
                  /*padding-bottom: 2%;       /*was 15px*/
                  /*padding-left: 22%;        /*was 120px*/
                /*}*/
                .linkhome
                {
                    width: 16vw;
                    flex-basis: 16vw;
                    background-size: 100%;     /*was 100px*/
                    background-position: 5% 100%; /* was 10px 100% */
                }

                
                  #myheader h1 {
                  font-size: 12vw;           /*was 46px*/
                  margin-bottom: 5%;       /*was 10px*/
                }

/*                  #myheader p {
/*                    font-size: 3vw;           /*was 16px*/
/*                  }
                  
                  /*h1{
                    font-size: 22px;
                    padding: 8px;
                    border-radius: 40px;
                  }*/
                                    
                  .mybody{
                    margin: 0;
                    padding: 20px;
                    border-radius: 0;
                  }
                  
                  .footer{
                    margin: 15px 5% 0 5%;
                    max-width: 1000px;
                  }

                  
                }/* this is the end of the narrow screen version of the header*/