@font-face {
    font-family: 'cmu_typewriter_text_variablMd';
    src: url('cmunvt-webfont.eot');
    src: url('cmunvt-webfont.eot?#iefix') format('embedded-opentype'),
         url('cmunvt-webfont.woff2') format('woff2'),
         url('cmunvt-webfont.woff') format('woff'),
         url('cmunvt-webfont.ttf') format('truetype'),
         url('cmunvt-webfont.svg#cmu_typewriter_text_variablMd') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'cmu_serifbold';
    src: url('cmunbx-webfont.eot');
    src: url('cmunbx-webfont.eot?#iefix') format('embedded-opentype'),
         url('cmunbx-webfont.woff2') format('woff2'),
         url('cmunbx-webfont.woff') format('woff'),
         url('cmunbx-webfont.ttf') format('truetype'),
         url('cmunbx-webfont.svg#cmu_serifbold') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'bug-regular-webfont';
    src:
         url('fonts/bug-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'bekso-webfont';
    src:
         url('fonts/bekso-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'knight_playground_regular-webfont';
    src:
         url('fonts/knight_playground_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'bug-regular-webfont';
    src:
         url('fonts/bug-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'mf.shaker-14inches-webfont';
    src:
         url('fonts/mf.shaker-14inches-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'pk_geraet-regular-webfont';
    src:
         url('fonts/pk_geraet-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'write_me_regular-webfont';
    src:
         url('fonts/write_me_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'x-treme-core-webfont';
    src:
         url('fonts/x-treme-core-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


body {
    background-color: black;
    color: white;
    font-size: 16pt;
    border: 5px;
    margin: auto;
    padding: 15px;
    /*font-family: "Xanh Mono", monospace; */
    font-family: 'cmu_typewriter_text_variablMd';
}

#posterBG {
    background-color: white;
}

.bekso{
    font-family: 'bekso-webfont';
    font-size: 17pt;
    -webkit-user-modify: read-write;
    z-index: 1000;
}

.bug{
    font-family: 'bug-regular-webfont';
    font-size: 45pt;
    -webkit-user-modify: read-write;
}

.mfshaker{
    font-family: 'mf.shaker-14inches-webfont';
    font-size: 75pt;
    -webkit-user-modify: read-write;
}

.pkgeraet{
    font-family: 'pk_geraet-regular-webfont';
    font-size: 75pt;
    -webkit-user-modify: read-write;
}

.writeme{
    font-family: 'write_me_regular-webfont';
    font-size: 65pt;
    -webkit-user-modify: read-write;
}

.xtreme{
    font-family: 'x-treme-core-webfont';
    font-size: 65pt;
    -webkit-user-modify: read-write;
}

.knight_playground_regular-webfont {
     font-family: 'knight_playground_regular-webfont';
    font-size: 68pt;
    letter-spacing: 13px;
    -webkit-user-modify: read-write;
}

.font {
    filter: invert(100);
    max-width: 50%;
    z-index: -4000;

}

.blue {
    color: white;
    background-color: blue;
    font-family: 'cmu_typewriter_text_variablMd';
}

pre {
    color: white;
    text-align: left;
    font-family: 'cmu_typewriter_text_variablMd';
}

p {
    color:white;
    font-family: 'cmu_typewriter_text_variablMd';
}

.highlight2 {
    color: black;
    font-family: 'cmu_serifbold';
    font-size: 16pt;
    text-align: center;
    /*-webkit-user-modify: read-write;*/
}

.highlight {
    color: white;
    font-family: 'cmu_serifbold';
    font-size: 20pt;
}

details {
  border: none;
  cursor: pointer;
  color: black;
}

summary {
    line-height: 0;
}

.fontnames {
    font-size: 90pt;
    line-height: 0pt;
    font-family: 'cmu_typewriter_text_variablMd';
    font-weight: 100;
    color: white;
}

#bar {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
}

#header2 {
    max-height: 300px;          
    align-items: left;     
    padding: 0px; 
    margin: 20px;
    background-color: white;
    
    border: 1px solid black;
    border-radius: 40px;
}

#info {
    font-size: 16pt;
}

#banner {
    width: 30%;
    max-height:300px;
    filter: invert(100%);
}

.main {
    display: flex;  
}

.textbox {
    /*background-image: url(pattern.svg);*/
    color: black;
    margin-right: auto;  
    padding: 15px;         
    border: 10px;
    margin: 0;
    font-size: 16pt;
    max-width: 60%;
}

.textbox2 {
    color: white;
    display: flex;           
    margin-left: auto;
    padding: 15px;         
    border: 10px;
    width: 30%;
    font-size: 16pt;
}

@keyframes mymove {
    0% {opacity: 0%}
  50% {opacity: 100%}
    100% {opacity: 0%}
}

footer7 {
    padding: 0px;         
    border: 0px;
    min-width: 20%;
    min-height: 30%;
    font-size: 16pt;
    position: absolute;
    background-image: url(pattern.svg);
    background-blend-mode: screen;
    background-size: auto;
    animation: mymove 5s infinite;
   
}

footer {
    font-size: 16pt;
}


.image-grid-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 30px;
        }

        @media (min-width: 768px) {
            .image-grid-container {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        .image-grid-container img {
            width: 100%;
            height: auto; 
            display: block;
        }