@font-face {
  src: url("../font/roboto_flex/RobotoFlex-VariableFont.ttf");
  font-family: robotoflex-variable;
}
@font-face {
  src: url("../font/raleway/Raleway-VariableFont_wght.ttf");
  font-family: raleway-variable;
}
@font-face {
  src: url("../font/raleway/Raleway-Italic-VariableFont_wght.ttf");
  font-family: ralewayitalic-variable;
}
/* UNIVERSAL */
* {
  font: 300 1.2rem robotoflex-variable;
  color: #000;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #000;
  width: 100%;
}
/* HEADINGS */
h1 {
  font: small-caps 300 3.2rem raleway-variable;
  text-decoration: #efbf04 underline 2.5%;
  text-underline-offset: 0.5rem;
  color: #fff;
  text-align: center;
  margin: 2%;
}
h2 {
  font: small-caps 300 2.5rem raleway-variable;
  font-stretch: expanded;
  text-align: center;
  margin: 2%;
}
h3 {
  font: small-caps 400 2rem robotoflex-variable;
  text-align: center;
  margin: 2%;
}
h4 {
  font: small-caps 1.7rem robotoflex-Variable;
  text-align: center;
  margin: 2%;
}
#wrapper {
  max-width: 1600px;
  min-height: 100vh;
  margin: 0 auto;
  background-color: #fff;
  /* Primary Grid */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows:
    200px
    80px
    minmax(550px, auto)
    minmax(100px, auto);
  grid-template-areas:
    "banner"
    "menu"
    "content"
    "footer";
}
/* HEADER */
.skip-link {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: static;
  width: auto;
  height: auto;
}

header {
  grid-area: banner;
  max-width: 100%;
  background-color: #000;
  border-top: solid 0.1rem #efbf04;
  border-right: solid 0.1rem #efbf04;
  border-left: solid 0.1rem #efbf04;
  display: grid;
  grid-template-columns: 15% auto 25%;
  grid-template-rows: 1fr;
  grid-template-areas: "logo title booking";
}
#logo {
  grid-area: logo;
  margin: 0 auto;
}
#title {
  grid-area: title;
  align-items: center;
  align-content: center;
  text-align: center;
}
#title p,
#title-f p {
  font-style: italic;
  color: #fff;
  text-align: center;
}
header a:hover h1 {
  color: #efbf04;
}
#booking {
  grid-area: booking;
  display: flex;
  justify-content: center;
  align-items: center;
}
a.book-btn {
  height: 40%;
  width: 80%;
  border-radius: 100px;
  background-color: #000;
  border: 0.4rem #efbf04 solid;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
a.book-btn p {
  text-align: center;
  font: small-caps 500 1.8rem robotoflex-variable;
  color: #fff;
}
a.book-btn:hover {
  background-color: #fff;
  color: #000;
}
a.book-btn:hover p {
  color: #000;
}
/* MENU */
nav {
  grid-area: menu;
  width: 100%;
  background-color: #000;
  border: solid 0.1rem #efbf04;
}
nav ul {
  list-style-type: none;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
}
nav ul li a {
  font: small-caps 400 2.7rem robotoflex-variable;
  font-stretch: expanded;
  color: #fff;
  text-decoration: none;
  display: block;
  padding: 0.5rem;
}
nav ul a:hover {
  color: #efbf04;
  text-decoration: underline;
}

/* INDEX MAIN */
main#index-main {
  grid-area: content;
  max-width: 100%;
  border-top: solid 0.1rem #efbf04;
  border-right: solid 0.1rem #efbf04;
  border-left: solid 0.1rem #efbf04;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  grid-template-areas: "index-a1 index-a1 index-aside";
}
article#index-a1 {
  grid-area: index-a1;
}
#index-a1 h3 {
  font-style: italic;
}
#index-a1 picture img {
  justify-self: center;
  align-self: center;
  display: flex;
  box-shadow: rgba(0, 0, 0, 0.2) 1px 0px 20px 10px;
}
aside#index-aside {
  grid-area: index-aside;
  margin: 5% 5%;
}
aside#index-aside section,
#index-aside ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-around;
  height: fit-content;
  width: fit-content;
  list-style: none;
  text-align: center;
  border: 0.4rem #efbf04 solid;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 5px 15px;
  padding: 1rem;
}
#index-aside section li a {
  text-decoration: none;
}
#index-aside section li a:hover h3 {
  color: #efbf04;
  text-decoration: underline;
}
#index-aside ul {
  justify-self: center;
  margin-top: 5%;
}
#index-aside ul li {
  padding: 2%;
}
#index-aside ul p,
#index-a1 p {
  font-style: italic;
  text-align: center;
}

