@font-face {
  font-family: Herculanum;
  src: url("Herculanum-custom.ttf") format("truetype"), url("Herculanum-custom.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
html {
  width: 100%;
  height: 100%;
  margin: 0px;
}

body {
  background-color: #000000;
  background-image: url("images/Taffetasnoir.png");
  background-repeat: repeat;
  color: #FFFFFF;
  font-family: Herculanum;
  width: 100%;
  height: 100%;
  margin: 0px;
}

.questrial-regular {
  font-family: "Questrial", sans-serif;
  font-weight: 400;
  font-style: normal;
}


a, a:visited, a:active, a:hover {
  color: #FFFFFF;
  text-decoration: none;
}

a:hover {
  font-weight: bold;
}

img {
  max-width: 100%;
}

p {
  font-size: 0.8rem;
  margin: 0px;
  padding: 8px 0px 0px 0px;
  /*color: yellow;*/
}

h1 {
  font-size: 1.4rem;
  font-weight: bold;
  margin: 0px;
}

.full-center{
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

div#main {
  width: calc(100% - 2*8px);
  height: calc(100% - 2*8px);
  background: url("images/Cadre-vertical.png") no-repeat center;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  position: relative;
  top: 8px;
  left: 8px;
}

div#content {
  width: calc(637 * (100% - 16px) / 953 - 16px);
  max-width: calc(637 * (100vh*953/1160 - 16px) / 953 - 16px);
}

#content img {
  max-width: 50%;
}

@media only screen and (max-width: 240px) {
  h1 {
    font-size: 0.9rem !important;
  }
  p {
    font-size:0.55rem !important;
    /*color: white;*/
  }
}

@media only screen and (max-width: 360px) {
  h1 {
    font-size: 1rem;
  }
  p {
    font-size:0.55rem;
    /*color: red;*/
  }
}

@media only screen and (min-width: 480px) {
  h1 {
    font-size: 2rem;
  }
  p {
    font-size:1.35rem;
    /*color: blue;*/
  }
}

@media only screen and (min-width: 760px) {
  h1 {
    font-size: 3.2rem;
  }
  p {
    font-size: 2.0rem;
    padding: 16px 0px 0px 0px;
    /*color: green;*/
  }
}

@media only screen and (min-width: 960px) {
  h1 {
    font-size: 4.5rem;
    padding: 0px 0px 16px 0px;
  }
  p {
    font-size:2.3rem;
    padding: 24px 0px 0px 0px;
    /*color: purple;*/
  }
}

@media only screen and (orientation:landscape) {
  div#main {
    background: url("images/Cadre-horizontal.png") no-repeat center !important;
    -webkit-background-size: contain !important;
    -moz-background-size: contain !important;
    -o-background-size: contain !important;
    background-size: contain !important;
  }
  div#content {
    width: calc(844 * (100% - 16px) / 1160 - 16px);
    max-width: calc(844 * (100vh*1160/953 - 16px) / 1160 - 16px);
  }
  h1 {
    font-size: 0.5rem;
    padding: 0px 0px 4px 0px;
  }
  p {
    font-size: 0.3rem;
    padding: 4px 0px 0px 0px;
  }
}

@media only screen and (orientation:landscape) and (max-height: 240px) {
  h1 {
    font-size: 1rem !important;
    padding: 0px 0px 4px 0px;
  }
  p {
    font-size: 0.5rem !important;
    padding: 4px 0px 0px 0px;
    /*color: white;*/
  }
}

@media only screen and (orientation: landscape) and (min-height: 360px) {
  h1 {
    font-size: 2.0rem;
  }
  p {
    font-size:0.85rem;
    /*color: red;*/
  }
}

@media only screen and (orientation: landscape) and (min-height: 480px) {
  h1 {
    font-size: 2.9rem !important;
    padding: 0px 0px 8px 0px;
  }
  p {
    font-size:1.0rem !important;
    padding: 8px 0px 0px 0px;
    /*color: blue;*/
  }
}

@media only screen and (orientation:landscape) and (min-height: 760px) {
  h1 {
    font-size: 4rem !important;
    padding: 0px 0px 16px 0px;
  }
  p {
    font-size: 1.8rem !important;
    padding: 16px 0px 0px 0px;
    /*color: green;*/
  }
}

@media only screen and (orientation:landscape) and (min-height: 960px) {
  h1 {
    font-size: 5rem !important;
  }
  p {
    font-size:2.3rem !important;
    /*color: purple;*/
  }
}

@media only screen and (orientation:landscape) and (min-height: 1200px) {
  h1 {
    font-size: 6rem !important;
  }
  p {
    font-size:2.7rem !important;
    /*color: purple;*/
  }
}

@media only screen and (orientation:portrait) {
  #main-picture {
    width: 100%;
  }
  #main-picture img {
    width: 100%;
  }
}


@media only screen and (orientation:landscape) {
  #main-picture {
    height: 100%;
  }
  #main-picture img {
    height: 99%;
    max-width: unset;
  }
}