@font-face {
    font-family: 'LibreBaskerville';   
    src: url('/fonts/LibreBaskerville-Regular.ttf')format('truetype');
}
@font-face {
    font-family: 'Duval';
    src: url('/fonts/Avara-Bold.ttf');
}

html, body {
    margin:0;
    padding:0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }

.mon_titre{
    position: absolute;
    opacity: 0%;
}

.bloc video {
    position: absolute;
    min-height: 100%;
    min-width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 100%;
}

.boite{
    position: absolute;
    background-color: #ff000000;
    height: 100%;
    width: 100%;
    cursor: default;
    z-index: 3;
}
.boite:hover .legende{
    transition: opacity, 2s, 4s, 4s;
    transition-delay: 3s;
    opacity: 0;
}

.legende{
    position: absolute;
    color: antiquewhite;
    background-color: #000000;
    bottom: 3%;
    width: 100%;
    padding: 20px;
    cursor: default;
    z-index: 2;
    transition: opacity, 2s, 4s, 4s;
}

.oeuvre{
    position: absolute;
    font-family: 'Duval';
    text-align: right;
    width: 100%;
    right: 75%;
    translate: 150px -9px;
    font-style: normal;
    font-size: 1.45ch;
    z-index: 2;
    /*background-color: #009605a5;*/
}
.separateur{
    margin: 0px 5% 0px 8%;
    font-size: 1.5ch;
    color: #55555586;

}

.technique{
    position: absolute;
    font-family: 'Arial Narrow Bold', sans-serif;
    text-align: right;
    width: 100%;
    right: 65%;
    translate: 250px -10px;
    font-style: normal;
    font-size: 1.5ch;
    color: #a4a29d;
    z-index: 2;
}

/*.legende{
    opacity: 0;
    -webkit-transition: opacity 2s ease-in-out;
    -moz-transition: opacity 2s ease-in-out;
    -o-transition: opacity 2s ease-in-out;
    -ms-transition: opacity 2s ease-in;
    transition: opacity 2s ease-in;
}
.legende.load {
    opacity: 1;
}*/