/* COLOURS
Dark green - #15b946 rgba(21,185,70,255) 
Light green - #6fd48d rgb(111,212,141)
V. light green - #e8fcee rgb(232, 252, 238)
Nearly black - #040604 rgb(4,6,4)
*/
:root {
  --dark-green: #15b946;
  --light-green: #6fd48d;
  --v-light-green: #e8fcee;
  --nearly-black: #040604;
  --white: #ffffff;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--nearly-black);
}

.container {
  /* border: 2px solid red; */
  background-color: var(--v-light-green);
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
}

.header {
  width: 100vw;
  height: 250px;
  background-image: url("../img/exotic-garden.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.logo-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.logo {
  max-width: 500px;
  height: auto;
  padding: 1rem;
}
@media (max-width: 768px) {
  .logo {
    max-width: 300px;
  }
}  

.nav-menu-container {
  width: 4rem;
  height: 4rem;
  margin-top: 1rem;
  background-color: var(--nearly-black);
  border-radius: 1rem;
}

.nav-menu {
  width: 2rem;
  height: 0.5rem;
  margin: 0.5rem;
  background-color: var(--dark-green);
}

p {
  margin: 1rem auto;
}

img {
  max-width: 400px;
  height: auto;
  border-radius: 1rem;
}
@media (max-width: 768px) {
  img {
    max-width: 300px;
  }
}  

.main {
  max-width: 1200px;
  margin: 4rem auto;
  padding: 2rem;
  display: flex;
  justify-content: space-around;
}

@media (max-width: 600px) {
  .main {
    flex-direction: column;
    margin: 0 auto;
    padding: 1rem;
  }
}

.layout-text {
  padding: 2rem;
}

.layout-img {
  margin: 0 auto;
}
@media (max-width: 600px) {
  .layout-img {
    justify-content: center;
  }
}

.footer {
  width: 100%;
  height: 3rem;
  background-color: var(--dark-green);
}

.footer-content {
  display: flex;
  justify-content: center;
  font-size: 0.9rem;
  padding-left: 1rem;
}

.sm-link {
  align-content: center;
}
.sm-icon {
  max-width: 35px;
  height: auto;
  margin: 0 1rem;
  align-self: center;
}