@import url('https://fonts.cdnfonts.com/css/comicool-unicase');
@import url('https://fonts.cdnfonts.com/css/cloud-2');

.contenedor{

display: grid;
gap: 1rem;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: repeat(2, 1fr);
grid-template-areas: "header header header"
                     "mapa mapa lateral";
}

.header{
    grid-area: header;
    background: radial-gradient( pink, slateblue);  
    border-radius: 10px;
   
}

.mapa{

    grid-area: mapa;
  

}

.lateral{
    grid-area: lateral;
    
}


#quilometres{
    text-align: center;
    
    color: aliceblue; 
    font-size: xx-large
}

#lateral{
    
    background-color: darkmagenta;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    
    
}


#titol{
    text-align: center;
    color:darkmagenta;  
    padding: 15px;
    
  
}

#titol h1{
    font-family: 'Comicool Book', sans-serif;
    
}

#titol p{
    font-weight: bolder;
    font-size: 20px;
    font-family: 'Cloud', sans-serif;
}

#map { 
     height: 500px; 
     width: 100%;   
    cursor: default;
    border-radius: 10px;
   
}

p{
    font-size: 25px;
    color: black;
}

.botones, .municipi-div, .pistas-div {
    
    margin: 10px;
    width: 100%;  
    font-family: 'Cloud', sans-serif;
    
   
}

button{

    height: 50px;
    width: 100px;
    font-size: larger;
    color: black;
    border-radius: 10px;
    font-family: 'Cloud', sans-serif;
}

.datos{
    font-family: 'Cloud', sans-serif;
    margin: 10px;
    width: 100%;
}

#municipi{

    
    color: aquamarine;
    text-align: center;
    font-weight:bold;
    font-family: 'Cloud', sans-serif;
    min-height: 40px;
    

}



body{

    background-color: lightblue;
   
}

@media screen and (max-width: 768px){
	.contenedor {
		grid-template-areas: "header header header"
                             "mapa mapa mapa"
                             "lateral lateral lateral"              
        ; 
	}
}