@import url("syntax.css");

body {

 background: white;
}

.brand-img {
   
   background-image: url("/assets/images/index.jpg");
   background-repeat: no-repeat;
   background-size: cover;
   background-attachment: fixed;
}

h1 {
  font-family: "Exo", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 44px;
}

p {

  font-family: "Quattrocento", serif;
   font-weight: 400;
   font-size: 22px;
}

.content-container {
  padding: 20px;
}

.projects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-top: 6rem;
  
  justify-items: center;
   grid-row-gap: 2rem;
}
@media only screen and (max-width: 37.5em) {
  .projects {
	display: grid;
	grid-template-columns: 1fr;
	padding-top: 12rem;
  }
}

.card {
  display: flex;
  flex-direction: column !important;
  align-items: center;
  margin-bottom: 12rem;
}
.card img {
	height: 279px;	
	margin-bottom: 2rem;
  border-radius: 22px;
}
.card p {
 font-family: "Exo", sans-serif !important;
  background-color: white;
  text-decoration: none;
  padding: 0.5rem 1.2rem;
  display: inline-block;
  border-radius: 0.2rem;
  transition: all .2s;
  position: relative;
  font-size: 0.8rem;
  font-weight: 600;
  color:rgb(113, 113, 113) !important;
}
@media only screen and (max-width: 37.5em) {
	.card img {
		height: 35vh;
	}
}

.product-name {
  border-radius: 6px;
  font-family: 'Quattrocento' !important;
  font-weight: 700 !important;
  line-height: 13px !important;
  font-size: 1.8rem !important;
  padding: 10px !important;
  margin: 0;
}

.note h2 {
  font-family: "Exo", sans-serif !important;
  font-size: 1.2rem;
  font-weight: 600;
  color:rgb(113, 113, 113) !important;
}

.note h4 {
  margin-bottom: 0px !important;
  padding-bottom: : 0px !important;
  padding-top: 20px !important;
  font-family: "Exo", sans-serif !important;
  font-size: 1rem;
  font-weight: 600;
  color:rgb(113, 113, 113) !important;
}
.note p {
  font-family: 'Quattrocento' !important;
  font-size: 1.2rem;
  font-weight: 400 !important;
  line-height: 28px !important;
}

.notes a {
  
}

.note-name {
  font-family: 'Quattrocento' !important;
  font-weight: 700 !important;
  font-size: 1.8rem !important;
  line-height: 2.4rem !important;
  margin: 0;
  
}
.note-category {
  font-family: 'Quattrocento' !important;
  font-weight: 700 !important;
  font-size: 1.8rem !important;
  line-height: 2.4rem !important;
  margin: 0;
  
}

.logo {
  width: 80px;
  height: 60px;
  cursor: pointer;
  transition: all .23s ease-in-out;
  transform: scale(2.1);
 
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}

.menu {
  padding-right: 20px;
}

.menu a, .notes a {
  
  margin-left: 10px;

    &,
  &:link,
  &:visited {
        background-color: white;
        text-decoration: none;
        display: inline-block;
        transition: all .2s;
        position: relative;
        font-size: 1.4rem;
       font-family: "Exo", sans-serif;
       font-optical-sizing: auto;
        font-weight: 600;
        cursor: pointer;
        color: black;
    }

  &:hover {
        background-color: black;
        color: white !important;
    }
  &:active {
         background-color: lightcyan;
         color: white !important;
    }
}
.notes {
  list-style-type: outside;
 font-size: 1.2rem !important;
  font-weight: 400 !important;
  color:rgb(113, 113, 113) !important;
  /* padding: 0; */
}

hr {
  color:lightgray;
}
.notes a {
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  color:rgb(113, 113, 113) !important;
}
.menu .current  {
        background-color: black !important;
        color: white !important;
        border-bottom: 4px solid white;
}


.imgwithborder {
  border: 1px solid lightgray;
  border-radius: 4px !important;
 }
 
 .quattrocento-regular {
   font-family: "Quattrocento", serif;
   font-weight: 400;
   font-style: normal;
 }
 
 .quattrocento-bold {
   font-family: "Quattrocento", serif;
   font-weight: 700;
   font-style: normal;
 }