@font-face {
  font-family: 'GetVoIPGrotesqueRegular';
  src: url(../../GetVoIPGrotesqueRegular.woff2) format('woff2'),
       url(../../GetVoIPGrotesqueRegular.woff) format('woff') ;
  font-weight: normal;
  font-style: normal;
  }

html { font: normal 14px/1.4 'sans-serif' }
body { background: #111 ; margin: 0 ; }
#wall {
    position: absolute ;
    top: 0 ; bottom: 0 ; left: 0 ; right: 0 ;
    background-color: #ddd ;
    border: 1vw solid #111 ;
    border-radius: 1.5vw ;
    overflow : auto;
    }

h1 {
    font-family: GetVoIPGrotesqueRegular ;
    font-size: 400% ;
    padding: 1rem 0 0.5rem ;
    text-shadow: 2px 2px 4px #111;
    color : #ddd ;
    margin: 1rem 0 ;
    text-align: center ;
    }
.profil { text-align: center ; margin: 1rem ; }
.profil img { border: 3px solid #111 ; border-radius: 10px ; }

.formulaire { text-align: center ; }
.label { font-weight: bold ; font-size: 92% ; }
#msg { max-width: 90vw ; width: 60em ; height: 8em ; }
.reponse { font-style: italic ; font-size: 92% ; }
.button {
    margin: 2em 25% 4em 25% ;
    padding: 0.7em ;
    border-top: 2px solid #111 ;
    }
.button button { font-size: 140% ; font-weight: bold ; padding: 0.3em 1em ; }

#alert {
    display: none ;
    position: absolute ;
    top: 0 ; bottom: 0 ; left: 0 ; right: 0 ;
    background : url(transparent.jpeg) ;
    border: 1vw solid #111 ;
    border-radius: 1.5vw ;
    overflow : auto;
    z-index: 100 ;
    padding: 30vh 20vw ;
    }

#alert section {
    display: none ;
    z-index: 101 ;
    padding: 5vh 5vw ;
    text-align: center ;
    font-weight: bold ;
    border-radius: 4px ;
    box-shadow: 6px 6px 3px #222 ;
    }

#alert section.ok {
    background-color: #dfd ;
    border: 2px solid #0d0 ;
    }

#alert section.bad {
    background-color: #fdd ;
    border: 2px solid #d00 ;
    }