@import url('https://fonts.googleapis.com/css2?family=Libre+Barcode+39&family=Montserrat:wght@100;300;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Barcode+39&family=Montserrat:wght@100;300;500;700&family=Noto+Sans+JP:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@200&family=Libre+Barcode+39&family=Montserrat:wght@100;300;500;700&family=Noto+Sans+JP:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Flow+Block&family=Montserrat:wght@100;300;500;700&family=Noto+Sans+JP:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gamja+Flower&family=Montserrat:wght@100;300;500;700&family=Noto+Sans+JP:wght@100&display=swap');
/* Reset */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

body {
    height: max-content;
    padding: 5px;

    /* background-color: red; */
}
/* Grid */

#app {
    display: grid;

    /* outline: 1px solid black; */
    padding: 2px;
    
    /* display: block; */

    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 200px minmax(400px, max-content) minmax(180px, max-content);
    grid-gap: 3px;

    /* background-color: red; */
    height: max-content;
    font-family: 'IBM Plex Mono', monospace;
}  

#meta {
   /* outline: 1px solid black; */

   position: absolute;

   right: 0;
   margin-top: 55px;
   margin-right: 5.7rem;
   width: 60px;

}

.meta-section {
    display: flex;

    flex-direction: column;
    align-items: center;
     /* outline: 1px solid red; */
}


.meta-section > img {
    height: 70px;
    width: 70px;

    /* outline: 1px solid red; */
}

.meta-section__light {
    font-family: 'Noto Sans JP', sans-serif;

    /* outline: 1px solid blue; */


}

.meta-section > span {
    font-size: 2rem;
}


.meta-elements{
    text-align: center;
    /* outline: 1px solid red; */
    margin-top: 1.3rem;
}
.meta-elements > span {
    /* outline: 1px solid red; */
    
    font-size: 1.8rem;
    font-weight: bold;
    font-family: 'Gamja Flower', cursive;

}



#header {
    grid-row: 1 / 2;
    grid-column: 2 / 12;
    display: flex;
    flex-direction: column;
    justify-content: end;

    /* font-family: 'Flow Block', cursive;; */
    /* outline: 1px solid black; */
}

#header > section > img 
{
    display: block;
    height: 70px;
    width: 80px;

    /* outline: 1px solid green; */
}

#header > span {
    width: max-content;
    /* outline: 1px solid red; */
    font-size: 0.9rem;
}

#header > h1, h2 {
    font-weight: bolder;
    font-size: 1.4rem;
    /* outline: 1px solid black; */
    width: max-content;
}

#main {

    /* outline: 1px solid black; */
    grid-row: 2 / 3;
    grid-column: 2/ 12;

    display: grid;
    grid-template-rows: min-content minmax(auto, max-content) auto;
}

.main-hero {
    min-height: max-content;
}
.main-hero > p  {
    display: inline-block;
    width: 80rem;
    height: min-content;
    margin-top: 4rem;
    font-size: 6rem;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: bolder;
    
    /* outline: 1px solid red; */
}

.main-misc {
    background-color: #2a769a;
}



#footer {
    padding: 5px;
    /* outline: 1px solid blue; */
    grid-row: 3 / -1;
    grid-column: 2 / 12;


    display: grid;
    place-items: flex-end;
}

.org-footer-label {
    font-family: 'Libre Barcode 39', cursive;
    font-size: 3rem;
}

#footer > section {
    /* outline: 1px solid red; */
    height: 100px;

}

.kunst-attribute {
    /* outline: 1px solid gold; */
    padding: 10px;
}

.musik {
    margin-top: 2rem;
    height: 50px;
    width: 50px;

    display: flex;
}




#element {

    /* outline: 1px solid green; */
    display: block;

    position: absolute;

    height: 10px;
    border-radius: 50%;
    width: 10px;
    /* z-index: 5; */
}




.kunst {
    /* outline: 1px solid blue; */
    padding: 5px;

    display: flex;
    align-items: flex-end;

}

.kunst-art {
    /* outline: 1px solid blue; */
    background-color: rgb(242, 175, 26);

    height:400px;
    width: 400px;
}   

.kunst-hero-text {
    font-size: 3rem;
}

.address {
    font-style: normal;
}