/*
Theme Name: TWD 2027
Author: Les Sturgeon
Version: 2.0 
*/
root {
  --eyebrow: clamp(20px, calc(15.714px + 1.19vw), 30px);
  --eyebrowSmall: clamp(16px, calc(12.571px + 0.952vw), 24px);
  --h1: clamp(40px, calc(22.857px + 4.762vw), 80px);
  --h2: clamp(30px, calc(21.429px + 2.381vw), 50px);
  --h3: clamp(16px, calc(11.714px + 1.19vw), 26px);
  --h4: 20px;
  --i: clamp(0.875rem, calc(0.7727rem + 0.5455vw), 1.25rem);
}
.montserrat {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}
.roboto {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}
.dancing-script {
  font-family: "Dancing Script", cursive;
  font-optical-sizing: auto;
  font-style: normal;
}
.lobster-two-regular {
  font-family: "Lobster Two", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.lobster-two-bold {
  font-family: "Lobster Two", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.lobster-two-regular-italic {
  font-family: "Lobster Two", sans-serif;
  font-weight: 400;
  font-style: italic;
}
.lobster-two-bold-italic {
  font-family: "Lobster Two", sans-serif;
  font-weight: 700;
  font-style: italic;
}
.mainHeading,
.sectionHeading {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 700;
}
.bodyText {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400;
}
.nav,
.button {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 600;
}
.handwrittenText {
  font-family: "Dancing Script", cursive;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 600;
}
.skip-nav-link {
  position: absolute;
  left: 10px;
  transform: translateY(-150px);
  padding: 20px;
  border-radius: 0 0 20px 20px;
  transition: transform 325ms;
}
.skip-nav-link:focus {
  transform: translateY(60%);
}
*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  font-family: "Roboto", sans-serif;
  color: white;
  font-size: 16px;
  background-color: #03111F;
}
a {
  color: white;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  color: green;
}
.headerLarge {
  display: none;
}
.headerSmall {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.headerSmall img {
  width: 100%;
}
.headerSmall .phone {
  display: flex;
  align-items: center;
  justify-content: center;
}
.headerSmall .phone .button {
  background-color: #00C7E8;
  padding: 10px 20px;
  border-radius: 20px;
  outline: 0;
  border: 0;
  color: black;
}
@media screen and (max-width: 499px) {
  .headerSmall {
    display: grid;
    grid-template-columns: 1fr;
  }
  .headerSmall .phone {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .headerSmall .phone .button {
    background-color: #00C7E8;
    padding: 10px 20px;
    border-radius: 20px;
    outline: 0;
    border: 0;
    color: black;
    font-size: 1.1rem;
  }
}
@media screen and (min-width: 800px) {
  .headerSmall {
    display: none;
  }
  .headerLarge {
    display: grid;
    grid-template-columns: 1fr 2fr 0.8fr;
  }
  .headerLarge img {
    width: 100%;
  }
  .headerLarge .phone {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .headerLarge .phone .button {
    background-color: #00C7E8;
    padding: 20px;
    border-radius: 20px;
    outline: 0;
    border: 0;
  }
}
nav {
  background-color: #03111F;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-style: normal;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  font-size: 0.8rem;
}
nav div {
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
nav div:hover,
nav div:focus {
  background-color: #00C7E8;
  border-radius: 20px;
  margin: 10px;
}
nav a:hover,
nav a:focus {
  color: white;
  text-decoration: underline;
}