html, body{
    width: 100%;
    height: 100%;
    margin: 0;
}

body{
    font-family: Arial, Helvetica, sans-serif;
}

#blue{
    color: rgb(0, 0, 199);
}

#green{
    color: rgb(0, 177, 0);
}

#container{
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 10% 6% auto 10%;
    height: 100%;
}

#header{
    background-color: #000;
    color: #fffdf6;
    text-align: center;
    grid-row: 1;
}

#headerlink:link, #headerlink:visited{
    text-decoration: none;
}

#navbar{
    grid-row: 2;
    background-color: #000;
    text-align: center;
    padding: 1%;
}

#navlink:link, #navlink:visited{
    color: rgb(0, 177, 0);
    text-decoration: none;
    padding: 1%;
}
#navlink:hover, #navlink:active{
    background-color: #fffdf6;
    color: rgb(0, 0, 199);
    text-decoration: underline;
}

#index-content{
    grid-row: 3;
    text-align: center;
    width: 75%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 30% auto 30% auto 30%;
    grid-template-rows: 7% auto;
}

#index-content-heading, #index-content-description{
    grid-column: 1/6;
}

#index-content-heading{
    grid-row: 1;
    color: rgb(0, 0, 199);
}

#index-content-description{
    grid-row: 2;
}

#index-content-description2{
    grid-column: 1/6;
}

img {
    max-width: 35%;
    height: auto;
}

#service-img {
    max-width: 60%; 
    margin-top: 8%; 
    margin-bottom: 8%;
}

#ref-link:link, #ref-link:visited{
    color: rgb(0, 0, 199);
    text-decoration: none;
}
#ref-link:hover, #ref-link:active{
    background-color: #fffdf6;
    color: rgb(0, 0, 199);
    text-decoration: underline;
}

#about-content-heading{
    color: rgb(0, 0, 199);
}

#about-content, #contact-content{
    grid-row: 3;
    text-align: center;
    width: 75%;
    margin: 0 auto;
}

#about-content-description{
    width: 70%;
    margin: 0 auto;
}

#about-img {
    max-width: 50%;
    height: auto;
    border: 2px solid rgb(0, 177, 0);
    box-shadow: 5px 5px 5px rgba(0, 0, 199, 0.5);
}

#contact-content-heading{
    color: rgb(0, 0, 199);
}

#contact-content-description{
    display: grid;
    grid-template-columns: 50% 50%;
    width: 75%;
    margin: 0 auto;
    height: 75%;
}

#maps{
    grid-column: 1/3;
    border: 2px solid rgb(0, 177, 0);
    box-shadow: 5px 5px 5px rgba(0, 0, 199, 0.5);
}

#call{
    visibility: hidden;
    display: none;
}

#footer{
    grid-row: 4;
    font-size: 12px;
    background-color: #000;
    color: #fffdf6;
    text-align: center;
}

@media only screen and (max-width: 768px) {
    #container{
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: 15% 6% auto auto;
        height: 100%;
    }

    #index-content{
        grid-row: 3;
        text-align: center;
        width: 75%;
        margin: 0 auto;
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto;
    }
    
    #index-content-heading{
        grid-column: 1;
        grid-row: 1;
    }
    
    #index-content-description{
        grid-column: 1;
        grid-row: 2;
    }

    #index-content-description2{
        grid-column: 1;
    }

    p{
        font-size: 14px;
    }

    img {
        max-width: 25%;
        height: auto;
    }

    #service-img {
        max-width: 40%; 
        margin-top: 8%; 
        margin-bottom: 8%;
    }

    #about-img {
        max-width: 100%;
        height: auto;
        margin-bottom: 1%;
    }

    #about-content-description{
        width: 100%;
        margin: 0 auto;
    }

    #contact-content-description{
        display: grid;
        grid-template-columns: auto;
        width: 100%;
        margin: 0 auto;
        grid-template-rows: auto;
        text-align: left;
    }

    #maps{
        grid-column: 1;
        margin-bottom: 1%;
    }

    #call{
        color: black;
        visibility: visible;
        text-decoration: none;
        display: inline;
    }

    #mobile{
        display: none;
        visibility: hidden;
    }
}