@font-face {
    font-family: autopia;
    src: url('fonts/Autopia-Regular.otf');
}
@font-face {
    font-family: autopia;
    src: url('fonts/Autopia-Bold.otf');
    font-weight:bold;

}
@font-face{
    font-family: autopia;
    src: url('fonts/Autopia-Italic.otf');
    font-style:italic;
}
@font-face {
    font-family: autopia;
    src: url('fonts/Autopia-Bold-Italic.otf');
    font-weight:bold;
    font-style: italic;
}
html{
    font-size:10px;
}
body{
    font-family: autopia;
    
}

p{
    text-align:center;
    font-size:2rem;
    margin:0;
    text-shadow:10px 0px 20px red;
}
div.cadre{
    position:fixed;

    
}

.cadre.top{
    width:calc(100vw - 6rem);
    left:3rem;
    top:3rem;
}
.cadre.right{
    width:calc(100vh - 6rem);
    right:3rem;
    top:3rem;
    transform:translateX(100%) rotate(90deg);
    transform-origin: top left;
}

.cadre.bottom{
    bottom:3rem;
    width:calc(100vw - 6rem);
}

.cadre.left{
  width: calc(100vh - 6rem);
  left: 3rem;
  bottom: 3rem;
  transform: rotate(-90deg) translateY(100%);
  transform-origin: bottom left;
}

.ressource{
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
}