@font-face 
{
    font-family: "font-site";
    src:
      local("ABeeZee-Regular"),
      url("https://easyforuse.com/fontes/ABeeZee-Regular.ttf") format("truetype");
      /* url("./static/font/Gravity-Book.otf") format("opentype"); */
      /* url("trickster-outline.woff") format("woff"); */ */
}

html
{
    border: 0;
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
}

body
{
    border: 0;
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;

    font-size: clamp(14px, 1rem, 16px); 
    font-family: 'font-site', 'system-ui', 'sans-serif'; 
    color: rgb(33, 97, 140); 
    background-color: rgb(133, 193, 233);
}

@media screen and (max-width:640px)
{
    .vss-page-body
    {
        padding: 0.50rem 0.00rem 0.50rem 0.00rem
    }
}

.container-main
{
    padding: 0;
    margin: 0;
    border: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 
        "header"
        "main"
        "footer";
}

.header
{
    color: rgb(250,250,250);
    display: flex;
    flex-wrap: nowrap;
    gap: 0.50rem;
    align-items: center;
    grid-area: header;
    padding: 0.00rem 0.50rem 0.00rem 0.50rem;
}

.header div
{
    display: flex;
}

.header>.title
{
    white-space: nowrap;
    font-size: 2rem;
}

.main
{
    grid-area: main;
    overflow: auto;
    min-height: 10rem;
    background-color: white;
    border-radius: 0.50rem;
    margin: 0.25rem;
}

.main>.title
{
    font-weight: bold;
    padding: 0.50rem 0.50rem 0.25rem 0.50rem;
}

.main .info
{
    font-size: 70%;
    text-align:right; 
    color: #808080;
    padding: 0.25rem 0.25rem 0.00rem 0.00rem;
}

.site
{
    display: block;
}

.site>div
{
    padding: 0.25rem 0.50rem 0.25rem 0.50rem;
    border-bottom: 2px solid #c0c0c0;
    display: grid;
    grid-template-columns: minmax(11em, 0.30fr) 1.00fr;
}

.site>div:nth-child(1)
{
    border-top: 2px solid #c0c0c0;
}

.site>div:nth-child(2n+1)
{
    background-color: #e0e0e0;
}

.site>div:hover
{
    background-color: rgb(174, 214, 241);
}


.site>div>.title
{
    text-align: right;
    color: #606060;
    padding-right: 0.50rem;
}

.site>div>.description
{
    text-align: left;
    flex: 0.75 0.65;
}

.footer
{
    grid-area: footer;
    padding: 0.25rem 0.25rem 0rem 0.25rem;
}

.footer .logo
{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.footer .logo>div
{
    padding: 0rem 1rem 0rem 0rem;
}

.footer .logo>div:nth-child(3)
{
    flex-grow: 1;
    text-align: right;
    padding: 0rem 0rem 0rem 0rem;
}

.footer .logo>div img
{
    border:0;
    width:88px;
    height:31px;
}

@media screen and (max-width:900px)
{
    .header>.logo>img
    {
	height: 2.75rem;
    }

    .header>.title
    {
	font-size: 150%;
    }
}

@media screen and (max-width:800px)
{

}

@media screen and (max-width:640px)
{
    .header
    {
	display: block
    }

    .header>.logo>img
    {
	height: 2.25rem;
    }

    .header>.title
    {
	font-size: 125%;
    }

    .main>.title
    {
	text-align: center;
    }

    .site>div
    {
	display: block;
    }

    .site>div>.title 
    {
	text-align: left;
	color: #606060;
	padding-right: 0.00rem;
	font-weight: bold;
    }

    .main .info
    {
	text-align:center; 
    }

    .footer .logo>div img
    {
	width:66px;
	height:23px;
    }
}