@charset "UTF-8";

/* font */

@font-face {
  font-family: hostgrotesk;
  src: 
    url('HostGrotesk-VariableFont_wght.ttf') format('truetype');
  font-weight: 300-800;
  font-style: normal;
}

@font-face {
  font-family: italichostgrotesk;
  src: 
    url('HostGrotesk-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 300-800;
  font-style: italic;
}

/* template */

body {
  background-color: #efefef;
}

/* grid template setup */

#container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr ;
  grid-template-rows: 1px 6fr 3fr 6fr 6fr 1fr;
  grid-gap: 40px;
  padding: 30px;
  width: 800px;
  height: 800px;
  margin: 100px auto 25px auto;
  background-color: #fff;
  box-sizing: border-box;
  outline: 1px solid black;
}

/* section setup */

.a{
  display: grid;
  grid-column: 2 / 4;
  grid-row: 1;
}

.b{
  display: grid;
  grid-column: 1 / 3;
  grid-row: 2;
}

.c{
  display: grid;
  grid-column: 2;
  grid-row: 2;
}

.d{
  display: grid;
  grid-column: 1;
  grid-row: 3;
}

.e{
  display: grid;
  grid-column: 2 / 4;
  grid-row: 3;
}

.f{
  display: grid;
  grid-column: 1;
  grid-row: 4;
}

.g{
  display: grid;
  grid-column: 2;
  grid-row: 4;
}

.h{
  display: grid;
  grid-column: 3;
  grid-row: 4;
}

.i{
  display: grid;
  grid-column: 1;
  grid-row: 5;
}

.j{
  display: grid;
  grid-column: 2;
  grid-row: 5;
}

.k{
  display: grid;
  grid-column: 3;
  grid-row: 5;
}

.l{
  display: grid;
  grid-column: 1;
  grid-row: 6;
}

.m{
  display: grid;
  grid-column: 2;
  grid-row: 6;
}

.n{
  display: grid;
  grid-column: 3;
  grid-row: 6;
}

/* grids within sections */

.b, .c{
  margin-bottom: -50px;
}

.d, .e, .i, .j, .k{
  margin-bottom: +25px;
}

.i, .j{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 3fr;
  grid-gap: 5px;
}



.k{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 15px;
}

/* double column */

.two-col {
  display: grid;
  grid-template-columns: 1fr 5.75fr;
}

/* content alignments */

.centre-align{
  display: flex;
  align-items: center;
} 

/* template */

#container>*{
  font-family: hostgrotesk;
  font-size: 10px;
  line-height: 12px;
  color: #000;
}

#info {
  font-family: hostgrotesk;
  font-size: 20px;
  line-height: normal;
  font-weight: 400;
  color: #333;
  width: 800px;
  margin: 0 auto 100px auto;
}

/* font styling */

.italichostgrotesk{
  font-family: italichostgrotesk;
}

.italicacumin{
  font-family: "acumin-variable", sans-serif;
  font-style: italic;
}

.kitkat{
  font-family: hostgrotesk;
  font-size: 108px;
  font-weight: 800;
  color: #ce2127;
}

.nestle{
  font-family: hostgrotesk;
  font-size: 24px;
  font-weight: 800;
  color: #000;
  vertical-align: 25px;
}

.subheads{
  font-family: hostgrotesk;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  color: #000;
}

.semicondensedlight{
  font-family: "acumin-variable", sans-serif;
  font-variation-settings: "slnt" 0, "wdth" 90, "wght" 300;
}

.semicondensed{
  font-family: "acumin-variable", sans-serif;
  font-variation-settings: "slnt" 0, "wdth" 90, "wght" 400;
}

.condensedlight{
  font-family: "acumin-variable", sans-serif;
  font-variation-settings: "slnt" 0, "wdth" 68, "wght" 300;
}

.condensed{
  font-family: "acumin-variable", sans-serif;
  font-variation-settings: "slnt" 0, "wdth" 68, "wght" 400;
}