/* box-sizing makes padding and borders expand inward instead of outward, retains boundaries */


* {box-sizing: border-box;}

body {
margin: 0; /* Needed to remove the small default margin */
font-family: trebuchet ms, arial, helvetica;
color: white;
background-color: rgb(255,255,255);
/*background: url(../images/wp003.jpg);
background-size: 200px;*/
}

.all {
margin-left: 3%;
margin-right: 3%;
}

/*.title {
padding-bottom: 20px;
text-align: center;
color: rgb(60,60,60);
font-size: 30px;
}*/

.header {
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
/*background: url(../images/bp.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;*/
background-color: rgb(60,60,60);
/*box-shadow: 0px 7px 10px rgba(0,0,0,0.25);*/
z-index: 1;
}

.header-title {
padding: 10px;
padding-left: 30px;
color: rgb(230,230,230);
font-size: 30px;

}

.header-spacer {
height: 120px;
}

.navbar {
display: flex;
padding: 10px;
padding-right: 30px;
}

.navbar > div {
}

.navbar a {
padding: 10px;
font-size: 18px;
color: rgb(230,230,230);
}

a:link {color: rgb(230,230,230); text-decoration: none;}

a:visited {color: rgb(230,230,230);}

a:hover {color: rgb(255,255,255); text-decoration: none;}

a:active {color: rgb(255,255,255); text-decoration: none;}

.row-title {
padding: 5px;
text-align: center;
color: rgb(230,230,230);
font-size: 20px;
background-color: rgb(60,60,60);
/*border: 1px solid blue;*/
}

.home-row {
display: flex;
flex-direction: row;
padding: 0px;
/*border: 1px solid yellow;*/
}

.home-column {
flex: 50%;
padding: 10px;
}

.link-container {
}

.text-block {
display: flex;
justify-content: center;
color: grey;
padding: 10px;
}

.home-column img {
width:100%;
height:350px; /*Needed for resize effect or images will shrink*/
object-fit:cover;
vertical-align: middle; /*Gets rid of default gap below image*/
padding: 1px;
background-color: rgb(60,60,60);
}

.home-column-yt {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
width: 100%;
padding: 1px;
background-color: rgb(60,60,60);
}

.about-row {
display: flex;
flex-direction: row;
padding: 0px;
}

.about-column {
flex: 50%;
padding: 10px;
color: rgb(60,60,60);
}

.about-column img {
width:100%;

object-fit:cover;
vertical-align: middle; /*Gets rid of default gap below image*/
padding: 1px;
background-color: rgb(60,60,60);
}

.gallery-row {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
width: 100%;
padding-top: 10px;
}

.gallery-row img {
width: 300px;
height: 300px;
object-fit:cover;
vertical-align: middle;
}

.footer {
height: 60px;
margin-top: 20px;
text-align: center;
color: rgb(100,100,100);
font-size: 14px;
padding: 10px;
padding-top: 20px;
/*width: 100%;*/
/*background-color: rgb(100,100,100);*/
/*border: 1px solid grey;*/
}

/* The order matters with @media, it has to be below everything */

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

.all {
margin-left: 0%;
margin-right: 0%;
}

.header {
flex-direction: column;
height: auto;
background-size: 100%;
background-position: center 0px;
}

.navbar > div {
font-size: 16px;
}

.home-row {
flex-direction: column;
padding: 0px;
height:auto; /*Needed to stack footer underneath*/
}

.home-row-sm {
padding-top: 10px;
}

.home-column {
padding: 10px;
}

.home-column-sm {
padding-top: 0px;
}

.home-column img {
height:250px;
}

.footer {
padding-top: 0px;
}

.gallery-row img {
width: 200px;
height: 150px;
object-fit:cover;
vertical-align: middle;
}

}