html,body {
    padding:0;
    margin:0;
    font-family: Arial, Helvetica, sans-serif;
    text-align: justify;
    -webkit-font-smoothing: antialiased;
    color:black;
    background-color: white;
    line-height: 1.5;
}


.visible {
    display:block;
}

header {
    position: sticky;
    top:0;
    position:-webkit-sticky;
    user-select: none;
    background-color: #a66a22dd;    
    padding-top:20px;
    padding-bottom: 20px;    
    font-weight: bold;
    
    z-index: 2;
}

header .controller {
    display:block;
}

header .contents {
    display:flex;    
    justify-content: space-around;
}

header .contents div a {
    color:bisque;
}

header .contents div   a:hover{
    color:white;
}

header .contents div {
    display:none;
}

header .contents .visible {
    display: block;
}

p {
    text-indent: 24px;
}

.citation {
    color:#777;
    display:block;
    margin-left:10%;
    margin-right:10%;
    padding:16px;
    border:1px solid #777;
}

.citation div {
    padding:16px;
    border:1px solid #777;
}

.citation p {
    font-size: 24px;
}

.content {        
    padding:10%;          
    padding-top:5%;
    background-color: white ;       
}

a {
    width:100%;
    display:block;
    text-align: center;
    text-decoration: none;
    color:white;    
}

.content-holder .content:nth-of-type(odd) {
    background-color: #f0f0f0 ;
}

button {
    display:block;
    border:0;
    border-radius: 20px;
    line-height: 2;
    padding-left: 20px;
    padding-right: 20px;
    color:white;
    font-size: 24px;
    margin-top: 24px;
    user-select: none;
    margin-bottom: 24px;
    margin-left: auto;
        margin-right:auto;
    background-color: #955f1e;
}

button:hover {
    background-color: #d58b30;
}


footer {
    padding-top:20px;
    padding-bottom: 20px;
    background-color: #222;
    color:#999;
    text-align: center;
}

.cover {    
    height: auto;
    width:100%;
    top:0;          
    margin-left:5%;
    box-shadow: 0px 0px 5px black;   
}

.cover-small {
    display:none;    
}

.cover-big {
    height:max-content;
    
}


.prices p {    
    padding-right: 50%;
    text-align: right;
}

.prices h2 {
    margin:0;
    display:block;
    width:33%;
}

.price{
    display:flex;    
    justify-content: space-around;    
}

.price b {
    display: block;
}

.price div {
    margin-top:24px;
        margin-bottom: 24px;
    width:30%;
    text-align: center;
    font-size: 26px;
}

.price .desc {
    width:40%;
    color:#777
}


.cover-big table td {    
    padding-left:5%;
    padding-right:5%;
}

td p {
    text-indent: 0;
}

.cover-big h3 {   
    text-align: center;
    margin-top:auto;
    margin-bottom: auto;
    font-size: 36px;
    text-align: left;
}

.info div {
    flex-basis:40%;
}

.start li {
    min-height: 36px;
    text-indent: 48px;
    background-image: url('img/checkmark.png');  
    list-style: none;  
    background-size: 36px 36px;
    background-repeat: no-repeat;
}

h1 {
    margin:0;
    font-size: 28px;    
    display:block;
    text-align: center;
    width:80%;
    margin-left: auto;
    margin-right:auto;
    padding:16px;             
}


.bio {
    margin-top:auto;
    margin-bottom: auto;
    width:100%;
    height: fit-content;
}

.bio td {
    vertical-align: top;
}

.short-bio {
    text-align: center;
    margin-bottom: 36px;
    color:#777
}

.short-bio::after {
    width:10%;
    margin-top:16px;
    margin-left: 45%;
    content:'';
    display:block;
    border-top: 2px solid black;
}


.comments img {
    border-radius: 20px;
    margin:24px;
}

.comments .images {
    display:flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}


.comments .images img {
    width:90%;
    height:auto;
    
    display:block;
}

@media only screen and (min-width:768px) {
    header .contents{        
        display:flex;              
    }   

    header .contents {
        display:flex;
        justify-content: space-around;
    }
    
    .comments .images img {
        width:40%;
        height:auto;
        display:block;
    }
}

@media only screen and (max-width:1020px) {
    .cover-big {
        display:none;
    }
    .cover-small {
        display:block;
    }
    .cover-small h3 {
        text-align: center;
        font-size: 24px;
        width:70%;
        margin-left:auto;
        margin-right:auto;
    }
   
    .cover {
        float:none;
        display:block;        
        width:80%;
        height:auto;
        margin-left:auto;
        margin-right:auto;
    }
   
    .info div {
        flex-basis: 80%;
    }

    .price {
        display: block;
    }
    .price div {         
        text-align: left;                     
        width:100%
    }
    .price  .cost{
        text-align: right;
    }    
    .price .desc {   
        text-align: center;     
        width:100%;
    }

}

@media only screen and (max-width:600px) {
    
    .citation div {
        font-size: 12px;
    }

    .citation p {
        font-size:14px;
    }

    button {
        font-size: 18px;
    }
        

}

@media only screen and (max-width:768px)  {       
    header .controller {
        display:block;
    }    
    header .contents  {
        flex-direction: column;
    }
    header .contents .visible {
        display:block;
    }
    header a{
        margin-top:24px;
        
    }    
    header span {
        margin-left:auto;
        margin-right:5%;
        width:24px;
        min-height:4px;
        display:block;
        background-color: white; 
        margin-bottom: 4px;
        border-radius: 2px;
        border:none
    }
    .citation {
        margin-left:0;
        margin-right:0;
    }    
}