:root {
  /* Colours */
  --clr-bg: rgb(53,55,58);
  --clr-bg-outside: rgb(53,55,58);
  --clr-bg-grad: rgb(106,110,116);
  --clr-fg: rgb(223,223,223);
  --clr-fg-brand: rgb(232,146,124);

  /* Viewports and scaling */
  --vp-min: 30rem;
  --vp-max: 240rem;
  --vp-rel: 90%;


  /* Fonts */
  --ff-primary: arial, helvetica, sans-serif;
  
  --fs-base: 0.2rem;

  --fs-300: calc(var(--fs-base)*3);
  --fs-400: calc(var(--fs-base)*4);
  --fs-500: calc(var(--fs-base)*5);
  --fs-900: calc(var(--fs-base)*9);
  --fs-1000: calc(var(--fs-base)*10);
  --fs-1500: calc(var(--fs-base)*15);
}

body {
  display: grid;
  place-content: center;
  background-color: var(--clr-bg-outside,white);
}

h1 {
  font-size: clamp(1.5rem,1.05rem + 1.5vw, 2.4rem);
  padding: 2em 1em 0 1em ;
}

.grid-container {
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-areas:
    'index-logo'
    'index-main'
    'footer'
    'empty';
  background-image: linear-gradient(to bottom right, var(--clr-bg)60%,var(--clr-bg-grad));
}

.grid-item {
  background-color: transparent;
  font-size: var(--fs-400);
  color: var(--clr-fg,white);
  font-family: var(--ff-primary);
}

.grid-item img {
  width: 80%;
  align: center;
  object-fit: cover;
  padding: 1em;
}

.grid-item p {
  padding: clamp(2.67rem,2.325rem + 1.4vw, 4rem) 2rem 2.5rem 2rem;
  font-size: clamp(2rem, 1.75rem + 1.04vw,3rem);
}

.grid-item h1 {
  font-weight: 100;
  letter-spacing: 0.2em;
  font-size: clamp(1rem, 0.75rem + 1.04vw, 2rem);
  padding: 3rem 0 0.5rem 1.5rem;
}

.grid-item:nth-child(1) {
  grid-area: index-logo;
}

.grid-item:nth-child(2) {
  grid-area: index-main;
}

.grid-item:nth-child(3) {
  grid-area: footer;
}

.grid-item:nth-child(4) {
  grid-area: empty;
}

.footer-menu {
  display: flex;
  flex-flow: row nowrap;
  gap: 1em;
  padding: 2rem;
}

.footer-menu-item {
  flex-grow: 1;
  font-size: clamp(0.8rem,0.625rem + 0.73vw,1.5rem);
}

.footer-menu-item:nth-child(1) {
  text-align: left;
}

.footer-menu-item:nth-child(2) {
  text-align: center;
}

.footer-menu-item:nth-child(3) {
  text-align: right;
}

.navigation {
  text-decoration: none;
}

.navigation:link, .navigation:visited {
  color: var(--clr-fg);
}

.navigation:hover {
  color: var(--clr-fg-brand);
  cursor: pointer;
}

.button {
  font-size: 1rem;
  letter-spacing: 0em;
  text-decoration: none;
  background-color: var(--main-font-color,white);
  color: var(--main-bg-grad,black);
  padding: 0.8rem 0.8rem 0.8rem 0.8rem;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
}

.button:hover {
  background-color: var(--clr-fg-brand);
  color: var(--clr-fg,white);
  cursor: pointer;
}

/* Specifics for the 'Contact' site */
.grid-contact-container {
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-areas:
    'contact-main'
    'contact-phone'
    'contact-email'
    'contact-social'
    'footer'
    'empty'
    'left'
    'right';
  background-image: linear-gradient(to bottom right, var(--clr-bg)60%,var(--clr-bg-grad));
}

.grid-contact-item {
  background-color: transparent;
  font-size: var(--fs-400);
  color: var(--clr-fg,white);
  font-family: var(--ff-primary);
}

.grid-contact-item img {
  width: 40%;
  align: center;
  object-fit: cover;
  padding: 1em;
}

