@import url('https://fonts.googleapis.com/css2?family=Cormorant&family=Montserrat&display=swap');
:root{
    /* FONT FAMILYS */
    --main_font:'Montserrat', sans-serif;
    /* --footer_font:'Cormorant', serif; */
    --footer_font:Helvetica, Arial, sans-serif;
    
    /* COLORS */
    --bg_col:hsl(36, 33%, 88%);
    /* --accent_col:hsl(36, 45%, 94%); */
    --accent_col:#ebe3d7;
    --side_panel_col:hsl(203, 43%, 38%);
    --side_panel_text_col:white;
    --header_col:hsl(198, 54%, 44%);
    --selected_menu_col:hsl(203, 54%, 31%);
    --main_text_col:hsl(0, 0%, 16%);
    
}
html{
    font-size:14px;
}
body{
    margin:0;
    background-color:var(--bg_col);
    color:var(--main_text_col);
    font-family: var(--main_font);
}
#container{
    display:grid;
    box-sizing:border-box;
    margin:0 auto;
    grid-template-columns: 26ch 1fr;
    gap:0;
    justify-content:center;
    background:white;
    max-width:956px;
}
aside{
    background-color: var(--side_panel_col);
    color:var(--side_panel_text_col);
    padding:1rem;
    border-inline:0.5em solid var(--selected_menu_col);
    min-height:100vh;
    min-height:100svh;
}
.logo{
    padding:2rem;
    position:relative;
    z-index:1;
}
.logo h1{
    position:relative;
    color:var(--side_panel_text_col);
    text-align:center;
    text-transform: uppercase;
    text-shadow:0.1em 0.1em 4px black;
    font-weight:900;
    font-size:1.8rem;
    margin:0;
}
nav{
    display:grid;
    grid-template-columns: 1fr;
    text-align:right;
    align-items:center;
    gap:0;
    margin:1em 0;
}
nav a{
    color:var(--side_panel_text_col);
    font-size: 0.8rem;
    text-decoration:none;
    font-weight:500;
    padding: 0.8em;
}
nav a+a{
    border-top:2px solid var(--selected_menu_col)
}
footer{
    display:flex;
    justify-content:space-around;
    padding:1px 10%;
    background:black;
    color:white;
    position: fixed;
    bottom:0;
    left:0; right:0;
    font-family:var(--footer_font);
    font-size:14px;
    font-variant:small-caps;
    font-weight:400;
}
#maincontent{
    margin:5rem 1rem 5rem;
    padding:1rem 0.5rem 3rem;
    border-block:0.5rem solid var(--accent_col);
    display:block;
}
@media (max-width: 600px){
    html{
        font-size:12px;
    }
    .logo{
        padding:0.5rem;
    }
    .logo h1{
        font-size:1.2rem;
    }
    aside{
        min-height:100px; 
        padding:0.2rem;
    }
    nav{
        display:flex;
        text-align:center;
    }
    nav a{
        padding:0.2em;
    }
    nav a+a{
        border-top:none;
        border-left:2px solid var(--selected_menu_col);
    }
    #container{
        grid-template-columns: 1fr;
    }
    #maincontent{
        padding:0.5rem;
        margin:0.5rem;   
    }
    footer{
        flex-flow:column;
    }
    footer .footerspacer{
        display:none;
    }
}
#maincontent img{
    max-width:100%;
}
h1, h2, h3, h4{
    color:var(--header_col);
}
h3{
  text-transform:uppercase;      
}
a{ 
    text-decoration:none;
    color:var(--header_col);
}
.inset_right_pic{
    float:right;
    margin: 0 0 0.4em 0.6em;
    border:3px solid var(--accent_col);
    padding:2px;
    border-radius:8px;
}
p {
    text-align:justify;
}
nav a:hover, nav a:focus, .currentpage{
    background:var(--selected_menu_col);
}
.currentpage{
    font-weight:900;
}
footer p{
    margin:5px 1em;
    text-align:center;
}
.logo::before{
    content:'';
    position:absolute;
    background-image:url('../images/ogimage.png');
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    inset:0;
    opacity:0.5;
}
.testimonials{
    font-size: 0.8rem;
    line-height: 1.5;
}
.quote{
    margin-bottom:0;
}
.quote::before{
    content:'\002A  \201C';
}
.quote::after{
    content:'\201D';
}
.author{
    color:var(--header_col);
    font-weight:600;
    margin-top:0.2em;
}
.author::before{
    content:'\007E  ';
}
article + article::before{
    content:'';
    display:block;
    height:2px;
    margin:2em 0 2em;
    background:var(--accent_col);
    opacity:0.8;

}
.disclaimer{
    font-size:0.8em;
}