/*Stijlsheet voor reflexologiewebsite Leticia*/

/*Definitie van basisvariabelen*/
:root {
  --main-lightgray: #f0f0f0;
  --main-red: #be3144;
  --main-lightblue: #8fbc8f;
  --main-blue: #94b1ee;
}

/* Algemene base reset, anders gebruikt het de bases van de browsers */
* { /* voor alles is de marge en padding O, standaard, tenzij we anders bepalen */
  margin: 0;
    padding: 0;
}

/*Hieronder verkleinen we de grootte van het lettertype, indien de maximum-breedte van de browser kleiner wordt*/
@media (max-width: 75em) {
  html {
    font-size: 60%;
  }
}

@media (max-width: 50em) {
  html {
    font-size: 40%;
  }
}

/* Opzet van de welkomst sectie*/

a {
    text-decoration: none; /* links worden niet onderlijnd en hieronder maken we ze wit */
    color: #003366;
}

/*toewijzen van 'areas' aan klassen om layout te kunnen maken*/
.grid-item1 { grid-area: Persoonlijk; }
.grid-item2 { grid-area: Reflexologie; }
.grid-item3 { grid-area: Geschenk; }
.grid-item4 { grid-area: Afspraak; }
.grid-item5 { grid-area: Logo; }
.grid-item6 { grid-area: Tarieven; }

.grid-container {
  display: grid;
  grid-template-areas: /*maken van grid layout*/
  'Logo Logo'
  'Persoonlijk Reflexologie'
  'Afspraak Reflexologie'
  'Afspraak Tarieven'
  'Afspraak Geschenk';
  grid-column-gap: 1rem;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  }

  .grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 0.5rem 0;
  font-size: 2rem;
  }

  #Overmezelftitel {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.3rem;
  text-align: left;
  margin-left: 0.2rem;
  color: var(--main-lightblue);
  }

  #Overmezelftekst {
  font-family: 'Oswald', sans-serif;
  font-size: 0.8rem;
  margin-top: 0.5rem;
  text-align: left;
  }

  #Openingsurendisclaimer {
  font-family: 'Oswald', sans-serif;
  font-size: 0.8rem;
  margin-top: 1rem;
  text-align: left;
  }

  #disclaimer {
  font-family: 'Oswald', sans-serif;
  font-size: 0.8rem;
  margin-top: 1rem;
  text-align: left;
  }

  #Reflexologietitel {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.3rem;
  text-align: left;
  margin-left: 0.2rem;
  color: var(--main-lightblue);
  }

  #Reflexologietekst {
  font-family: 'Oswald', sans-serif;
  font-size: 0.8rem;
  margin-top: 0.5rem;
  text-align: left;
  }

  .Reflexologieoplijsting {
  list-style-position: inside; /*oplossing voor CSS-issue met oplijsting*/
  font-family: 'Oswald', sans-serif;
  font-size: 0.8rem;
  text-align: left;
  }

  .Reflexologielijst {
  padding: 0.5rem 0.5rem;
  }

  .logo {
  width:39.0rem;
  height:30rem; /* Ratio 1.3 */
  }

  .bevologo {
  width:9.5rem;
  height:5rem; /* Ratio 1.9 */
  }

  #Afspraaktitel, #Tarieftitel {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.3rem;
  text-align: left;
  margin-left: 0.2rem;
  color: var(--main-lightblue);
  }

  #Afspraaktekst, #Tarieftekst {
  font-family: 'Oswald', sans-serif;
  font-size: 0.8rem;
  margin-top: 0.5rem;
  text-align: left;
  }
  
  #Geschenktitel {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.3rem;
  text-align: left;
  margin-left: 0.2rem;
  color: var(--main-lightblue);
  }

  #Geschenktekst {
  font-family: 'Oswald', sans-serif;
  font-size: 0.8rem;
  margin-top: 0.5rem;
  text-align: left;
  }

  #Openingsurentitel {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.3rem;
  text-align: left;
  margin-left: 0.2rem;
  color: var(--main-lightblue);
  padding-bottom: 0.1rem;
  }

  table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  font-size: 1rem;
  }

  th {
  padding: 0.1rem;
  }

  td {
  padding: 0.1rem;
  }

  #Openingsurentabel {
  width: 50%;
  }

  .contactbuttons {
  padding: 0.5rem 0.5rem;
  display: inline-block;
  font-size: 0.8rem;
  }