:root {
  --aqua: #a9c7c3;
  --turquoise: #4d6663;
  --coral: #e07069;
  --ivory: #f1efe8;
  --green: #4daa59;
}

* {
  box-sizing: border-box;
  background-color: transparent;
}

/* NAVBAR styles */
.header {
  min-height: 5vh;
}

#nav-bar-bg {
  background-color: var(--aqua);
  background-color: var(--turquoise);
  background-image: linear-gradient(
    319deg,
    var(--aqua) 0%,
    var(--ivory) 37%,
    var(--turquoise) 100%
  );
}

#navbar-logo,
#burger {
  max-height: 60px;
}




body {
  margin: 0;

  background-image: linear-gradient(to bottom, var(--ivory), #f1efe88c),
    url("https://images.unsplash.com/photo-1575223970966-76ae61ee7838?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1740&q=80");
  height: auto;
  background-position: center;
  background-size: cover;
  position: relative;
  background-repeat: no-repeat;
  background-color: var(--ivory);
}


#containment-wrapper{
  min-height: 150vh;
}

.wall{
  background-image: 
    url("../images/whitebrickwall.jpg");
    margin: 0px 60px;  
    background-size: cover;

}


.space{
  background-image: 
    url("../images/space.jpg");
    margin: 0px 60px;
    /* background-repeat:no-repeat; */
    background-size: contain;
}

.sunset{
  background-image: 
    url("../images/sunset.jpg");
    margin: 0px 60px;
    /* background-repeat:no-repeat; */
    background-size: cover;
}

.button{
  width: 110px;
  margin: 0px 10px
}

img {
  border: solid 2px;
  border-bottom-color: #ffe;
  border-left-color: #eed;
  border-right-color: #eed;
  border-top-color: #ccb;
  max-height: 100%;
  max-width: 100%;
}

.frame {
  background-color: #ddc;
  border: solid 3vmin #eee;
  border-bottom-color: #fff;
  border-left-color: #eee;
  border-radius: 2px;
  border-right-color: #eee;
  border-top-color: #ddd;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25) inset,
    0 5px 10px 5px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  display: inline-block;
  margin: 5vh 5vw;
  height: 25vh;
  padding: 1vmin;
  position: relative;
  text-align: center;

  &:before {
    border-radius: 2px;
    bottom: -2vmin;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25) inset;
    content: "";
    left: -2vmin;
    position: absolute;
    right: -2vmin;
    top: -2vmin;
  }
  &:after {
    border-radius: 2px;
    bottom: -2.5vmin;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
    content: "";
    left: -2.5vmin;
    position: absolute;
    right: -2.5vmin;
    top: -2.5vmin;
  }
}