* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
html {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 10px;
   background: linear-gradient(to right, #55c1eb 0%, #265fa8 100%);
   height: 100%;
   text-decoration: none;
}

body {
   display: grid;
   //height: 100%;
   padding: 20px 0px;
   font-size: 1.6rem;
   //width: 70%;
place-items: center;
}

h1 {
   font-size: 3.2rem;
   font-weight: normal;
}
h2 {
   font-size: 2.2rem;
   font-weight: bold;
}

#container {
   display: grid;
   grid:
      'header' 120px
      'main' 1fr
      'footer' 45px
      / 1fr;
   text-decoration: none;
   //align-content: center;
   //height: 100%;
   height: 95vh;
   min-width: 700px;
   //min-height: 270px;
   max-height: 800px;
}

header, footer {
   display: grid;
   align-items: center;
}

header, footer {
   padding: 20px;
   border: 0px solid #000;
   text-align: center;
}

header {
   grid-area: header;
   border-radius: 20px 20px 0 0;
   //background: #FFF;
   //background: url('banner.gif') no-repeat rgba(255, 255, 255, 1.0);
background-image: url(comp.sweirc.png), url(banner.gif);
background-position: right top, left top;
background-repeat: no-repeat;
   //background-size: cover;
}

main {
   grid-area: main;
   padding: 20px;
   background: #FFF;
   text-align: left;
overflow-y: scroll;
}


footer {
   grid-area: footer;
   background: #FFF;
   text-align: right;
   border-radius: 0 0 20px 20px;
}
pre code {
  background-color: #eee;
  border: 1px solid #999;
  border-radius: 10px 10px 10px 10px;
  display: block;
  padding: 20px;
}
pre texte {
display: block;
padding: 10px;
}
::-webkit-scrollbar {
   display: none;
}