
body{
    background-color:white;
}

h1{
    font-family: "articulat-cf", sans-serif;
    font-weight: 900;
    font-style: normal;
    /*color:gray;*/
}

p, h2{
    /*color: rgb(108, 108, 108);*/

}

p {
    /*font-family: "articulat-cf", sans-serif; */
    font-weight: 400;
    font-style: normal;

}


.nav {
    list-style-type: none;
    background-color:rgb(159, 166, 173);
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 50px;
    
}

/*ul.nav*/ li {
    float: left
}

li a, .droptbn1 { /* w3schools*/
    display:inline-block; 
    padding: 8px 16px;
    color:black;
    text-align: center;
    text-decoration: none;
    /*font-family: "articulat-cf", sans-serif;*/
    font-weight: 400;
    font-style: normal;

}



ul.nav a:hover, .dropdown1:hover .dropbtn1 { /* w3schools*/
    /*background-color:skyblue; */
    color:aliceblue;
}

li.dropdown1{ /* w3schools*/
    display: inline-block; 
}

.dropdown-content1 { /* w3schools*/
    display: none;
    position: absolute;
    background-color: white;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0,0, 0.2);
    z-index: 1;
}

.dropdown-content1 a{ /* w3schools*/
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content1 a:hover{ /* w3schools*/
    background-color:skyblue;
}

.dropdown1:hover .dropdown-content1{ /* w3schools*/
    display: block;
}
.active {
    background-color:skyblue;
}



.grid-container{
    display:grid;
    grid-template-columns: auto auto auto;
    
}

.grid-item{
   text-align: center;
}

.navmenu{
    grid-column: 1 / span 3;
    grid-row: 1;
}
.header{
    grid-column: 1 / span 3;
    grid-row: 2;
    text-align: center;
    font-family: "articulat-heavy-cf", sans-serif;
    font-weight: 900;
    font-style: normal;

}

.main-img{
    grid-column: 1 /span 3;
    grid-row: 3;
    text-align: center;
    
}

.subtitle{
    grid-column: 2;
    grid-row: 4;
    font-family: "articulat-heavy-cf", sans-serif;
    font-weight: 900;
    font-style: normal;
    text-align: center;
}

.quote-button{
    grid-column: 3;
    grid-row: 1;
    margin-top: 6px;
    margin-right: 5px;
}


.contact-container{
    grid-row: 6;
    grid-column: 1 / span 3;
    background-color: lightslategray;
}

.body-paragraph{
    grid-column: 2;
    grid-row: 5;
    margin-left: 30px;
    font-size: 17px;
    /*font-family: "articulat-cf", sans-serif;*/
    font-weight: 400;
    font-style: normal;
    text-align:left
}


.address{
    grid-column: 1;
    grid-row: 6;
    text-align: left;
    margin: 10px;
    color:white;
    font-family: "articulat-cf", sans-serif;
    font-weight: 200;
    font-style: normal;
}

.logo{
    grid-column: 3;
    grid-row: 6;
    text-align: right;
    margin-top: 35px;
    margin-right: 10px;
    margin-bottom: 50px;
}

.number-email{
    grid-column: 2;
    grid-row: 6;
    text-align: center;
    margin: 10px;
    color:white;
    font-family: "articulat-cf", sans-serif;
    font-weight: 200;
    font-style: normal;
}

.hours{
    grid-column: 1;
    grid-row: 5;
    text-align:left;
    margin: 10px;
    font-family: "articulat-cf", sans-serif;
    font-weight: 200;
    font-style: normal;
    background-color: rgba(112, 128, 144, 0.555);
    border-radius: 25px; /* w3schools*/
   
}

.forms{
    text-align: left;
    margin: 10px;
}

#demo{
    grid-column: 2;
    grid-row: 6;
    margin-left: 140px;
    margin-top: 10px;
}

.about-container{
    grid-column: 1;
    grid-row: 2;
    background-color: rgba(135, 207, 235, 0.619);
    width: 600px;
    margin-left: 10px;
    margin-top: 10px;
    border-radius: 25px; /* w3schools*/
    margin-bottom: 10px;  
}

.about-h1{
    grid-column: 1 / span 2;
    grid-row: 2;
    text-align: left;
    font-family: "articulat-heavy-cf", sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 170px;
    color: gray;
    
}

.about-info{
    grid-column:1 / span 3;
    grid-row: 4;
    font-family: "articulat-cf", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: larger;
    margin-left: 120px;
    margin-right: 120px;
}

.research-img{
    grid-row: 3;
    grid-column: 1 / span 3;
    width: 500%;
    margin-left: 5%;

}
.about-research-paragraph{
    grid-column: 3;
    grid-row: 3;
    margin-left: 20px;
    margin-right: 20px;

}
.research-overview{
    grid-column: 1 / span 3;
    grid-row: 6;
    font-family: "articulat-cf", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: larger;
    margin-left: 20px;
    margin-right: 20px;
}

