@import url("https://use.typekit.net/hit3fcz.css");

.page-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr; 
}

.typography { 
  font-size: 90% ;
  padding-top: 135px;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
  color: yellow;
}
.ramagothic { 
   padding-top: 60px;
  line-height: 25%;
  font-size: 110%;
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
  color: white;
}
.list { 
  letter-spacing: 1px;
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 3;
   text-align: right;
  margin-right: 100px;
  color: white;
}
.eighteen { 
    font-family: rama-gothic-m, sans-serif;
font-weight: 100%;
font-style: normal;
  font-size: 1000%;
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
  color: white;
}
.alphabet {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 3;
  grid-row-end: 4;
  display: flex;
}
.numbers { 
  font-size: 1300%;
  letter-spacing: 20px;
  text-align: center;
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 4;
  grid-row-end: 5;
  
}

.image {
  grid-column: 3;
  grid-row: 3;
  text-align: right;
}

body {
  font-family: rama-gothic-e, sans-serif;
  font-size: ;
}

.rama {  
  font-family: rama-gothic-e, sans-serif;
 
  line-height: 90%;
font-weight:10;
font-style: normal;
 font-size: 470%;
}

.typo {
  font-family: rama-gothic-m, sans-serif;
font-weight: 700;
font-style: normal;
  font-size: 110%;
}

.yellow1 {
  border: 40px solid yellow;
  border-left: none;
  border-right: none;
  height: 120px;
  color: white;

}


.yellow2 {
  border: 40px solid yellow;
  font-size: 150%;
  border-right: none;
  height: 120px; 
  margin: 0;
  word-spacing: 30px;
  text-align: center;
  color: white;
  
  
   
}



.one {
  font-family: rama-gothic-m, sans-serif;
font-weight: 100;
font-style: normal;
  color: aqua;
}
.two {
  font-family: rama-gothic-m, sans-serif;
font-weight: 300;
font-style: normal;
  color: orange;
}
.three {
  font-family: rama-gothic-m, sans-serif;
font-weight: 400;
font-style: normal;
  color: yellow;
}
.four {
  font-family: rama-gothic-m, sans-serif;
font-weight: 600;
font-style: normal;
  color: green;
}
.five {
  font-family: rama-gothic-m, sans-serif;
font-weight: 700;
font-style: normal;
  color: red;
}
.six {
  font-family: rama-gothic-m, sans-serif;
font-weight: 300;
font-style: normal;
  color: purple;
}
.seven {
  font-family: rama-gothic-m, sans-serif;
font-weight: 100;
font-style: normal;
  color: yellow;
}

.eight {
  font-family: rama-gothic-m, sans-serif;
font-weight: 400;
font-style: normal;
  color: aqua;
}
.nine {
  font-family: rama-gothic-m, sans-serif;
font-weight: 600;
  color: orange;
}
.ten {
  font-family: rama-gothic-m, sans-serif;
font-weight: 700;
font-style: normal;
  font-size: 700;
  color: green;
}

.bold {font-family: rama-gothic-m, sans-serif;
font-weight: 700;
font-style: normal;
  
  
  
}
.heavy {
  font-family: rama-gothic-m, sans-serif;
font-weight: 800;
  font-size: 200%;
font-style: normal;}
.bold2 { font-family: rama-gothic-m, sans-serif; font-weight: 700;font-size: 200%;}
.semibold { font-family: rama-gothic-m, sans-serif; font-size: 200%;font-weight: 600;}
.regular {font-family: rama-gothic-m, sans-serif; font-size: 200%;
font-weight: 500;}
.thin {font-family: rama-gothic-m, sans-serif; font-size: 200%;font-weight: 300;}