@import url('https://fonts.googleapis.com/css2?family=Merriweather&display=swap');

    html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
	html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
	html{overflow-x:hidden}
	hr {border:0; border-top:1px solid #9D8757;}

	body {
		font-family: 'Merriweather', serif;
		font-size: 1em;
		color: rgb(190, 190, 190);
		background:#0F0F0F url(/images/bg5.jpg) top left repeat-x;
        margin:0px;
		}

        h1 {
		font-family: 'Cinzel', serif;
		text-transform: uppercase;
		font-size: 1.8em;
		font-weight: 700;
		margin: 0px; padding: .2em 0px 0px;
		color: #d6d6d6;
		}
    
    .book_title {font-size: 4em;}

    .header     {background-color:#375783;border-bottom: 1px solid #9D8757;height:55px;}
	.footer     {background-color:#375783;border-bottom: 1px solid #9D8757;border-top: 1px solid #9D8757; padding:20px;}

    .center     {text-align:center;}
    .left       {text-align:left;}

	font.dec    {font-family: 'Cinzel Decorative', 'Cinzel', serif;}
	font.caption{font-size: .9em;}

	a			{color: #c8b388;}
	a:hover 	{color: #827048;}

	#email {height:30px;width:302px;margin-bottom:15px;}

    .mockup {max-width: 500px;}

    /* Header & Footer */
    .header, .footer {
    text-align: center;
    }

    .header a {text-decoration:none; color: #ffffff; font-size:1.2em;}
    .header a:hover {color: #c8b388;}

    /* GRID LAYOUT */
    .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    max-width: 1000px;
    margin: 0 auto;
    margin-top:20px;
    margin-bottom: 30px;
    background: url(/images/AHB_logo3.png) center 10px no-repeat;
    }

    /* Box styles */
    .box    {padding: .4rem;}

    .span-columns-4 {
        grid-column: 1 / -1; /* tells this element to stretch across all columns */
    }

    .span-columns-3 {
        grid-column: 2 / 4; /* tells this element to stretch across all columns */
    }

    .button{
        background-color: #827048 !important;
        color:#ffffff; 
        border-radius: 5px; 
        padding:10px 15px; 
        border: 1px solid #ffffff; }

	.button:hover {
        background-color: #ffffff !important;
        color: #827048 !important;}

    a.button {text-decoration: none; font-size: 1.2em;}

    /* Mobile adjustments */
    @media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
    }

    .box {
        width: 95%;
        margin: 0 auto;
        grid-column: 1/ -1;
        text-align:center;
    }

    .left {text-align:center;}
    .mockup {max-width: 400px;}
   
    }