/* JEWELLERY */
#jewellery-main {
  grid-area: content;
  max-width: 100%;
  border-top: solid 0.1rem #efbf04;
  border-right: solid 0.1rem #efbf04;
  border-left: solid 0.1rem #efbf04;
  padding: 1%;
}
section#jewellery h3 {
  margin: 2%;
}
section#jewellery section {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}
section#jewellery h4 {
  flex-basis: 40%;
}
section#earrings,
section#body {
  margin: 1rem;
  border-top: solid 2px #000;
  border-bottom: solid 2px #000;
}
section picture img {
  box-shadow: rgba(0, 0, 0, 0.2) 1px 0px 20px 10px;
}

/* ABOUT US */
main#about-main {
  grid-area: content;
  max-width: 100%;
  border: solid 0.1rem #efbf04;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../img/rose-gold-01.jpg");
  display: grid;
  grid-template-columns: 40% 60%;
  grid-template-rows: repeat(1, 2fr);
  grid-template-areas:
    "mission mission"
    "about-aside about-article ";
}
aside#mission {
  grid-area: mission;
  margin: 1%;
}
section#mission {
  justify-self: center;
  width: 100%;
  height: 100%;
  padding: 0.5rem;
  text-align: center;
  border: 0.5rem #efbf04 solid;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 5px 15px;
}
section#mission h2 {
  margin: 0;
}
aside#statement p {
  font-size: 1.5rem;
}
#about-article {
  grid-area: about-article;
  justify-self: center;
  margin: 0.5%;
}
#about-article p {
  margin: 1rem;
}
#about-aside {
  grid-area: about-aside;
  justify-self: center;
  margin: auto;
  text-align: center;
}
#about-aside picture img {
  box-shadow: rgba(0, 0, 0, 0.2) 1px 0px 20px 10px;
}

/* SERVICES */
main#services-main {
  grid-area: content;
  max-width: 100%;
  border: solid 0.1rem #efbf04;
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-rows:
    3%
    1fr
    auto;
  grid-template-areas:
    "h2 h2"
    "pierce1 guide"
    "pierce2 pierce2 ";
}
main#services-main section#h2 {
  grid-area: h2;
}
article#pierce1 {
  grid-area: pierce1;
}
main#services-main h4 {
  text-align: left;
}
table {
  margin-bottom: 1rem;
  width: 100%;
  align-items: center;
  border-collapse: separate;
  border-spacing: 0;
}
th h3 {
  margin-top: 1.2rem;
}
th {
  padding: 0.5rem;
  border-left: solid 1px #000;
  box-shadow: rgba(0, 0, 0, 0.4) 0 3px 0;
  border-bottom: solid 1px #000;
  font: small-caps 1.4rem robotoflex-Variable;
  text-align: left;
}
td {
  width: 20%;
  padding: 0.5rem;
}
td.p1 {
  font-size: 1.5rem;
  font-variant: small-caps;
  border-bottom: solid 1px #000;
}
table tr.last td {
  border-bottom: solid 1px #000;
  border-top: solid 1px #000;
}
table td:nth-child(1),
table td:nth-child(3) {
  border-left: solid 1px #000;
}
article#guide {
  grid-area: guide;
  padding: 0 4%;
}
aside#pierce2 {
  grid-area: pierce2;
}
#age h3 {
  margin: auto;
  width: 30%;
  box-shadow: rgba(0, 0, 0, 0.4) 0 3px 0;
  border-bottom: solid 1px #000;
}
#p2-aside {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
#maintenance {
  display: flex;
  flex-direction: column;
  flex: 1;
}
#consult {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* BOOKINGS/FORM */
#bookings-main {
  grid-area: content;
  max-width: 100%;
  border-top: solid 0.1rem #efbf04;
  border-right: solid 0.1rem #efbf04;
  border-left: solid 0.1rem #efbf04;
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-rows: 1fr;
  grid-template-areas: "form enquiry";
}
main#bookings-main article#form {
  grid-area: form;
  align-content: center;
}
#theForm {
  width: 90%;
  height: fit-content;
  margin: 4% auto;
  padding: 1rem;
  border: 0.5rem #efbf04 solid;
  box-shadow: rgba(0, 0, 0, 0.2) 1px 0 20px 10px;
}
#theForm fieldset {
  border: solid 2px #000;
  box-shadow: rgba(0, 0, 0, 0.2) 1px 0 20px 10px;
  background-color: rgba(0, 0, 0, 10%);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
