body {
   max-width: 948px;
   margin-left: auto;
   margin-right: auto;
   margin-top: 0;
   padding-top: 0;
   background: #dddddd;
   font-family: Blinker, Arial, Verdana, sans-serif;
   font-size: 22px;
}

/*
@font-face {
  font-family: "Mouse Memoirs";
  src: url("fonts/MouseMemoirs-Regular.ttf");
  font-display: block;
}

@font-face {
  font-family: "Blinker";
  src: url("fonts/Blinker-Regular.ttf");
}

@font-face {
  font-family: "Blinker";
  src: url("fonts/Blinker-SemiBold.ttf");
  font-weight: bold;
}
*/


h1 {
   color: steelblue;
   font-size: 65px;
   font-weight: normal;
   margin-top: 20px;
   margin-bottom: 0;
   padding-bottom: 0;
   font-family: "Mouse Memoirs", Arial, Verdana, sans-serif;
   text-align: center;
}


h2 {
   background: steelblue;
   color: #ffffff;
   font-size: 28px;
   text-align: center;
   font-weight: bold;
   font-family: "Blinker";
   margin-top: 0;
   margin-bottom: 0;
}

h3 {
   color: inherit;
   font-size: inherit;
   font-weight: bold;
   margin-top: 0;
   margin-bottom: 0;
   font-family: "Blinker";
   display: inline-block;
}

#title-image {
   display: inline-block;
   text-align: center;
}

hr {
   background: #222222;
   color: black;
   height: 5px;
}

blockquote {
   color: red;
}

.affiliate {
   font-size: 14px;
   font-family: verdana, arial, sans-serif;
   color: red;
   letter-spacing: 1.5px;
   position: relative;
   top: -2px;
}

.pics {
   border: 8px solid RGB(214,174,124);
   border-radius: 18px;
   box-sizing: border-box;
   width: 348px;
   height: auto;
   margin-left: 20px;
}

#video {
   margin-top: 10px;
   width: 550px;
   height: 310px;
}

li {
   margin-bottom: 2px;
}

ul li {
   margin-bottom: 0px;
}

ol {
   margin-top: 0;
   margin-bottom: 0;
}
   

.spaces {
   margin-bottom: 16px;
}

header {
   background: white;
   background-image: url("images/logo-desktop.png");
   background-repeat: no-repeat;
   margin-top: 0;
   width: 100%;
   height: 100px;
   border-left: 5px solid #444;
   border-right: 5px solid #444;
   border-bottom: 5px solid #444;
   box-sizing: border-box;
}

.column1 {
   float: left;
}

.column2 {
   float: right;
}

.title1 {
   width: 580px;
   padding: 5px;
   margin-bottom: 0;
   background: steelblue;
   color: #ffffff;
   text-align: center;
   box-sizing: border-box;
   border-top-left-radius: 18px;
   border-top-right-radius: 18px;
}

.section1 {
   width: 580px;
   padding-top: 10px;
   padding-bottom: 10px;
   padding-left: 18px;
   padding-right: 25px;
   margin-bottom: 20px;
   background: white;
   font-size: 22px;
   color: black;
   border-left: 8px solid steelblue;
   border-right: 8px solid steelblue;
   border-bottom: 8px solid steelblue;
   box-sizing: border-box;
   text-align: justify;
   border-bottom-left-radius: 18px;
   border-bottom-right-radius: 18px;
}

.title2 {
   width: 348px;
   margin-left: 20px;
   margin-bottom: 0;
   padding: 5px;
   background: steelblue;
   color: #ffffff;
   text-align: center;
   box-sizing: border-box;
   border-top-left-radius: 18px;
   border-top-right-radius: 18px;
}

.section2 {
   width: 348px;
   margin-left: 20px;
   margin-bottom: 20px;
   padding-top: 10px;
   padding-bottom: 10px;
   padding-left: 18px;
   padding-right: 25px;
   background: white;
   font-size: 22px;
   color: black;
   border-left: 8px solid steelblue;
   border-right: 8px solid steelblue;
   border-bottom: 8px solid steelblue;
   box-sizing: border-box;
   text-align: justify;
   border-bottom-left-radius: 18px;
   border-bottom-right-radius: 18px;
}

.clear {
   clear: both;
}

