:root
{
   --menu-height:35px; 
   --bc-color:white;
   --overlay-background:rgba(250,250,250,0.9);
}
body
{
    display:flex;
    flex-direction: row;
    width:100%;
    height:100%;
    
    line-height:2rem;
}
h1, h2, h3, h4, h5, h6, .heading
{
    font-family: Merriweather Sans, calibri, sans-serif;
}
.side_box
{
    display:none;
}
div.debug
{
	border: 1px dotted gray;
	box-sizing:border-box;
}
div[name="container"]
{
	height:100%;
	width:100%;
        overflow-y:auto;
        position:absolute;
}
div[name="menu_box"]
{
    height:var(--menu-height);
    width:100%;
    position:sticky;
    top:0px;
    background-color:var(--bc-color);
    z-index:2;
}
div.menu
{
    
}
div.menu > div
{
    display:inline-block;
    padding:0 10 0 10;
    font-size:110%;
    border-style: content-box;
    &.active
    {
        border-bottom:2px solid gray;
    }
}
div[name="content_box"]
{
    position:absolute;
    width:100%;
    top:0;
    bottom:0px;
    overflow-y:auto;
	
}
div[name="image_box"]
{
    display:none;
	height:200px;
	width:100%;
}
div[name="image_box"]::after
{
	content:"Třeba nějaký úvodní obrázek";
	color:lightgray;
}


div[name="content_box"] > div
{
	width:100%;	
}

.all_container
{
    /*list-box-css <*/
	flex-grow:1;
	position:relative;
	bottom:0px;
}

smallcaps
{
	font-variant: small-caps;
        
}
.sticky_box_top
{
    position:sticky;
    top:0px;
}

.panels-container
{
    width:100%;
    position:relative;
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
.h-section
{
    padding:50 0 50 0;
}
.text-section
{
    max-width:1200px;
    margin:auto;
}
.list-section
{
    padding-left:50px;
}
.panel
{
    width:500px;
    height:500px;
    margin:50px;
    position:relative;
    

}


a
{
    color:gray;
    
    &:hover
    {
        color:black;
        border-bottom-color:black;
    }
    
    &:has(.panel)
    {
        text-decoration:none;
        color:black;
    }
}
.menu a
{
    text-decoration:none;
    font-weight: bold;
    &:hover
    {
        border-bottom:none;
    }
}

.footer
{
    
}
.header
{
    width:100%;
    height:300px;
    display:flex;
    flex-direction: column;
    justify-content: center;
    & div
    {
        padding:10px;
        padding-left:40px;
    }
    & div:nth-of-type(1)
    {
        font-size:300%;
    }
    & div:nth-of-type(2)
    {
        font-size:200%;
    }
    & div:nth-of-type(3)
    {
        font-size:150%;
    }
}

.main-text
{
    background:white;
    padding:30px;
}

.panel .overlay
{
    position:absolute;
    background:var(--overlay-background);
    height:40%;
    transition:height .5s;
    width:100%;
    bottom:0px;
    overflow:hidden;
    
    & div
    {
        padding:20 20 0 20;
    }
    & div:first-of-type
    {
        font-size:150%;
    }
    & div:nth-child(2)
    {
        font-size:300%;
    }
    & div:nth-child(3)
    {
        opacity:0;
        line-height: 2rem;
        transition:opacity 1s;
    }
}
.panel:hover 
{   & .overlay
    {
        height:80%;
        transition:height .5s;
        
        & div:nth-child(3)
        {
            display:block;
            opacity:1;
            transition:opacity 1.5s;

        }
            
    }
}



/*
BACKGROUNDS
*/
.main_bg_col
{
    background-color:var(--main-bg-color,white);
}
.wb
{
    background-color:white;
}