:root
{
    --mainColor: #30a2dc;
    --softColor: #8cc7e5;
    --softAccent: #bdbdbd;
    --accentColor: #697076;
    --darkAccent: #22262c;
    --pagemax: 100%;
}
#content
{
    width: 100%;
}
#about
{
    position: relative;
    left: 2%;
    width: 90%;
    height: calc(100% - calc(55px + 100px + max(150px, min(20vw, 300px))));
    max-width: var(--pagemax);
    display: grid;
    grid-template-columns: repeat(auto-fill, calc(50%));
    align-items:normal;
}
.mentheboys
{
    width: 604px; 
    white-space: nowrap; 
}
.insurance
{
    text-align: center;
    align-items: start;
    grid-column: 1 / span 2;
    white-space: nowrap;
}
.insurance p
{
    background-color: #ffffffc6;
}
.goodboys
{
    align-self: end;
    grid-column: 2;
    grid-row: 2;
    top: 0px;
    position: relative;
    width: 600px;
    height: fit-content;
    max-height: fit-content;
    min-height: fit-content;
}
@media (max-width: 1200px)
{
    #about
    {
        position: relative;
        left: 5%;
        width: calc(85% - 300px);
        display: grid;
        grid-template-columns: repeat(auto-fill, calc(100%));
    }
    .insurance
    {
        white-space: nowrap;
        grid-column: 1 / span 2;
    }
    .mentheboys
    {
        right: 5%;
        white-space: normal; 
        grid-column: 2;
        grid-row: 1;
    }
    .goodboys
    {
        grid-column: 1;
        grid-row: 2;
        width: calc(85% - 300px);
        height: fit-content;
        max-height: fit-content;
        min-height: fit-content;
    }
    .goodboys img
    {
        width: 100%;
    };
}
@media (max-width: 700px)
{
    #about
    {
        position: relative;
        left: 5%;
        width: calc(50%);
    }
    .insurance
    {
        white-space: nowrap;
        grid-column: 1 / span 2;
    }
    .mentheboys
    {
        position:sticky;
        right: 5vw;
        grid-column: 2;
    }
    .mentheboys img
    {
        width: 40vw;
        float: right;
    }
    .goodboys
    {
        grid-column: 2;
        grid-row: 1;
        width: calc(45%);
    }
}
@media (max-width: 590px)
{
    #about
    {
        position: relative;
        left: 5%;
        width: 90%;
        grid-column: 1;
        grid-row: 1;
    }
    .insurance
    {
        width: 90%;
        white-space: normal;
    }
    .mentheboys
    {
        position:sticky;
        right: 5%;
        grid-column: 1;
        grid-row: 2;
    }
    .mentheboys img
    {
        width: 50%;
    }
}
#about div
{
    padding-left: 4%;
    padding-right: 0px;
    width: calc(90%);/*
    border: 2px solid var(--accentColor);
    background-color: #30a3dc30;*/
}
#about div img
{
    border-radius: 25px;
}
a:not(.menu-link), a:not(.menu-link):active, a:not(.menu-link):visited, a:not(.menu-link)::before, a:not(.menu-link)::after
{
    color: var(--mainColor);
    text-decoration:underline;
    text-underline-offset: 0.45ex;
}
img
{pointer-events: none;}
a, a img
{pointer-events: all;}