footer {
   text-align: center;
   padding: 10px;
   background: white;
   border-left: 5px solid #444;
   border-right: 5px solid #444;
   border-bottom: 5px solid #444;
   border-top: 5px solid #444;
}

.copyright {
   text-align: center; 
   font-weight: bold; 
   padding: 5px;
   color: black;
}

a {
   background: transparent;
   color: blue;
   padding-left: 9px;
   padding-right: 9px;
   padding-bottom: 1px;
   padding-top: 1px;
   border: 4px solid transparent;
   text-decoration: none;
   font-size: 21px;
   font-weight: bold;
   white-space: nowrap;
   border-radius: 18px;
}

a:hover {
   background: blue;
   border: 4px solid transparent;
   color: white;
}



@media only screen and (max-width:1050px){
     body { 
        max-width: 100%;
		    margin-left: 0;
		    margin-right: 0;
		    padding-left: 0;
    		padding-right: 0;
    }
    #video {
        width: 98%;
        height: auto;
    }
    .column1 {
        float: left;
      		width: 58%;
    }
    .column2 {
        float: right;
		      width: 40%;
    }
    header {
       background-image: url("images/logo.png");
       background-repeat: no-repeat;
       background-size: contain;
       border-left: 0;
       border-right: 0;
       height: 95px;
       width: 100%;
    }
    .hide {
        display: none;
    }
    .copyright {
        width: 90%;
    }
    .title1 {
        margin-right: 0;
        width: 100%;
        box-sizing: border-box;
	      	float: left;
        font-size: 21px;
    }
    .section1 {
        font-size: 13px;
        margin-right: 0;
        width: 100%;
	      	float: left;
        box-sizing: border-box;
        font-size: 20px;
    }
    .title2 {
        margin-right: 0;
        width: 100%;
		      float: right;
        box-sizing: border-box;
        font-size: 21px;
    }
    .section2 {
        font-size: 13px;
        margin-right: 0;
        width: 100%;
		      float: right;
        box-sizing: border-box;
        font-size: 20px;
    }
    h1 {
	       border: 0;
        font-size: 49px;
        margin-top: 20px;
	       margin-bottom: 20px;
		      margin-left: 0;
	      	padding-left: 20px;
	       width: 95%;
    }
    a {
        font-size: 20px;
    }
}

@media only screen and (max-width:600px){

    #title-image {
       display: none;
    }

    body { 
       width: 100%;
		     margin-left: 0;
		     margin-right: 0;
		     padding-left: 0;
		     padding-right: 0;
    }
    header {
        background-image: url("images/mobile.png");
        background-repeat: no-repeat;
        background-size: contain;
        border-bottom: 0;
        border-left: 0;
        border-right: 0;
        height: 50px;
        margin-left: 0;
        margin-right: 0;
        width: device-width;
		      box-sizing: border-box;
    }
    .column1 {
        float: none;
	      	margin-right: 0;
        width: 100%;
    }
    .column2 {
        float: none;
		      margin-right: 0;
        width: 100%;
    }
    .title1 {
        font-size: 21px;
        margin-left: 0;
        margin-right: 0;
        width: device-width;
        font-weight: bold;
    }
    .section1 {
	       font-size: 19px;
        margin-left: 0;
        margin-right: 0;
        width: device-width;
    }
    .title2 {
        font-size: 21px;
        margin-left: 0;
        margin-right: 0;
        width: device-width;
        font-weight: bold;
    }
    .section2 {
	       font-size: 19px;
        margin-left: 0;
        margin-right: 0;
        width: device-width;
    }
    #video {
        width: 98%;
        height: auto;
    }
    footer {
   	    border: none;
        margin-left: 0;
        margin-right: 0;
        width: device-width;
		      box-sizing: border-box;
    }
    h1 {
	    border: none;
     font-size: 38px;
		   margin-left: 0;
	    margin-bottom: 20px;
	   	padding-left: 20px;
     white-space: normal;
     width: device-width;
     display: block;
    }
    h2 {
       font-size: inherit;
    }
    h3 {
       font-size: 20px;
       font-weight: bold;
    }
    .copyright {
       width: device-width;
	     	text-align: center;
	     	margin-left: 0;
		     margin-right: 0;
    }
    .hide {
       display: block;
       margin-left: 0;
    }
    .me {
       width: 98%;
       height: auto;
    }
    .pics {
       width: 100%;
       height: auto;
       margin-left: 0;
    }
}
