.nunito-<uniquifier> {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}


.roboto-<uniquifier> {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}


body {
	background-color:white;
	margin: 0;
	font-family: "Nunito", Times, serif;
	background-image: url("pic/marbleback.jpg");
	
}

a {
    text-decoration:none;
    color:inherit;
}

a :hover {

cursor: pointer; 
text-decoration-color: black;
}	


#maingrid {
	display: grid;
	grid-template-columns: auto 33% 34% ;
  grid-template-rows: 75px auto auto auto auto 100px;
  grid-template-areas: 
    ". logo menu" 
    "main main main" 
    "nabidka nabidka nabidka"
    "onas onas onas"
    "kontakt kontakt kontakt"
    "footer footer footer";
}

@media only screen and (max-width: 1080px)  {
  #maingrid {

    grid-template-columns: auto auto;
    grid-template-rows: auto auto auto auto auto auto auto;
    grid-template-areas:
    "logo logo"
    "menu ."
    "main main"
    "nabidka nabidka"
    "onas onas"
    "kontakt kontakt"
    "footer footer";
  }

@media only screen and (max-width: 600px) {
  

  #maingrid {
       grid-template-columns: auto auto;
    grid-template-rows: auto auto auto auto auto auto auto;
    grid-template-areas:
    "logo "
    "menu"
    "main"
    "nabidka"
    "onas"
    "kontakt"
    "footer";
  }


ul {
	display: flex;
   list-style-type: none;
   justify-content: center;
   
}

#footer {
	background-color: #262626;
	grid-area: footer;
	text-align: center;
	color:white;
}

#headline {
	max-width: 380px;
	
}

.thumb {
  border: 1px solid #ddd; 
  border-radius: 4px;  
  padding: 5px; 
  width: 80px; 
}

}
 

  #mainmenu {
  	justify-self: end;
  	max-height: 80px;
  	


  }

  ul {
  	
  justify-content: center;
   margin-right: 0px; 
  }

  }


#logo {
	grid-area: logo;
	margin-top: 15px;
	justify-self: center;
	
}

#mainmenu {
	 grid-area: menu;
	 justify-self: end;
	 
	 
}

ul {
	display: flex;
	max-width: 400px;
   list-style-type: none;
   justify-content: right;
   margin-right: 35px; 
  
	
  
}

ul li button {
	border: none;
	background: none;
	width: auto;
   line-height: 3.0rem;
   display: block;
    
}



.menu_element {
	color: black;
	font-size: 16px;
	font-weight: 700;
    white-space: nowrap;
    padding: 16px;
    text-decoration: underline 0.05em rgba(255, 255, 255, 0);
    text-underline-offset: 10px;
    transition: text-decoration-color 300ms;
   

}


.menu_element:hover {

cursor: pointer; 
text-decoration-color: black;
}	



#mainpage {


	grid-area: main;
	background-image: url("pic/mainhome3.jpg") ;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 80vh; 
 
} 
   
}

.content_box {
	grid area: test;
	border-style: solid;
	border-width: 5px;
	border-color: black;
}

#nabidka_section

{
	
	grid-area: nabidka;
	background-image: url("pic/marbleback.jpg");
	padding: 25px;
	
}

#nemovitosti_nabidka {
	
	place-self: center ;
	text-align: center;
	margin-bottom: 25px;

}

.icons_center {
	justify-content: center;
	margin-top: 50px;
	margin-bottom: 10px;
}

#o_nas {
	grid-area: onas;
	background-color: white;
	

}

#onas_space {
	place-self: center ;
	text-align: center;
	padding: 15px;


}

#kontakt {
	grid-area: kontakt;
	background-color: #bfbfbf;
	color: white;
	

}

#kontakt_space {
	place-self: center ;
	text-align: center;
	padding: 25px;


}

h1 {
	
}

h2 {
	
}

#footer {
	background-color: #262626;
	grid-area: footer;
	text-align: center;
	color:white;
}

#footertext {
	margin-top: 25px;
}

.infobox {
	display: inline-block;
	
	max-width:600px;
}

#headline {
	display:block;
	grid-column:1/2;
	margin-top: 25vh;
	place-self: center;
	text-align: center;
	margin-bottom: 10px;
  font-weight: bold;
  padding: 5px 80px 5px 80px;
	font-size: 1.5em;
	font-family: "Roboto", Times, serif;
	color: rgb(69, 69, 69);
	background-color: rgba(255, 255, 255,0.9);
  
	
}


#subheadline {
	display:inline-block;
  font-weight: bold;
  font-family: "Roboto", Times, serif;
  color: rgb(74, 74, 74);
	background-color: rgba(255, 255, 255,0.7);
  
}

article {
	display: block;
}


 .thumb {
  border: 1px solid #ddd;
  border-radius: 4px;  
  padding: 5px; 
  width: 150px; 
}

 .thumb:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

.maingrid > logo menu {
  background: blue;
}