@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&display=swap');
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;

}



html,body{
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  font-size: 13px;
  font-family: 'Fira Code', sans-serif;
}

a{
  text-decoration: none;
}

.info{
  min-width: 250px;
  max-width: 400px;
  padding-left: 15px;
  grid-area:info;
}

.info_text{
  background-color: #076358;
  color:white;
  padding: 10px;

}

.details{
  max-width:400px;
  padding-left: 30px;
  padding-top: 10px;
  grid-area: details_text;
}

.details_text{
  background-color: beige;
  font-size: 16px;
  font-weight: bold;
  font:"Fira Code";
  padding: 10px;

}

.impressum{
  padding-left: 30px;
  padding-top: 10px;
  grid-area: impressum_text;
}

.impressum_text{
  font-size: 9px;
  font:"Fira Code"
}

.navigation{

  text-decoration: none;
  color: white;
  font: "Fira Code";
  font-weight: bold;
  font-size: 36px;
  line-height: 47px;
}

.menu{
  width: 150px;
  height: 50px;
  padding-left: 15px;
  padding-top: 5px;
  font-size: 30px;
  font-weight: bold;
  background-color:#076358;
  grid-area:menu;


}

.contact{
  width: 150px;
  height:50px;
  padding-left: 15px;
  padding-top: 5px;
  font-size: 30px;
  font-weight: bold;
  background-color:#076358;
  grid-area: contact;
}


.insta{
  padding-left:15px;
  grid-area:insta;
}

.fb{
  padding-left:15px;
  grid-area: fb;}


.header{
  display: grid;
  gap: 5px;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-areas:
  "menu"
  "contact"
  "insta"
  "fb";
  grid-area:header;
}


#page{
  display:grid;
  height: 100vh;
  grid-template-columns: 1fr 1.9fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 3px;
  align-items: center;
  grid-template-areas:
  "header ."
  "info .";
}

#contact_page{
  display: grid;
  height: 100vh;
  grid-template-columns:1fr 1fr;
  grid-template-rows:0.25fr 1.375fr 1.375fr;
  grid-gap: 3px;
  align-items: center;
  grid-template-areas:
  "home ."
  "details_text . "
  "impressum_text . ";
}



.home{
  width: 150px;
  height: 50px;
  padding-left: 15px;
  padding-top: 5px;
  font-size: 30px;
  font-weight: bold;
  background-color:beige;
  grid-area:home;
}

@media only screen and (max-width:550px){
  body{
   	background-image: url("./images/mobile_buddha.jpg"); 
    background-repeat: no-repeat;
  	background-attachment:fixed;
  	background-size: cover;
    scroll-behavior: smooth;
  	-webkit-overflow-scrolling: touch;
  }
  grid-template-columns:1fr;
  grid-template-rows:0.25fr 0.25fr 0.25fr 0.25fr 0.95fr 0.05fr;
  grid-template-areas:
    "menu"
    "contact"
    "fb insta"
    "info";

}

@media (min-width: 551px) {
    #page {
	    background-image: url("./images/manfat_front.JPG");
      	background-repeat: no-repeat;
  		background-attachment:fixed;
  		background-size: cover;
   }
  	#contact_page{
	    background-image: url("./images/buddha.jpg");
  		background-repeat: no-repeat;
  		background-attachment: fixed;		 
      	background-size: cover;
   }
}