/*

sage        #bbc7a4
emerald     #69DC9E
pond-water  #76bed0



*/
:root {
  --sage: #bbc7a4;
  --emerald: #69dc9e;
  --pond: #76bed0;

  --font: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans",
    Arial, sans-serif;
}

* {
  margin: 0;
  display: border-box;
  color: white;
  background-color: #808080;
  overflow: hidden;

  font-family: var(--font);
}

section {
  border: none;
}

.mainBox {
  height: 800px;
  width: cover;
  background-color: var(--sage);

  display: flex;
  flex-direction: row;
}

.primaryBox {
  height: 500px;
  width: 60%;
  position: relative;

  display: flex;
  background-color: var(--pond);
}

/* .secondaryBox {
  height: 100px;
  width: 100px;

  position: absolute;
} */

#btn {
  background-color: black;
  color: gold;
  border: none;
  border-radius: 4px;
  position: absolute;

  height: 200px;
  width: 200px;

  top: 50px;
  left: 50px;
  transition: top 0.1s linear, left 0.1s linear; /*Smooth movement*/
}

#btn:hover {
  background-color: gold;
  color: darkblue;
}
