:root {
    --police: Tahoma, Verdana;
    --Fonds: #008080; 
    --Sombre: #00AAAA;
    --Clair: #00FFFF;
}

body {
    background-color: black;
    background-image: url(back.jpg);
    font-family: var(--police);
    text-align: justify;
    color: white;
}

h1    { font-family: var(--police);
        text-align: center;
        color: yellow;
         }

h2    { font-family: var(--police);
        text-align: center;
        color: var(--Clair);
         }

form  { text-align: center; } 

a {
    color: var(--Fonds); 
    background-color: black;
    text-decoration: none; 
    text-align: center;
    font-weight: bold
}

/* a img {  border: hidden  } */

a:hover {
    text-decoration: underline; color: var(--Clair)
}

table {
    border-style: none;
    padding: 1px;
    border-spacing: 1px;
    background-color: black;
    text-align: center;
    margin: 0 auto;
}

@media ( orientation: portrait ) {

  body { font-size: large }

  table {     width: 70%  }

  form table {  width: 100% } 

  img {
       border-style: solid;
       border-width: medium;
       width: 34px;
       height: 56px;
 } 

 p img {
       width: 68px;
       height: 110px
 } 

  td,th {
    height: 60px;
 }
} /* Media portrait */

@media ( orientation: landscape ) {

 body { font-size: x-large }

 table {     width: 80%  }

 form table { background-color: black; width: 60% }

  img {
       border-style: solid;
       border-width: medium;
       width: 49px;
       height: 79px; 
 }

  td,th {
    height: 120px;
 }

  form td,th { height: 90px }
} /* media landscape */


td,th {

    background-color: var(--Fonds); 
    padding: 2px;
    vertical-align: middle; 
    text-align: center 
}

form th:hover { background-color: var(--Clair) }

p { text-align: center } 

input[type] { width: 200px; font-size: large }

#B1 { display: None }