#layout {
    /*border: 1px solid black;*/
    position: relative; /*danach absolute*/
    margin: 0 auto;
    width:900px;
    height:800px;
    display: grid;
    grid-template-rows: 200px 400px 200px;
    grid-template-columns: 200px 250px 250px 200px;
    grid-template-areas:
        ' deco_edge_left     headline                headline          deco_edge_right '
        ' deco_side_left     game_space            game_space          deco_side_right '
        ' deco_bottom_left  deco_bottom_left    deco_bottom_right    deco_bottom_right ';      
}



.deco_edge_left {
    /* border: 1px solid black; */
    background: rgb(246, 122, 165);
    grid-area: deco_edge_left;
}

.headline {
    /*grid-row-start: 1; 
    grid-row-end: 2; 
    grid-column-start: 2; 
    grid-column-end: 4;*/
    /* border-bottom: 1px solid black ;
    border-top: 1px solid black ; */
    border-left: 4px dotted yellow ;
    border-right: 4px dotted yellow ; 
    /*border: 1px solid black;*/
    background: rgb(246, 122, 165);
    grid-area: headline;
}

.deco_edge_right {
    /* border: 1px solid black; */
    background: rgb(246, 122, 165);
    grid-area: deco_edge_right;
}

.deco_side_left {
    /* border: 1px solid black; */
    background: rgb(246, 122, 165);
    grid-area: deco_side_left;
}

.game_space {
    /*grid-row-start: 2; 
    grid-row-end: 3; 
    grid-column-start: 2; 
    grid-column-end: 4;*/
    border: 2px solid black;
    box-shadow: 4px 4px 5px 1px black; 
    background: rgb(163, 40, 163);
    grid-area: game_space;
}

.deco_side_right {
    /* border: 1px solid black; */
    background: rgb(246, 122, 165);
    grid-area: deco_side_right;
}

.deco_bottom_left {
    /*grid-row-start: 3; 
    grid-row-end: 4; 
    grid-column-start: 1; 
    grid-column-end: 3;*/
    border-top: 4px solid black;
    background: rgb(246, 122, 165);
    grid-area: deco_bottom_left;
}

.deco_bottom_right {
    /*grid-row-start: 3; 
    grid-row-end: 4; 
    grid-column-start: 3; 
    grid-column-end: 5;*/
    border-top: 4px solid black;
    background: rgb(246, 122, 165);
    grid-area: deco_bottom_right;
}




@font-face {
    font-family: 'catFont';
    src: url(../fonts/CatsHandwriting.ttf);
}

@font-face {
    font-family: 'catPaws';
    src: url(../fonts/CatPaw.ttf);
}



#start_button {
    position: absolute;
    left: 410px;
    top: 470px;
    background: #998675;
    border: 1px solid black;
    padding: 2px 15px;
    padding-bottom: 0;
    font-family: 'catFont';
    font-size: 25px;
    border-radius: 12px;
}

#move_button {
    position: absolute;
    left: 250px;
    top: 350px; 
    background: #998675; 
    border: 1px solid black;
    padding: 2px 15px;
    padding-bottom: 0;
    font-family: 'catFont';
    font-size: 25px;
    border-radius: 12px;
} 



#pet_the_cat_button span {
    position: absolute;
    left: 428px;
    top: 350px;
    width: 73px;
    height: 215px;
    background: green;
    border: 1px solid black;
    border-radius: 30px;
    opacity: 0;
}


#licht_button {
    position: absolute;
    left: 651px;
    top: 396px; 
    background: rgba(249 , 255 , 175 , 0.5);
    border: 1px solid rgba(249 , 255 , 175 , 0.8);
    padding: 5px 2px;
    padding-bottom: 0;
    font-family: 'catFont';
    color: rgba(249 , 255 , 175 , 0.1); /* noch unsichtbar machen? bzw ohne Buchstaben rahmen erzeugen?*/
    font-size: 8px;
    border-radius:2px;
} 



h1 {
    font-family: 'catPaws';
    font-size: 80px;
    text-align: center;
    padding-top: 25px;
    margin: 0;
    /* color: rgb(38, 0, 0); */
    color: yellow;
    text-shadow: 2px 2px 2px black;  
}





/* muss UNTER normalem layout stehen, damit es nicht immer überschrieben wird, responsive Design */
@media (max-width: 900px) {
    #layout {position:relative; display: flex; flex-direction:column; margin: 0 auto; width: 500px; height: 700px;}
    .headline {width: 500px; height: 200px;}
    .game_space {width: 500px; height: 400px;}
    #start_button {position: absolute; left: 220px; top: 470px;}
    #move_button {position: absolute; left: 60px; top: 350px;}
    #pet_the_cat_button {position: absolute; left: 230px; top: 350px; width: 73px;
        height: 215px; opacity:0;}
    #licht_button {position: absolute; left: 455px; top: 398px; opacity:0;}
    /* #text_1 {position: absolute; left: 60px; top: 350px;}
    #text_2 {position: absolute; left: 60px; top: 400px;}
    #text_3 {position: absolute; left: 350px; top: 250px;} */
    .deco_edge_left {display:none;}
    .deco_edge_right {display:none;}
    .deco_side_left {display:none;}
    .deco_side_right {display:none;}
    .deco_bottom_left {display:none;}
    .deco_bottom_right {display:none;}
    }