:root {

  /**Standard Values**/
  --standard-letter-spacing: 1px;
  --standard-transition-fast: 0.315s;
  --standard-transition-medium: 0.715s;
  --standard-transition-slow: 1.215s;
  /*Fonts*/
  --standard-font-family: Lato, sans-serif;

  /**Navigational elements**/
  --nav-color: rgb(235, 235, 235);
  --nav-bg-color: rgba(35, 35, 35, 0.3);
  --nav-anchor-hover-color: rgb(35, 35, 35);
  --nav-anchor-bg-color: rgba(35, 35, 35, 0);
  --nav-anchor-hover-bg-color: rgba(35, 35, 35, 0);
  --nav-anchor-font-size: clamp(13px, 1.65vh, 18px);
  --nav-anchor-letter-spacing: 0.95vh;
  --nav-anchor-hover-letter-spacing: 0.65vh;
  /**Page Nav**/
  --page-nav-color: rgb(135, 135, 135);
  --page-nav-hover-color: rgb(235, 135, 135);
}

body {
  background-color: white;
  color: rgb(45, 45, 45);
  margin: 0;
  padding: 0;
}

.page-nav img {
  background-color: rgb(35, 35, 35);
  border-radius: 100%;
  border: 5px solid rgba(255, 255, 255, 1);
  height: auto;
  margin-right: 1.35vw;
  padding: 18px;
  width: 135px;
}

/**Page Nav**/

.page-nav {
  align-items: center;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  display: flex;
  height: 50px;
  justify-content: space-between;
  padding: 0 15px;
}

.page-nav a,
.page-nav button {
  align-items: center;
  background-color: transparent;
  border: none;
  color: var(--page-nav-color);
  display: flex;
  height: 100%;
  justify-content: center;
  letter-spacing: clamp(2px, 0.395vw, 3px);
  margin: 0 0.5vw 0 0.5vw;
  min-width: 15vw;
  position: relative;
  text-transform: uppercase;
  transition-duration: var(--standard-transition-slow);
}

.page-nav a:after,
.page-nav button:after {
  background-color: var(--page-nav-hover-color);
  content: '';
  height: 2px;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 176.5%;
  transition-duration: var(--standard-transition-slow);
}

.page-nav a:before,
.page-nav button:before {
  border-left: 1px solid rgb(235, 235, 235);
  border-radius: 0;
  border-right: 1px solid rgb(235, 235, 235);
  content: '';
  height: 50%;
  left: 0;
  position: absolute;
  right: 0;
  transition-duration: var(--standard-transition-medium);
  width: 100%;
}

.page-nav a:hover:before,
.page-nav button:hover:before {
  border-left: 1px solid rgb(135, 135, 135);
  border-radius: 0;
  border-right: 1px solid rgb(135, 135, 135);
  content: '';
  height: 35%;
  left: 0;
  opacity: 0.1;
  position: absolute;
  right: 0;
  transition-duration: var(--standard-transition-fast);
  width: 100%;
}

.page-nav a:hover,
.page-nav button:hover {
  color: var(--page-nav-hover-color);
  text-transform: uppercase;
  transition-duration: var(--standard-transition-medium);
}

.page-nav .active,
.page-nav .active:hover {
  background-color: rgb(95, 95, 95);
  color: rgb(235, 235, 235);
  transition-duration: var(--standard-transition-medium);
}

.page-nav .active::after,
.page-nav .active:hover:after {
  background-color: white;
  left: 7.315%;
  opacity: 0.15;
  right: 7.315%;
  top: 85.5%;
  transition-duration: var(--standard-transition-medium);
}

.page-nav .active::before,
.page-nav .active:hover:before {
  border-left: 1px solid rgb(235, 135, 135);
  border-radius: 0;
  border-right: 1px solid rgb(235, 135, 135);
  content: '';
  height: 35%;
  left: -5px;
  opacity: 1;
  position: absolute;
  right: -5px;
  transition-duration: var(--standard-transition-fast);
  width: auto;
}

.page-nav a:hover:after,
.page-nav button:hover:after {
  opacity: 1;
  transition-duration: var(--standard-transition-slow);
}

header {
  background-color: rgb(195, 95, 135);
  height: 35vh;
  z-index: -1;
}

.simplistic-content {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  margin: 3vh 0 3vh;
  min-height: 45vh;
  padding: 3vh 5vw;
  z-index: -1;
}

/**Simplistic Content sections have different classes that allow them to
function as needed**/
.simplistic-content section {
  border: 1px solid;
  border-color: rgb(235, 235, 235);
  box-sizing: border-box;
  display: flex;
  margin: 0 auto 5vh;
  padding: 35px;
}

.simplistic-content .featured-section {
  align-items: center;
  border: none;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  color: rgb(65, 65, 65);
  font-size: clamp(18px, 5vh, 23px);
  justify-content: center;
  line-height: 2.35rem;
  margin: -5vh 0 5vh;
  text-align: center;
  width: 100%;
}

.simplistic-content .half-section {
  border: 1px solid;
  border-color: rgb(235, 235, 235);
  box-sizing: border-box;
  margin: auto;
  max-width: 43.5vw;
  padding: 35px;
}

.simplistic-footer {
  align-items: center;
  background-color: white;
  border-radius: 5px;
  bottom: 3vh;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  color: rgb(195, 195, 195);
  font-size: clamp(8px, 2vh, 10px);
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  left: clamp(5vw, 15vw, 35vw);
  letter-spacing: 0.195rem;
  padding: 1vh;
  position: fixed;
  right: clamp(5vw, 15vw, 35vw);
  text-transform: uppercase;
  top: auto;
  transform: scaleY(1);
  transition-duration: var(--standard-transition-slow);
}

.simplistic-footer:hover {
  background-color: white;
  color: rgb(35, 35, 35);
  letter-spacing: 0.175rem;
  opacity: 1;
  transform: scaleY(1);
  transition-duration: var(--standard-transition-medium);
}

.hidden {
  display: none;
}

@media only screen and (max-width: 768px) {
  :root {
    --nav-anchor-font-size: clamp(15px, 1.65vh, 18px);
  }

  .page-nav img {
    width: 75px;
  }
}