/*structure générale*/
:root {--blanc: #c7beaf; --noir: #21201C;--megablanc: #ecdada; --rouge: #b94022}
::selection {background-color: var(--rouge); color: var(--blanc);}

@font-face {
  font-family: Dosis;
  src: url(font/Dosis-ExtraBold.ttf);}
@font-face {
font-family: Pix;
src: url(font/Pix32.ttf);}
@font-face {
font-family: Pix0;
src: url(font/DePixelSchmal.ttf);}

body {
position: relative;
margin: 6em auto 0 auto;
width: 614px;
background-color: var(--noir);
color:var(--blanc);}

.flex{display:grid}

a {color: inherit; transition: 0.3s ease-out;}
p {text-align: right;}

/*----*/
/*header*/
header {margin: -80 0 -10 175;}
header h1 {font-size: 65px; }

#content {display: flex; height:400px; width: 300px;}

#chien { background-image: url(img/chien_blank.PNG); background-size:contain; }
#chien:hover {background-image: url(img/chien_hover.PNG); background-size:contain;}

#boutons {display: grid;}
#boutons a
  {display: block;
  color: var(--noir);
  background: var(--blanc);
  font-size:33px;
  width: 300px;
  height: 70px;
  padding: 30px 0 0 0;
  border-radius: 30px;
  text-decoration: none;
  text-align: center;}
#boutons a:hover
  {color: var(--megablanc);
  background: var(--rouge);
  border-style:dashed;
  border-color:var(--megablanc);}
#boutons #site-button {background:var(--megablanc); height: 120px;}
#boutons #site-button:hover {background:var(--rouge);}

.text {visibility: hidden;}
.text:hover {visibility: visible;}

/*----*/
/*footer*/
#footer {display: flex; min-height: 100px}

#statut {min-height: 50px; height:78px;
  width: 280px;
  padding: 9px 48px 5px 20px; 
  color: var(--noir); background-color: var(--blanc);
  border-radius: 13px; border: 3px solid ; border-color:var(--megablanc)}

/*liens*/
#links {margin: 0 30px; padding: 15px 0 0 0; }
#links a {min-height: 50px;min-width: 50px;}
#links a:hover {filter:invert(100%);}
#links img {max-height: 50px;}

#link {display: flex;}