body{background-color:#A5260A;
    }
h1{text-align: center;
   }
section{ position : center;
}
.view{
     position: relative;
     width: 300px;
     height: 300px;
     border:10px;
     overflow: hidden;
     float: left;
     margin: 5px;
     border: 5px double black;
     }

.view img{
      	width: 300px;
      	height: 300px;
        }

.mask{
      position: absolute;
      left: 0;
      top:300px;
      background: rgba(0,0,0,0.3);
      color:white;
      text-align: center;
      width: 300px;
      height: 300px;
      transition: top 1s;
      border: 5px double black;
      }
section{padding: 0px 180px;
}
 .mask a{
     	text-decoration: none;
     	color: white;
        font-size: 1.5em;
        font-family: fantasy,sans-serif;
        background: #000;
        padding: 5px 10px 5px 10px;
        border-radius: 5px;
        }
 .view:hover .mask{
        top:0;
       }
p{ font-weight: bold;
   }

#carte_canton{
  border: 1px solid black;
  text-align: justify;
  padding: 12px;
  background-color: bisque;
}

#map{display: flex;
      justify-content: center;
      align-items: center;
      padding: 50px 180px;
      flex-direction: column;
      border: 5px double black;
      background-color : #C24641}
.styled {
    position: fixed;  
	top: 10px;  
	left: 10px;
    border: 0;
    line-height: 2.5;
    padding: 0 20px;
    font-size: 1rem;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    border-radius: 10px;
    background-color: rgba(255, 99, 71, 0.8);
    background-image: linear-gradient(to top left,
                                      rgba(0, 0, 0, .2),
                                      rgba(0, 0, 0, .2) 30%,
                                      rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
                inset -2px -2px 3px rgba(0, 0, 0, .6);
}

.styled:hover {
    background-color: rgba(255, 0, 0, 1);
}

.styled:active {
    box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
                inset 2px 2px 3px rgba(0, 0, 0, .6);
}

area{
    cursor:pointer;
}