@font-face {
 font-family: "space-notorious";
 src: url("font/space-notorious-rounded-webfont.woff2") format("woff2"),
        url("font/space-notorious-rounded-webfont.woff") format("woff");
}


html{
  padding: 0;
  margin: 0;
}
body{
  padding: 0; 
  margin: 0;
  width:100%;
  height: 100%;
  font-family: "serif";
  background: floralwhite;
}
.content{
  margin-top: 100vh;
  display: flex;
  justify-content: space-around;
  width: 100vw;
  flex-wrap: wrap;
}
section{
  height:100vh;
  width: 100vw;
  font-size: 1rem;
  display: flex;
  justify-content: center;
  align-content: center;
}
video {
    border: 0px solid black;
    width: auto;
    height:85vh;
    padding-left: 5%;
    padding-top: 20% !important;
    background: inherit;
}
img{
  padding-top: 5% !important;
  /* max-width:80%; */

}
iframe{
  padding-top: 5% !important;
}
.home{
  min-height: 100vh;
  max-height: auto;
  width: 100vw;
  color: black;
  font-weight: 300;
  margin: 0;
  font-size: 1.5vw;
  position: absolute;
  top: 0;
  right: 0;
  background: lightgrey;
}
.titrage{
  position: relative;
  padding-left:2vw;
  padding-right:11vw;
  padding-top:0;
  padding-bottom: 0vh;
  margin: 0;
  z-index:2;
  background: lightgrey;
}
.titrage p span{
-webkit-text-stroke: .25mm grey;
}

.titrage p a img{
  width: 11vw;
  z-index: 2;
  position: fixed;
  right: 2.5vw;
  bottom: 2vh;
  transform: rotate(2deg);
  transition: 4s;
}
.titrage p a img:hover{
  transform: rotate(-130deg);
  filter: hue-rotate(620deg);
  transition: .3s;
}
.titrage-name{
  position: fixed;
  padding-left:1%;
  padding-right:1%;
  padding-top: 0;
  margin: 0;
  z-index: 0;
  font-family: "space-notorious";
  top: -1%;
  width:100vw;
}
span{
   font-family: "space-notorious";
   font-size: 2.4vw;
   color: white;
   -webkit-text-stroke: .25mm black;
   color: black;
}
span a:hover{
  color:black !important;
  -webkit-text-stroke: 0mm;
  text-decoration: none;
}
span:nth-of-type(1){
   -webkit-text-stroke: .25mm #e42989;
}
span:nth-of-type(2){
   -webkit-text-stroke: .25mm red;
}
span:nth-of-type(3){
   -webkit-text-stroke: .25mm #3cae48;
}
span:nth-of-type(4){
   -webkit-text-stroke: .25mm #3aa8ec;
}
span:nth-of-type(5){
   -webkit-text-stroke: .25mm #e42989;
}
span:nth-of-type(6){
   -webkit-text-stroke: .25mm #3aa8ec;
}
span:nth-of-type(7){
   -webkit-text-stroke: .25mm red;
}
span:nth-of-type(8){
   -webkit-text-stroke: .25mm #3cae48;
}
span:nth-of-type(9){
   -webkit-text-stroke: .25mm #3aa8ec;
}
span:nth-of-type(10){
   -webkit-text-stroke: .25mm #e42989;
 }
 span:nth-of-type(11){
    -webkit-text-stroke: .25mm #3cae48;
 }
 span:nth-of-type(12){
    -webkit-text-stroke: .25mm #3aa8ec;
 }
 span:nth-of-type(13){
    -webkit-text-stroke: .25mm #e42989;
 }
  span:nth-of-type(14){
    -webkit-text-stroke: .25mm #3cae48;
 }
 span:nth-of-type(15){
    -webkit-text-stroke: .25mm red;
 }

.titrage-name p{
   -webkit-text-stroke: .25mm #3cae48;
}
.titrage-name p span a{
  text-decoration: none;
  color: white;
}
a{
  text-decoration: none;
    color: black;
}
a:hover{
  color:black;
}
/* Extra small devices (phones, 600px and down) */
 @media only screen and (max-width: 600px) {
  body{
    overflow-x: hidden;

  }
  .titrage p a img{
    width: 20vw;
    z-index: 2;
    position: fixed;
    right: 2.5vw;
    bottom: 4vh;
    transform: rotate(2deg);
    transition: 4s;
  }
  .home{
    font-size: 3.8vw;
  }
span{
    padding-top: 0;
    margin: 0;
    font-size: 4.5vw;
  }
  video {
    width: 500px;
    height: 250px;
      padding-left:0%;
      padding-right:0%;
      padding-top: 0;

      padding-bottom: 0;

  }
}


/* Small devices (portrait tablets and large phones, 600px and up) */

 @media only screen and (min-width: 600px) {
  body{

  }

  .home{
    font-size: 3.5vw;
  }
span{
    padding-top: 0;
    margin: 0;
    font-size: 4vw;
    color: black;
  }
  video {
    width: 500px;
    height: 350px;
      padding-left:0% !important;
        padding-right: 10% !important;
      padding-top: 0;

      padding-bottom: 0;

  }
  img, iframe{
      padding-right: 10% !important;
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  body{


  }
  .home{
    font-size: 2.5vw;
  }
span{
    padding-top: 0;
    margin: 0;
    font-size: 4vw;
  }
  video {
    width: 600px;
    height: 400px;

      padding-left:0%;
    padding-right: 0% ;
      padding-top: 0;

      padding-bottom: 0;

  }
}
 */
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  body{

  }
  .home{
    font-size: 2.2vw;
    overflow-x: hidden;
  }
  video {
    width: 800px;
    height: 500px;

      padding-left:0%;
      padding-right:0%;
      padding-top: 0;

      padding-bottom: 0;

  }
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  body{

  }
  .home{
    font-size: 2vw;
  }
  span{
      padding-top: 0;
      margin: 0;
      font-size: 2.5vw;
    }
}


@media only screen and (min-width: 1600px) {
  body{

  }
  .home{
    font-size: 1.5vw;
  }
  span{
      padding-top: 0;
      margin: 0;
      font-size: 2vw;
    }
}
@media only screen
    and (device-width : 375px)
    and (device-height : 812px)
    and (-webkit-device-pixel-ratio : 3) {
      body{


      }
      .home{

                  font-size: 5vw;
      }
      span{

          font-size: 6.5vw;
          color: black !important;
          -webkit-text-stroke: 1px black !important;
        }
    }