#contact-img {
  width: clamp(2rem, 1.5rem + 2.08vw, 4rem);
  margin: auto;
}

#contact-img:hover {
  box-shadow: 0 0 2px 1px var(--clr-fg-brand)
}

.grid-contact-item h1 {
  color: var(--clr-fg-brand);
  font-weight: 200;
  letter-spacing: 0.2em;
  font-size: clamp(2rem, 1.5rem + 2.08vw, 4rem);
  padding: clamp( 1.5rem, 1.125rem + 1.563vw, 3rem) 0 0.5rem 1.5rem;
}

.grid-contact-item p {
  color: var(--clr-fg-brand);
  padding: 0 1.5rem 0.5rem 1.5rem;
  font-size: clamp(0.8rem, 0.55rem + 1.04vw, 1.8rem);
}

#grid-contact-email {
  color: var(--clr-fg-brand);
}

#grid-contact-email:hover {
  color: var(--clr-fg);
}

.grid-contact-item:nth-child(1) {
  grid-area: contact-main;
  text-align: center
}

.grid-contact-item:nth-child(2) {
  grid-area: contact-phone;
}

.grid-contact-item:nth-child(3) {
  grid-area: contact-email;
}

.grid-contact-item:nth-child(4) {
  grid-area: contact-social;
}

.grid-contact-item:nth-child(5) {
  grid-area: footer;
}

.grid-contact-item:nth-child(6) {
  grid-area: empty;
}

.grid-contact-item:nth-child(6) {
  grid-area: left;
}

.grid-contact-item:nth-child(6) {
  grid-area: right;
}


/* Grid layout for the 'About Us' page */
.grid-about-container {
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-areas:
    'about-text'
    'about-image'
    'footer'
    'empty';
/*  background-image: linear-gradient(to bottom right, var(--clr-bg)60%,var(--clr-bg-grad));*/
  min-height: 0px;
}

.grid-about-item {
  background-color: transparent;
  font-size: var(--fs-400);
  color: var(--clr-fg,white);
  font-family: var(--ff-primary);
}

.grid-about-item img {
  width: 100%;
  align: center;
  object-fit: cover;
/*  padding: 1em; */
}

.grid-about-item h1 {
  color: var(--clr-fg-brand);
  font-weight: 200;
  letter-spacing: 0.2em;
  font-size: clamp(2rem, 1.5rem + 2.08vw, 4rem);
  padding: clamp( 1.5rem, 1.125rem + 1.563vw, 3rem) 0 0.5rem 1.5rem;
}

.grid-about-item p {
  padding: 0 1.5rem 0.5rem 1.5rem;
  font-size: clamp(0.8rem, 0.55rem + 1.04vw, 1.8rem);
}

.grid-about-item:nth-child(1) {
  grid-area: about-text;
  color: var(--clr-bg);
  background-color: var(--clr-fg);
}

.grid-about-item:nth-child(2) {
  grid-area: about-image;
}

.grid-about-item:nth-child(3) {
  grid-area: footer;
}

.grid-about-item:nth-child(4) {
  grid-area: empty;
}

.button-about {
  font-size: 1rem;
  letter-spacing: 0em;
  text-decoration: none;
  background-color: var(--clr-fg-brand);
  color: var(--clr-fg);
  padding: 0.8rem 0.8rem 0.8rem 0.8rem;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
}

.button-about:hover {
  background-color: var(--clr-bg-grad);
  color: var(--clr-fg,white);
  cursor: pointer;
}




@media screen and (min-width: 40em) {
  .grid-container {
    grid-template-areas:
      "index-logo index-logo index-logo index-main index-main"
      "footer footer footer empty empty";
  }
   .grid-contact-container {
    grid-template-areas:
      "left contact-main contact-main contact-main right"
      "left contact-phone contact-email contact-social right"
      "left footer footer empty right";
  }
  .grid-about-container {
     grid-template-areas:
      "about-text about-image" 
      "footer empty";
  }
/*  h1 {
    font-size: clamp(1.2rem,0.71rem + 1.8vw, 1.8rem);
    padding: 2em 1em 0 1em ;
  }*/
}