* {
      margin: 0;
}
@font-face {
      font-family: Montserrat-ExtraBold;
      src: url('Montserrat-ExtraBold_de.ttf') format('truetype');
}
@font-face {
      font-family: Oswald;  
      src: url('Oswald-Light_de.ttf') format('truetype');
}
body {
      margin: 0; 
      background-color: rgb(7, 15, 37);
}

.grid {
      display: grid;
height: 100vh;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
}

.left_side {
      display: grid;
align-items: center;

}

.right_side {


      display: grid;

align-items: center;

}


#r {

color:rgb(195, 173, 255);

}

.text_left_side { 

margin-right: 10px;
text-align: right;


}

.text_right_side {

font-size: 1.2em;

font-family: Oswald;

position: relative;

}

#holzblock {
width: 400px;
}
.viz {
      color: rgb(187, 177, 235);
}
.sty {
      color: rgb(174, 161, 230);
}
.anim {
      color: rgb(154, 139, 218);
}
.prog {
      color: rgb(145, 129, 216);

}
.lang {
      color: rgb(149, 120, 218);
}
.gameDev {
      color: rgb(211, 8, 119);
}
#overlay_1 {
      position:fixed;
      bottom: 0;
      right: 0;
}
#overlay_2 {
      position: absolute;
margin-left: 10px;
top: 50%;
transform: translate(0, -50%);
}
#picture {
      width: 80%;
border-radius: 5px;
}
#lch {
      line-height: 3.5rem;
      font-size: 2.5em;
      color:rgb(151, 113, 255);
            font-family: Montserrat-ExtraBold;
      }
      #rch {
            margin-top: 11px;
            line-height: 1.6rem;
            z-index: 3;
            }

@media (max-width: 1200px) {
      #lch {
            line-height: 1.9rem;
            font-size: 2.1em;
                  font-family: Montserrat-ExtraBold;
            }
            #rch {
                  margin-top: 11px;
                  line-height: 1.6rem;
                  z-index: 3;
                  }
                  .text_right_side {
                           color:rgb(212, 212, 212);
                           font-size: 1.1em;
                  } 
                  .text_left_side { 
                        margin-right: 5px;
                        text-align: right;
                         }
                  #overlay_2 {
                        position: absolute;
                  margin-left: 5px;
                  top: 50%;
                  transform: translate(0, -50%);
                   }
            #holzblock {
            display: none;
            }
}