/* @import 'https://fonts.googleapis.com/css?family=Comfortaa:300,700|Bungee+Shade|Josefin+Sans:400';*/

@import url('https://fonts.googleapis.com/css?family=Monoton');
@import url('https://rsms.me/inter/inter.css');
@import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');

@font-face {
 font-family: 'Monoton';
  src: url(http://fonts/monoton/Monoton-Regular.ttf);
}

@font-face {
 font-family: 'Inter';
  src: url(http://fonts/inter/Inter-BlackItalic.woff2);
}

@font-face {
 font-family: 'Oswald';
  src: url(http://fonts/oswald/Oswald-Heavy.ttf);
}



body {
  margin: 0;
  padding: 0;
  background-color: #424242;
  background-image:
    linear-gradient(rgb(0,0,0) .5px, transparent 1px),
    linear-gradient(45deg, rgb(0,0,0) .5px, transparent 1px),
    linear-gradient(rgb(0,0,0) .5px, transparent 1px),
    linear-gradient(45deg, rgb(0,0,0) .5px, transparent 1px);
  background-size: 10% 10%, 10% 10%, 100px 100px, 100px 100px;
  background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
  color: #fff;
  /*font-family: 'Bungee Shade', cursive;*/
  font-family: 'Monoton', cursive;
  font-size: 50px;
  text-align: center;
}

#pp {
    top: -400px;
    position: fixed;
    z-index: 1;
    font-family: 'Inter';
    font-style:  italic;
    font-weight: 900;
    font-display: swap;
    src: url("font-files/Inter-BlackItalic.woff2?v=3.11") format("woff2"),
         url("font-files/Inter-BlackItalic.woff?v=3.11") format("woff");
    color: blue;
    font-size: 200px;
    text-align: center;
    line-height: 0.8;
  }


.dot {
  height: 125px;
  width: 125px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}
#content{
  left: 0px;
  top: 0px;
  position: absolute;
  display: grid;
  /*grid-template-columns: 1fr;*/
  grid-template-rows: minmax(1fr, 500px);
  /*grid-template-columns: repeat(4, 1fr);*/
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 0px;
  width: 100%;
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 900;
  z-index: 3;

}
#content div{
  background-image: linear-gradient(-45deg, black 25%, transparent 25%, transparent 50%, black 50%, black 75%, transparent 75%, transparent);
  background-size: 4px 4px;
  padding: 30px;
  /*justify-self: start;*/
  /*align-self: start;*/
}
#content div:nth-child(even){
  background: #777;
  padding: 30px;
}

.one{
  align-self: end;
  justify-self: start;
}
.two{
  align-self: center;
  justify-self: center;
}
.three{
  align-self: start;
  justify-self: end;
}
.seven{
  align-self: center;
  justify-self: center;
}
.eight{
  align-self: start;
  justify-self: end;
}