@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');

body {
  font-family: "Mulish", sans-serif;
  font-weight: 400;
  font-style: normal;
/*  background-color: #1e1e1e;*/
background-color: #f4f4f4;
}


@media only screen and (min-width:470px) {
  #defaultCanvas0 {
    display: block;
  }
.row {
    width:80%;
    margin-left:10% !important;
    margin-right:10% !important;
  }

  .navbar {
  padding-left: 18vw;
  padding-right: 10vw;
  padding-top: 5vh;
}

#site-content {
  padding-top: 3vh;
}

.left-column {
  margin-right: 3%;
  width: 40%;
  margin-left: 10%;
  text-align: justify;
  display:inline-block;

}

.separator {
  width: 0%;
  background-color: #00ffae;
  margin-top: 8%;
  margin-bottom: 8%;
}
.right-column {
  margin-left: 3%;
  /*width: 44.9%;*/
  width: 33%;
  /*padding-top: 5vh;*/
  text-align: justify;
  display:inline-block;
  /*background-color: red;*/
}


}

.menu {
  width: 100%;
  height: 2.5rem;
}

.menu h4 {
  float: left;
  width: 33%;
}


ul {
  color: black;
}

.rect p{
  margin-left: 2%;
  background-color: red;
  width: 40%;
  margin-top: 1%;
  display: inline-block;
}



.navbar {
  background: background-color: #333333;
  color: black;
}


.navbar a {
  color: #108e07 !important;
  text-decoration: none !important;
}


.navbar a:hover {
  text-decoration:none;
  border-bottom: none !important;
  color: black !important;
}


.nav-active a {
color:grey !important;
}

.navbar-brand {
   font-family: "Mulish", sans-serif;
  font-weight: 400;
  /*color: #0500CC !important;*/
font-size: 2rem;

}

.burgundy-filter:hover {
  filter: invert(13%) sepia(65%) saturate(3088%) hue-rotate(320deg) brightness(90%) contrast(120%);
}



p {
	 font-family: "Mulish", sans-serif;
  font-weight: 400;
  font-style: normal;
font-size:1.03rem;
color: black ;
		}

h1 {
	 font-family: "Mulish", sans-serif;
  font-weight: 500;
font-size: 1.5rem;

}

a {
/*  color: #00ffae !important;*/
/*  color: #c561ff !important;*/
color: #108e07;
}

.menu a {
  color: grey;
}

a:hover {
  color: #108e07;
  border-bottom: 1px dotted #108e07;
  text-decoration:none !important;
}


.alt-link:hover {
  text-decoration: none!important;
  border-bottom: none !important;
}


h4 {
	font-size: 1.4rem;
   color: #108e07;
   font-weight: 500;
    font-family: "Mulish", sans-serif;
}

.navbar-toggler-icon {

 background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0,0,0,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

}

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
}

.row            { 
  -webkit-flex-direction: row; 
  flex-direction: row;
}

.column { 
  -webkit-flex-direction: column; 
  flex-direction: column; 
  float: left;
}

.home-img {
  width: 98%;
  margin-top: 2.5% ;
  margin-bottom: 2%;
  margin-right: 2%;
  box-shadow: 2px 2px 0px #cccccc;

}

.home-img:hover {
  box-shadow: 2px 2px 0px #108e07;
}

.about-img {
  width: 100%; margin-top: 18%; margin-bottom: 10%;
  box-shadow: 7px 7px 0px grey;
}

.about-img:hover {
  box-shadow: 7px 7px 0px #108e07;
}


.project-img {
   width: 98%; 
   margin-bottom: 5%;
  box-shadow: 5px 5px 0px grey;
  min-width: 250px;
}

.project-img:hover {
  box-shadow: 5px 5px 0px #00ffae;
}


.project-img-small {
  width: 47%;
  margin-right: 2.5%;
  margin-bottom:  5%;
  box-shadow: 5px 5px 0px grey;
  min-width: 250px;
  height: 13%;
}

@media(min-width:1300px) {
.project-img-small {
  height:20%;
}
}

.project-img-small:hover {
  box-shadow: 5px 5px 0px #00ffae;
}

.left-img {
  margin-left: 1%;
  margin-right: 1.5%;
}

.right-img {
  margin-right: 1%;
  margin-left: 1.5%;
}


@media (max-width: 600px) {
  .project-img, .project-img-small {
    width: 96%;
    margin-left: 1.5% !important;
    margin-right: 2.5% !important;
    margin-bottom: 5%;
  }

.project-img-small {
  height:12%;
}
  .left-img, .right-img {
    margin-left: 0%;
    margin-right: 0%;
  }

  .about-img {
    margin-top: 5%;
    margin-bottom: 0%;
    width: 96%;
    margin-left: 1.5% !important;
    margin-right: 2.5% !important;
  }
}



@media (max-width:449px) {

/*  #defaultCanvas0 {
    display: none;
  }*/
	.row {
		width:92%;
		margin-left: 4% !important;
		margin-right: 4% !important;
	}

  .left-column {
    width: 90%;
    margin-left: 5%;
  }
  .right-column {
    width: 90%;
    margin-left: 5%;
    margin-top: 5%;
     padding-bottom: 5%;
  }

  .navbar {
    padding-top: 2rem;
    padding-left: 2rem;
  }
}