fieldset section {
  clear: both;
  padding-top: 4%;
}
section.two label {
  font-weight: 300;
  float: left;
  width: fit-content;
  text-align: right;
  position: relative;
  padding-right: 10px;
  display: inline;
  margin: 0.5rem 0;
}
section.two input {
  width: 75%;
  text-align: left;
  padding: 1%;
  float: right;
  border: solid 2px #000;
  border-radius: 10px;
  resize: vertical;
}
section.two input:focus,
textarea#enquiries:focus {
  border: solid 4px #000;
}
section.enquiries label {
  display: block;
}
textarea {
  width: 100%;
  border: solid 2px #000;
  border-radius: 10px;
}
section.enquiries p {
  font: italic 300 1.2rem ralewayitalic-variable;
}
section.one {
  text-align: center;
}
#submit {
  clear: both;
  width: 30%;
  height: 15%;
  text-align: center;
  font-size: 1.5rem;
  color: #fff;
  background-color: #000;
  margin: 1% auto 0 auto;
  border-radius: 100px;
  padding: 12px 20px;
}
#submit:hover {
  outline: 0.5rem solid #efbf04;
}
.tooltip {
  display: block;
  visibility: hidden;
  position: absolute;
  left: 10rem;
  bottom: 170%;
  width: 15rem;
  border-radius: 20px;
  background-color: rgb(0, 0, 0);
  font: italic 300 1.3rem ralewayitalic-variable;
  text-align: center;
  text-decoration: underline red 2px;
  outline: 4px solid #efbf04;
  color: #fff;
}
.error {
  color: #d92525;
}
.valid {
  color: #88a61b;
}
span.error {
  padding-left: 10px;
}
input#submit {
  width: 30%;
  height: 15%;
  text-align: center;
  font-size: 1.5rem;
  color: #fff;
  background-color: #000;
  margin: 1% auto 0 auto;
  border-radius: 100px;
}
main#bookings-main aside {
  padding: 1%;
  grid-area: enquiry;
  align-content: center;
  margin: auto;
}
section#disclaimer p {
  margin: auto;
}
section#rules p,
#disclaimer h4 {
  text-align: center;
  font-weight: 500;
  margin: 2%;
}
#map {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
}
iframe.responsive {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
/* END OF BOOKINGS/FORM */

/* ERROR */
main#error-main {
  grid-area: content;
  max-width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../img/rose-gold-01.jpg");
  display: grid;
  grid-template-columns: 40% auto;
  grid-template-rows: 1fr;
  grid-template-areas: "error1" "error2";
}
article#error1 {
  grid-area: error1;
  height: 70%;
  width: 80%;
  margin: auto;
  align-content: center;
  text-align: center;
  border: 0.5rem #efbf04 solid;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 5px 15px;
  padding: 1rem;
}
aside#error2 {
  grid-area: error2;
}
main#error-main h1 {
  color: #000;
  text-decoration: none;
  font-weight: 500;
}
main#error-main h2 {
  font-size: 3.5rem;
}
/* FOOTER */
footer {
  grid-area: footer;
  background-color: #000;
  width: 100%;
  border: solid 2px #efbf04;
  display: grid;
  grid-template-columns: 20% auto 20% fit-content(200px) 5%;
  grid-template-areas: "sitemap title policies flogo socials";
}
#sitemap {
  grid-area: sitemap;
  margin: auto;
}
#sitemap ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
#sitemap ul a,
#sitemap p,
#policies p {
  text-decoration: none;
  text-align: center;
  font: small-caps 400 1.7rem robotoflex-variable;
  font-stretch: expanded;
  color: #fff;
  padding: 0.5rem;
}
#sitemap ul a:hover {
  text-decoration: underline;
  color: #efbf04;
}
#title-f {
  grid-area: title;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
#title-f a:hover h1 {
  color: #efbf04;
}
#title-f a h1 {
  margin: 0;
}
#policies {
  grid-area: policies;
  margin: auto;
}
#flogo {
  grid-area: flogo;
  margin: auto;
}
#socials {
  grid-area: socials;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: auto;
}

