html 
{
	scroll-behavior: smooth;
}
body
{
    margin: 0;
}
#content-body
{
    display: grid;
    grid-template-areas:
    ".            navigation" 
    ".            search"
    "sec-heading  content"
    ".            content";
    grid-template-columns: 3fr 16fr;
    grid-template-rows: repeat(2, min-content) 1fr;
    grid-row-gap: 40px;
    grid-column-gap: 20px; 
    margin: 60px 50px 85px 50px;
    z-index: -2;
}
#content-body-centered
{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-row-gap: 40px;
    grid-column-gap: 20px; 
    margin: 100px 500px 100px 500px;
    z-index: -2;
}

.form-grid
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 5px;
    /*margin: 20px 0 0 0;*/
}
#header
{
    background-color: grey;
    text-align: center;
}
#content-grid-tiles
{
    display: grid;
    /**grid-template-columns: repeat(5, 1fr);**/
    grid-template-columns: repeat(auto-fit, 300px);
    grid-auto-rows: 300px;
    justify-items: center;
    grid-row-gap: 20px;
    grid-column-gap: 20px;
}
#content-grid-split
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    grid-row-gap: 20px;
}
#content-grid-triple
{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    grid-row-gap: 40px;
    margin: 100px 350px;
}

input[type="text"], input[type="password"], select
{
    width: 100%;
    border-image-source: linear-gradient(90deg, rgb(204, 204, 204),rgb(204, 204, 204)); 
    border-width: 2px;
    border-image-slice: 1;
}

@media only screen and (max-width: 1700px) and (min-width: 1401px) 
{
    #content-body-centered
    {
        margin: 100px 150px;
    }

    #content-grid-triple
    {
        margin: 100px 250px;
    }
}
@media only screen and (max-width: 1400px) 
{
    #content-body-centered
    {
        margin: 100px 150px;
    }

    #content-grid-triple
    {
        margin: 100px 150px;
    }
}
 @media (hover: none) 
/*@media only screen and (max-width: 1000px) */
{
    #content-body
    {
        grid-template-areas:
        "navigation" 
        "search"
        "sec-heading"
        "content";
        grid-template-columns: 1fr;
        margin: 25px;
    }
    #content-body-centered
    {
        grid-template-columns: 1fr;
        grid-row-gap: 20px;
        margin: 50px 25px;
    }
    #content-grid-triple
    {
        grid-template-columns: 1fr;
        grid-row-gap: 20px;
        margin: 25px;
    }
}