@font-face {
font-family: 'VG5000';
    src:    url('type/VG5000-Regular_web.eot');
    src:    url('type/VG5000-Regular_web.eot?#iefix') format('embedded-opentype'),
            url('type/VG5000-Regular_web.woff') format('woff'),
            url('type/VG5000-Regular_web.woff2') format('woff2'),
            url('type/VG5000-Regular_web.ttf') format('truetype'),
            url('type/VG5000-Regular_web.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

.style1 {font-family: 'Baskervville', cursive; font-weight: 300; color:black }
.style2 {font-family: 'Baskervville', cursive; font-weight: 300, 400; font-size:12px; color:black } 
.style3 {font-family: 'VG5000', cursive; font-weight: 300; color:#333; font-size:20px }
.style4 {font-family: 'Baskervville', cursive; font-weight: 900; color: #d29290; }
.style5 {font-family: 'Baskervville', cursive; font-weight: 300; font-size:16px; color:black }
.style6 {font-family: 'Baskervville', cursive; font-weight: 300, 400; font-size:18px; color:black; letter-spacing: 0.05em; line-Height: 1.5;} 

body {
  background-image: url();
  background: radial-gradient(circle at center left, whitesmoke, white, Turquoise);
  background-repeat:no-repeat; 
  background-position:bottom;  
  background-position:right; 
  background-attachment:bottom; 
  background-attachment:right; 
  background-color: Turquoise; 
}
a:link {
  color: #333;
  text-decoration: underline;
}
a:visited {
  text-decoration: none;
  color: #666;
}
a:hover {
  text-decoration: underline;
  color: MediumSpringGreen;
}
a:active {
  text-decoration: none;
  color: #333;
}
button {
  background-color: transparent;
  color: darkgray;
  border: 0px solid ;
  font-family: 'VG5000';
  font-size: small;
  padding: 0px;
  padding-right: 2px;
  margin-left: 0px;
  margin-top: 0px;
}

summary {
   color:darkgray;
   font-family: 'VG5000';
   font-size: small;
}


@media screen and (min-width: 100px) and (max-width: 500px) and (orientation: portrait) {
.contenant {
  width: 100%; 
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
}
.wrapper {
  width: 100%;
  display: grid;
  grid-gap: 10px;
}
.bio {
  grid-column: 1;
  grid-row: 1;
  width: 95%;
}
.expo {
  grid-column: 1;
  grid-row: 2;
  width: 85%;
  margin-left: 10px;
}
.mobileonly{display: ;}
}

@media screen and (min-width: 500px) and (max-width: 900px) {
.contenant {
  width: 100%; 
  height: 100%
  margin-left: auto;
  margin-right: 0;
  margin-top: 20px;
}
.wrapper {
  width: 100%;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 55% 45%;
}
.bio {
  grid-column: 1;
  grid-row: 1;
  width: 95%;
  height: ;
}
.expo {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 90%;
}
.credits{
  grid-column: 1;
  grid-row: 2;
  display: inline-block;
  align-self: flex-end;
}
.mobileonly{display: none;}
}

@media screen and (min-width: 900px) {
.boutonbio {
  margin-left: 15%;
}
.contenant {
  width: 80%; 
  height: 100%;
  margin-left: 15%;
  margin-right: auto;
  margin-top: 20px;
}
.wrapper {
  width: 100%;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 65% 280px auto; 
}
.bio {
  grid-column: 1;
  grid-row: 1;
  width: 90%;
  height: ;
}
.expo {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 90%;
}
.credits{
  display: inline-block;
  align-self: flex-end;
  grid-column: 1;
  grid-row: 2;
  margin-top: 0;
}
.mobileonly{display: none;}
}