body{
    background-color: rgb(233,233,233);
    font-family: Helvetica, sans-serif;
    font-size: 1.25em;
    color: #333;
}
h1{
    text-align: center;
    font-size: .9;
}

div.container{
 
    width: 100%;
    max-width: 1200px;
    margin: auto;
    padding: 0px;
}  
div.header{
    display: block;
    float: none;
    width: 100%;
    box-shadow: 5px 10px 18px #888888;
}

div.main{
    margin-top: 10px;
    padding: 40px 40px;
    background-color: white;
    box-shadow: 5px 10px 18px #888888;
}
blockquote {
    display: block;
    margin-top: 3em;
    margin-bottom: 1em;
    margin-left: 40px;
    margin-right: 40px;

}
ul{
    list-style: circle;
}
/*quote*/
p.quote{
    font-style: italic;
    font-family: serif;
}

p.cite{
    color: rgb(27,31,173);
    font-family: serif;
}

/* footer design */
div.footer{
    margin: 10px 0px 20px 0px;
    display: block;
    background-color: rgb(27,31,173);
    float: none;
    width: 100%;
    box-shadow: 5px 10px 18px #888888;
    padding: 5px 0px 5px 0px;
    text-align: center;
}


/* added */
.topnav {
    background-color: rgb(27,31,173);
    overflow: hidden;
    margin-top: 10px;
    box-shadow: 5px 10px 18px #888888;
}


/* Change the color of links on hover */
.topnav a:hover {
    background-color: white;
    color: rgb(27,31,173);
    transition-duration: .5s;
}

/* Add an active class to highlight the current page */
.active {
    background-color: #333 ;
    color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}

/*media Querys*/
@media screen and (max-width: 768px) {
    img.header-title-desktop{
        height: auto;
        width: 100%;
        display: none;
    }
    img.header-title-mobile{
        height: auto;
        width: 100%;
    }
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
  
  /* The "responsive" class is added to the topnav with JavaScript 
  when the user clicks on the icon. This class makes the topnav look 
  good on small screens (display the links vertically instead of horizontally) */
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: center;
    }
    
/* Style the links inside the navigation bar 1 of 3*/
    .topnav a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 30px 50px 30px 50px;
    text-decoration: none;
    font-family: Helvetica, sans-serif;
    font-weight: bold;
    }
    
    a.footer, p.footer{
        display: block;
        float: none;
        margin: 10px 0px 10px 0px;
        width: 100%;
        color: white;
        text-align: center;
        text-decoration: none;
        
    }

    /*profile picture*/
    div.responsive-block-mobile{
        display: block;
        float: left;
        width: 100%;
        text-align: center;
        padding-bottom: 20px;
    }
    div.responsive-block-desktop{
        display: none;
    }
    img.profile-image-responsive{
        display: block;
        float: none;
        margin: auto;
        padding: 10px;
        width: 75%;
        max-width: 300px;
        min-width:150px; 
        box-shadow: 5px 10px 18px #888888;
    }
    div.responsive-panel-2{
        display: block;
        width: 100%;
        vertical-align: top;
        text-align: center;
        padding: 0px;

    }
    /*affiliate link design*/
    div.footer-affiliate > img{
        display:inline-block;
        width: 40%;
        margin-left: 4%;
        height: auto;
        padding: 0px;
        float: none;
        text-align: center;
}


}

@media screen and (min-width: 769px) {
    img.header-title-desktop{
        height: auto;
        width: 100%;
    }
    img.header-title-mobile{
        display: none;
        height: auto;
        width: 100%;
    }
    .topnav a {
        float: left;
        display: block;
        width: calc(100%/6);
        color: #f2f2f2;
        text-align: center;
        padding: 30px 0px 30px 0px;
    }
    
/* Style the links inside the navigation bar  3 of 3*/
    .topnav a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    text-decoration: none;
    font-family: Helvetica, sans-serif;
    font-weight: bold;
    }

    a.footer, p.footer{
    display: inline-block;
    margin: 5px 0px 5px 0px;
    width: 30%;
    color: white;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
}

    /*profile picture*/
    div.responsive-block-desktop{
        top: 0px;
        vertical-align: top;
        display: inline-block;
        width: calc(30% - 40px);
        min-width: 150px;
        text-align: center;
        padding-bottom: 20px;
    }
    div.responsive-block-mobile{
        display: none;
    }
    img.profile-image-responsive{
        display: inline-block;
        margin: auto;
        padding: 10px;
        width: 100%;
        max-width: 300px;
        min-width:150px; 
        box-shadow: 5px 10px 18px #888888;

    }
    div.description-responsive{
        display: inline-block;
        width: calc(70% - 40px);
    }
    div.responsive-panel-2{
        display: inline-block;
        vertical-align: top;
        text-align: center;
        width: calc(50% - 20px);

    }
        /*affiliate link design*/
        div.footer-affiliate > img{
            display:inline-block;
            width: 20%;
            margin-left: 20%;
            height: auto;
            padding: 0px;
            float: none;
            text-align: center;
    }

}