.about-img{
    grid-column: 1 / span 3;
    grid-row: 2;
    margin-top: 10px;
}

.about-h2{
    grid-column: 1;
    grid-row: 3;
    font-family: "articulat-cf", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin-left: 500px;
    margin-right: 50px;
}

.about-h2-2nd{
    grid-column: 1;
    grid-row: 5;
    font-family: "articulat-cf", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin-left: 500px;
    margin-right: 50px;
}

.about-info-2nd{
    grid-column:1 / span 3;
    grid-row: 6;
    text-align: left;
    font-family: "articulat-cf", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: larger;
    margin-left: 120px;
    margin-right: 120px;
}

.about-h2-3rd{
    grid-column: 1;
    grid-row: 7;
    font-family: "articulat-cf", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin-left: 500px;
    margin-right: 50px;
}

.about-info-3rd{
    grid-column:1 / span 3;
    grid-row: 8;
    text-align: left;
    /*font-family: "articulat-cf", sans-serif; */
    font-weight: 400;
    font-style: normal;
    font-size: larger;
    margin-left: 120px;
    margin-right: 120px;
}

.title{
    grid-column:2;
    grid-row: 2;
}

.carpet-img1{
    grid-column: 1;
    grid-row: 3;
}

.carpet-img2{
    grid-column: 2;
    grid-row: 3;
}

.carpet-img3{
    grid-column: 3;
    grid-row: 3;
}

.carpet-img4{
    grid-column: 1;
    grid-row: 4;
}

.carpet-img5{
    grid-column: 2;
    grid-row: 4;
}

.carpet-img6{
    grid-column: 3;
    grid-row: 4;
}

.carpet-img7{
    grid-column: 1;
    grid-row: 5;
}

.carpet-img8{
    grid-column: 2;
    grid-row: 5;
}

.carpet-img9{
    grid-column: 3;
    grid-row: 5;
}

.carpet-img10{
    grid-column: 1;
    grid-row: 6
}

.carpet-img11{
    grid-column: 2;
    grid-row: 6;
}

.tile-title{
    grid-column: 2;
    grid-row: 2;
    text-align: center;
}

.tile-img1{
    grid-column: 1;
    grid-row: 3;
}

.tile-img2{
    grid-column: 2;
    grid-row: 3;
}

.tile-img3{
    grid-column: 3;
    grid-row: 3;
}

.tile-img4{
    grid-column: 1;
    grid-row: 4;
}

.tile-img5{
    grid-column: 2;
    grid-row: 4;
}

.tile-img6{
    grid-column: 3;
    grid-row: 4;
}

.tile-img7{
    grid-column: 1;
    grid-row: 5;
}

.tile-img8{
    grid-column: 2;
    grid-row: 5;
}

.tile-img9{
    grid-column: 3;
    grid-row: 5;
}



.hardwood-title{
    grid-column: 2;
    grid-row: 2;
    text-align: center;
}

.hardwood-img1{
    grid-column: 1;
    grid-row: 3;
}

.hardwood-img2{
    grid-column: 2;
    grid-row: 3;
}

.hardwood-img3{
    grid-column: 3;
    grid-row: 3;
}

.hardwood-img4{
    grid-column: 1;
    grid-row: 4;
}

.hardwood-img5{
    grid-column: 2;
    grid-row: 4;
}

.hardwood-img6{
    grid-column: 3;
    grid-row: 4;
}

.hardwood-img7{
    grid-column: 1;
    grid-row: 5;
}

.hardwood-img8{
    grid-column: 2;
    grid-row: 5;
}

.hardwood-img9{
    grid-column: 3;
    grid-row: 5;
}

.hardwood-img10{
    grid-column: 1;
    grid-row: 5
}

.sub-header{
    grid-column: 1 / span 3;
    grid-row: 3;
    text-align: center;
}

.about-me-img{
    width: 300px;
    margin: 5px;
    grid-column: 2;
    grid-row: 3;
    margin-top: 20px;

}

.about-me-paragraph{
    grid-column: 2;
    grid-row: 3;
    margin-left: 350px;
    margin-top: 20px;

}

.piano-img{
    grid-column: 1;
    grid-row: 5;
    width: 400px;
    margin-left: 20px;
}

table, th, td{
    border: 1px solid black;
    border-collapse: collapse;
    padding: 5px;
    margin: 5px;
    /*grid-column: 1; */
    /*grid-row: 2; */

}

.is-paragraph{
    grid-column: 1;
    grid-row: 3;
    margin-left: 450px;
    margin-top: 30px;
    

}

.bioinformatics-img{
    width: 400px;
    grid-column: 1;
    grid-row: 3;
    margin-top: 10px;


}

.is-paragraph-2{
    grid-column: 1;
    grid-row: 4;
    margin-top: 20px;
    margin-left: 10px;

}

.table{
    grid-column: 1;
    grid-row : 5;
    margin-left: 10px;

}