@font-face {
  font-family: 'NotoSans-Regular';
  src: url('NotoSans-Regular.woff2') format('woff2');
}

body {
  background-color: black;
  color: red;
    font-family: 'NotoSans-Regular', sans-serif;

}

img {
  max-width: 100%;
  height: auto;
}

a:link {
  color: rgb(0, 255, 0);
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: rgb(255, 0, 225);
  background-color: transparent;
  text-decoration: none;
}

.header {

display: grid;
grid-template-columns: 1fr, 1fr, 1fr, 1fr, 1fr, 1fr, 1fr, 1fr, 1fr, 1fr, 1fr;
grid-template-rows: 1fr, 1fr, 1fr, 1fr, 1fr, 1fr, 1fr, 1fr, 1fr, 1fr, 1fr;
}


.headerlogo {
grid-column-start: 1;
grid-row-start: 1 ;
grid-row-end: 5;

align-self: center;
justify-self: center;

}

.headertext {
grid-column-start: 2;
grid-row-start: 2;
grid-row-end: 3;
}

.Lorem {

display: grid;
grid-template-columns: repeat(auto-fit, minmax(20px,1fr));
gap: 10px;

}

.container{
  display: grid;

}

.container__box{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px,1fr));

  gap: 5px;
}

.container .container__box .box{
  background: #1c0000;
  text-align: center;
  padding: 5px 5px;
}


/*  comments here

.something {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px,1fr));
  grid-template-rows: 12, 1fr;

} 

*/