/*
@font-face {
    font-family: 'pixel_operator_monoregular';
    src: url('pixeloperatormono-webfont.woff2') format('woff2'),
         url('pixeloperatormono-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'pixel_operator_mono_8regular';
    src: url('pixeloperatormono8-webfont.woff2') format('woff2'),
         url('pixeloperatormono8-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'pixel_operator_mono_8bold';
    src: url('pixeloperatormono8-bold-webfont.woff2') format('woff2'),
         url('pixeloperatormono8-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'pixel_operator_monobold';
    src: url('pixeloperatormono-bold-webfont.woff2') format('woff2'),
         url('pixeloperatormono-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
*/
body {
    font-family: pixel_operator_monoregular;
    background-color: lightgray;
    color: blue;
}

.header {
    background-color: lightslategrey;
}

h1 {
    font-family: pixel_operator_monobold;

}

.wrapper {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 10px;
    background-color: #2196F3;
    padding: 10px;
}
  
.wrapper > div {
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 20px 0;
    font-size: 30px;
}
  
#item1 {
    grid-column-start: 2;
    grid-column-end: 3;
}