:root {
   --accent-color: rgb(141, 72, 159);
   --contrast-color: #f1a73a;
   --body-color: #222;
   --contrast-text-color: #fff;
   --background-color: #fdfdfd;
   --btn-text-color: #fff;
   --heading-font-family: "Poppins", sans-serif;
   --body-font-family: "Poppins", sans-serif;
}

*,
*::after,
*::before {
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
}

html {
   font-size: 62.5%;
   scroll-behavior: smooth;
}

p,
span,
a,
li,
label {
   font-size: clamp(1.5rem, 1.3vw, 1.7rem);
   color: var(--body-color);
   line-height: 1.7;
   font-family: "Poppins", sans-serif;
}

a {
   text-decoration: none;
}

a:hover {
   color: var(--contrast-color);
}

/* navigation styles start here */

header {
   background: var(--background-color);
   background-color: var(--accent-color);
   color: #fff;
   border-bottom: 3px solid var(--accent-color);
   position: relative;
   z-index: 999;
   width: 100%;
   height: 80px;
   display: grid;
   grid-template-columns: 100px 3fr auto 10px;
}

.contact {
   display: flex;
   align-items: center;
   margin-left: 30px;
}

/* allows nav-toggle to gain focus, making it tabbable */
.nav-toggle {
   position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;
}

.nav-toggle:focus ~ .nav-toggle-label {
   outline: 3px solid rgba(lightblue, 0.75);
}

.nav-toggle-label {
   position: absolute;
   top: 0;
   right: 0;
   margin-top: 0px;
   margin-right: 1.5em;
   height: 100%;
   display: flex;
   align-items: center;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
   display: block;
   background: #fff;
   height: 2px;
   width: 2em;
   border-radius: 2px;
   position: relative;
}

.nav-toggle-label span::before,
.nav-toggle-label span::after {
   content: "";
   position: absolute;
}

.nav-toggle-label span::before {
   bottom: 7px;
}

.nav-toggle-label span::after {
   top: 7px;
}

nav {
   position: absolute;
   text-align: left;
   top: 100%;
   right: 0;
   background: var(--background);
   width: 100%;
   transform: scale(1, 0);
   transform-origin: top;
   transition: transform 400ms ease-in-out;
   z-index: 999 !important;
}

nav ul {
   width: 100%;
   margin: 0;
   padding: 0;
   list-style: none;
   background: var(--background-color);
   height: fit-content;
   position: absolute;
   z-index: 999 !important;
   text-align: right;
   border-bottom: 1px solid var(--accent-color);
}

nav li {
   position: relative;
   right: 0;
   margin-bottom: 0.8em;
}

nav li:first-of-type {
   margin-top: 1em;
}

nav a {
   color: var(--body-color);
   text-decoration: none;
   text-transform: uppercase;
   opacity: 0;
   transition: opacity 150ms ease-in-out;
   margin-right: 0.5em;
   font-size: 1.6rem;
}

nav a:hover {
   color: var(--contrast-color);
}

.nav-toggle:checked ~ nav {
   transform: scale(1, 1);
}

.nav-toggle:checked ~ nav a {
   opacity: 1;
   transition: opacity 250ms ease-in-out 250ms;
}

/* part of header containing contact and social media details */

.contact {
   margin-right: 10px;
}

.contact-icon {
   margin-left: 20px;
   margin-right: 10px;
}

.contact-icon:first-of-type {
   margin-left: 0;
}

.mobile {
   display: block;
}

.mobile a,
.mobile i {
   color: #fff;
}

.mobile i {
   font-size: 2rem;
}

.mobile i:hover {
   color: var(--contrast-color);
}

.desktop {
   display: none;
}

@media screen and (min-width: 1024px) {
   .nav-toggle-label {
      display: none;
   }

   header {
      display: grid;
      grid-template-columns: 5% auto 200px 750px 5%;
      height: 100px;
      background-color: #fff;
      color: var(--body-color);
      border-bottom: 3px solid var(--accent-color);
      max-width: 100%;
      position: relative;
      justify-items: center;
   }

   .contact {
      justify-self: flex-start;
      grid-column: 2 / 3;
      margin-left: 0;
   }

   .contact-icon {
      margin: 0 10px 0 0px;
   }

   .mobile {
      display: none;
   }

   .desktop {
      display: block;
      margin-right: 30px;
   }

   .desktop i {
      display: inline;
   }

   .desktop i:hover {
      color: var(--accent-color);
   }

   .btn {
      padding: 1rem 3rem;
   }

   nav {
      all: unset;
      justify-self: start;
      grid-column: 4 / 5;
      display: flex;
      justify-content: flex-end;
      align-items: center;
   }

   nav ul {
      all: unset;
   }

   nav li {
      all: unset;
      margin-bottom: 0;
   }

   nav a {
      opacity: 1;
      position: relative;
      font-size: 1.8rem;
      color: var(--body-color);
      text-transform: uppercase;
      text-decoration: none;
      padding: 0 10px;
      transition: 0.4s;
      font-stretch: expanded;
   }

   nav li:first-of-type {
      margin-top: 0;
   }
}