@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit; }

html {
  font-size: 62.5%;
  scroll-behavior: smooth; }
  @media (max-width: 75em) {
    html {
      font-size: 56.25%; } }
  @media (max-width: 56.25em) {
    html {
      font-size: 50%; } }

body {
  box-sizing: border-box; }

:root {
  --yellow-dark: #D89216;
  --yellow-light: #E1D89F;
  --purple-dark: #2C061F;
  --purple-light: #3C415C;
  --purple: #301B3F;
  --pink: #9C3D54;
  --grey: #374045;
  --grey-light: #B4A5A5;
  --black: #000;
  --white: #fff; }

.light-mode {
  --bodyText: var(--black);
  --navBack: var(--yellow-dark);
  --tglLogo: var(--white);
  --homeBack: var(--yellow-light);
  --textBack: var(--grey-light);
  --featureBack: var(--white);
  --boxShadow: 1rem 1rem 3rem rgba(0, 0, 0, .4)
; }

.dark-mode {
  --bodyText: var(--white);
  --navBack: var(--purple-dark);
  --tglLogo: var(--yellow-dark);
  --homeBack: var(--purple-light);
  --textBack: var(--grey);
  --featureBack: var(--pink);
  --boxShadow: .5rem .5rem 3rem rgba(255, 255, 255, .4)
; }

* {
  transition: background-color 1s; }

body {
  font-size: 1.6rem;
  font-family: 'Roboto', sans-serif;
  color: var(--bodyText); }

.nav {
  position: fixed;
  display: flex;
  justify-content: space-between;
  padding: 1rem 2rem;
  align-items: center;
  z-index: 10;
  background-color: var(--navBack);
  width: 100%;
  height: 6rem; }
  @media (max-width: 37.5em) {
    .nav {
      padding: 1.8rem 5rem;
      flex-direction: column;
      height: 12rem; } }
  @media (max-width: 37.5em) {
    .nav-options {
      width: 100%;
      display: flex;
      justify-content: space-between; } }
  .nav-options a {
    color: inherit;
    text-decoration: none;
    font-size: 2.5rem;
    font-weight: 700; }
    .nav-options a:not(:first-child) {
      margin-left: 5rem; }
  .nav-toggle {
    display: flex;
    align-items: center; }
    @media (max-width: 37.5em) {
      .nav-toggle {
        width: 100%;
        display: flex;
        justify-content: space-between; } }
    .nav-toggle__text {
      font-size: 2rem; }
    .nav-toggle .fas {
      font-size: 3rem;
      margin-left: 2.5rem;
      color: var(--tglLogo);
      animation: rotate 6s infinite linear; }

@keyframes rotate {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(360deg); } }
    .nav-toggle input[type="checkbox"] {
      visibility: hidden; }
      .nav-toggle input[type="checkbox"]:checked + label {
        background-color: #000;
        border-color: #fff; }
        .nav-toggle input[type="checkbox"]:checked + label:before {
          transform: translateX(3.5rem);
          background-color: #fff; }
    .nav-toggle label {
      margin-left: 2.5rem;
      display: flex;
      width: 7rem;
      height: 3.5rem;
      border: .5rem solid;
      border-radius: 99em;
      position: relative;
      transition: all .75s;
      cursor: pointer;
      background-color: #fff; }
      .nav-toggle label:before {
        transition: all .75s;
        content: "";
        display: block;
        position: absolute;
        width: 2rem;
        height: 2rem;
        background-color: #2C061F;
        border-radius: 50%;
        top: .25rem;
        left: .25rem; }

section {
  min-height: 100vh; }

.home {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5rem;
  background-color: var(--homeBack); }
  @media (max-width: 37.5em) {
    .home {
      text-align: center; } }
  .home h1 {
    font-size: 8rem;
    text-transform: uppercase; }
  .home h2 {
    font-size: 5rem;
    margin-top: 2rem; }

.features {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5rem;
  background-color: var(--featureBack); }
  @media (max-width: 37.5em) {
    .features {
      flex-direction: column; } }
  .features-text {
    width: 45%;
    background-color: var(--textBack);
    padding: 5rem;
    border-radius: 3rem;
    box-shadow: var(--boxShadow); }
    @media (max-width: 37.5em) {
      .features-text {
        width: 100%; } }
    .features-text h3 {
      font-size: 4rem; }
    .features-text p {
      font-size: 2rem;
      margin-top: 5rem;
      text-align: justify; }
  .features-photos {
    width: 45%; }
    @media (max-width: 37.5em) {
      .features-photos {
        width: 100%; } }
    .features-photos img {
      position: relative;
      width: 100%;
      right: 21rem; }
      @media (max-width: 37.5em) {
        .features-photos img {
          position: relative; } }
      .features-photos img:nth-child(2) {
        right: 0;
        left: 3rem; }

.about {
  text-align: center;
  padding: 5rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background-color: var(--homeBack); }
  .about img {
    width: 10%; }
    @media (max-width: 37.5em) {
      .about img {
        width: 25%; } }
  .about p {
    font-size: 2.5rem;
    margin-top: 8rem;
    width: 75%;
    padding: 5rem;
    background-color: var(--textBack);
    border-radius: 3rem;
    box-shadow: var(--boxShadow); }
    @media (max-width: 37.5em) {
      .about p {
        width: 100%; } }