/* LAPTOP / 1300PX */
@media screen and (max-width: 1300px) {
  * {
    font-size: 1.1rem;
  }
  h1 {
    font-size: 2.5rem;
  }
  h2 {
    font-size: 2rem;
  }
  h3 {
    font-size: 1.7rem;
    margin: 1%;
  }
  #wrapper {
    grid-template-rows:
      160px
      65px
      minmax(400px, auto)
      minmax(160px, auto);
  }
  #title p {
    font-size: 0.8rem;
  }
  a.book-btn {
    border-width: 0.3rem;
  }
  a.book-btn p {
    font-size: 1.5rem;
  }
  nav ul li a {
    font-size: 2rem;
  }
  /* HOME */
  main#index-main {
    grid-template-columns: 60% 0 40%;
  }
  #index-a1 picture img {
    margin: 0 auto;
  }
  aside#index-aside section,
  #index-aside ul {
    padding: 0.5rem;
  }
  /* ABOUT */
  main#about-main {
    background-image: url("../img/rose-gold-02.jpg");
  }
  /* SERVICES */
  main#services-main h2 {
    margin: 0 35%;
  }
  main#services-main h4 {
    font-size: 1.2rem;
  }
  /* ERROR */
  main#error-main {
    background-image: url("../img/rose-gold-02.jpg");
  }
  #title-f {
    font-size: 2.5rem;
  }
  #sitemap ul a,
  #sitemap p,
  #policies p {
    font-size: 1.5rem;
  }
}
/* MOBILE / 600px */
@media screen and (max-width: 600px) {
  h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.8rem;
  }
  h3 {
    font-size: 1.5rem;
  }
  h4 {
    font-size: 1.2rem;
  }
  #wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows:
      100px
      minmax(80px, auto)
      minmax(300px, auto)
      minmax(min-content, 200px);
  }
  /* HEADER */
  header {
    grid-template-columns: 17% auto 30%;
  }
  #title {
    margin: auto;
  }
  #title p {
    display: none;
  }
  a.book-btn {
    width: 80%;
    height: 60%;
    margin: 0 5%;
    border-width: 0.2rem;
  }
  a.book-btn p {
    font-size: 1.1rem;
    text-align: center;
  }
  /* NAV */
  nav ul {
    flex-wrap: wrap;
  }
  nav ul li a {
    font-size: 1.6rem;
  }
  /* INDEX-MAIN */
  main#index-main {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 80%;
    grid-template-areas:
      "index-a1"
      "index-aside";
  }
  #index-a1 picture img {
    display: none;
  }
  #index-aside h3 {
    text-decoration: underline;
  }
  aside#index-aside section,
  #index-aside ul {
    border-width: 0.2rem;
  }
  aside#index-aside ul li {
    font-size: 1.4rem;
  }

  /* JEWELLERY-MAIN */
  section#jewellery section {
    justify-content: center;
  }
  section#jewellery h4 {
    flex-basis: 100%;
    display: block;
    margin: 1%;
  }
  /* ABOUT-MAIN */
  main#about-main {
    grid-area: content;
    background-image: url("../img/rose-gold-04.png");
    background-size: auto;
    display: block;
  }
  #about-article br {
    display: none;
  }
  section#about1 {
    display: none;
  }
  /* SERVICES-MAIN */
  main#services-main {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows:
      2%
      1fr
      auto;
  }
  main#services-main h2 {
    margin: 0 auto;
  }
  article#guide {
    display: none;
  }
  /* BOOKING-MAIN */
  #bookings-main {
    display: flex;
    flex-direction: column;
  }
  #theForm {
    margin: 0 auto;
    padding: 2px;
    border: 0.3rem #efbf04 solid;
  }
  #theForm fieldset {
    padding: 0.5rem;
  }
  fieldset section {
    padding: 0;
  }
  section.enquiries p {
    font-size: 1rem;
  }
  /* error-MAIN */
  main#error-main {
    grid-area: content;
    background-image: url("../img/rose-gold-04.png");
    background-size: auto;
    display: block;
  }
  /* FOOTER */
  footer {
    grid-template-columns: 1fr;
    grid-template-rows: auto 20% 10% 100px;
    /* 50%
      15%
      15%
      auto; */
    grid-template-areas: "sitemap" "policies" "socials" "flogo";
  }
  #title-f {
    display: none;
  }
  #sitemap ul a,
  #sitemap p,
  #policies ul a,
  #policies p {
    font-size: 1.6rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 0;
  }
  #sitemap ul {
    align-items: center;
    margin: 5%;
  }
  #socials {
    flex-direction: row;
    justify-content: space-evenly;
    margin: 0;
  }
}