@media (orientation: landscape) {
    .wraper{
        width: calc(100vw - (2*var(--generalMargin)));
        min-height: 40vh;
        /* max-height: 90vh; */
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;

        font-size: var(--wraperFontSize);
        align-items: center;

        border-top: var(--threadWidth) solid var(--mainColor);

    }
    .taille-bouton{
        display: flex;
    }

    .styles{
        color: black;
    }

    .styles:hover{
        color: var(--mainColor);
        cursor: pointer;
    }

    .wraper-header{
        width: 100%;
        /* background-color: blue; */
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        height: 0px;
        z-index: 999;
        position: absolute;
        top: 0px;
        margin-top: .2vw;
    }

    .wraper-header div{
        width: calc(100%/6);
        /* text-align: center;
        background-color: green; */
    }

    .nom-typo{
        color: var(--mainColor);
        text-align: start !important;
        display: flex;
        flex-direction: column;
    }
    .auteur-date-typo{
        color: var(--mainColor);
    }
    .telecharger-typo{
        text-align: end !important;
    }
    .telecharger-typo a{
        text-decoration: none;
        color: black;
    }
    .telecharger-typo a:hover{
        text-decoration: underline;
        cursor: copy;
    }

    input{
        margin-left: .5vw;
    }

    .version{
        color: black;
        opacity: 50%;
    }

    .texte-typo{
        width: 90%;
        
        word-break: auto-phrase;

        padding-top: 8.5vh; 
        padding-bottom: 8.5vh;


        min-height: 35vh;
        /* max-height: 90vh; */
        
        display: flex;
        justify-content: center;
        align-items: center;

        text-align: center;
        line-height: 1;
        /* font-size: 10vw; */

        position: relative;
        /* top: 50%;
        transform: translateY(-50%); */
        flex-direction: column;
    }
    .texte-typo:hover{
        cursor: text;
    }
    .informations-bouton:hover{
        color: var(--mainColor);
        cursor: pointer;
    }
    .jeu-de-caractere-bouton:hover{
        color: var(--mainColor);
        cursor: pointer;
    }
    .sliders{
        width: 30%;
    }

    .blur-informations{
        left: 50%;
        transform: translateX(-50%);
        pointer-events: none;
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2vw;
        text-align: center;
        backdrop-filter: blur(30px);
        transition: .2s;
        opacity: 0%;
    }
    [contenteditable]:focus {
        border: none;
        outline: none;
    }
    .wraper:last-of-type{
        margin-bottom: 5vw;
        border-bottom: var(--threadWidth) solid var(--mainColor);
    }

    .toDisplay{
        opacity: 0%;
        transition: .2s;
    }

    .wraper:hover .toDisplay{
        opacity: 100%;
    }

    .wraper:last-of-type{
        margin-bottom: 10vh;
    }
}

@media (orientation: portrait){
    .wraper{
        width: calc(100vw - (2*var(--generalMargin)));
        min-height: 20vh;
        max-height: 110vh;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        border-top: var(--threadWidth) solid var(--mainColor);
        display: flex;
        justify-content: center;
        overflow: hidden;
    
        font-size: var(--wraperFontSizeMobile);
    }
    
    .nom-typo{
        color: var(--mainColor);
        position: absolute;
        top: 1.5vw;
        left: 1.5vw;
    }
    .auteur-date-typo{
        color: var(--mainColor);
        position: absolute;
        bottom: 1.5vw;
        left: 1.5vw;
        display: flex;
        flex-direction: row;
    }
    
    .auteur-date-typo span{
        display: flex;
        align-items: end;
    }
    .telecharger-typo{
        /* position: absolute;
        top: 1.5vw;
        right: 1.5vw;
        text-align: end;
         */
         display: none;
    }
    .telecharger-typo a{
        text-decoration: none;
        color: black;
    }
    .telecharger-typo a:hover{
        text-decoration: underline;
        cursor: copy;
    }
    .boutons-typo{
        z-index: 1000;
        color: var(--mainColor);
        position: absolute;
        top: 1.5vw;
        right: 1.5vw;
        text-align: end;
    }
    .texte-typo{
        width: 90%;
        
        word-break: break-all;
    
        margin-top: 5vh;
        margin-bottom: 5vh;
    
    
        min-height: 18vh;
        max-height: 110vh;
        
        display: flex;
        justify-content: center;
        align-items: center;
    
        text-align: center;
        line-height: 1;
        /* font-size: 10vw; */
    }
    .texte-typo:hover{
        cursor: text;
    }
    .date-typo{
        margin-right: 3vw;
    }
    .taille-bouton{
        display: flex;
    }
    .plus-bouton{
        border: var(--threadWidth) solid var(--mainColor);
        border-radius: 1000px;
        padding: 2vw;
        z-index: 100;
    }
    .plus-bouton:hover{
        color: black;
        cursor: zoom-in;
    }
    .moins-bouton:hover{
        color: black;
        cursor: zoom-out;
    }
    .informations-bouton{
        display: none;
    }
    .jeu-de-caractere-bouton:hover{
        color: black;
        cursor: context-menu;
    }
    
    .blur-informations{
        left: 50%;
        transform: translateX(-50%);
        pointer-events: none;
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2vw;
        text-align: center;
        backdrop-filter: blur(3000px);
        transition: .2s;
        opacity: 0%;
    }
    [contenteditable]:focus {
        border: none;
        outline: none;
    }
    .wraper:last-of-type{
        margin-bottom: 5vw;
        border-bottom: var(--threadWidth) solid var(--mainColor);
    }
    
    .toDisplay{
        opacity: 0%;;
        transition: .2s;
    }
    .wraper:hover > .toDisplay{
        opacity: 100%;
    }
    
    /* .wraper:hover{
        min-height: 40vh;
    } */    
}

@media (orientation: landscape){
    input[type=range] {
        display: flex;
        align-items: flex-start;
        margin: 4%;
  background-color: transparent;
  -webkit-appearance: none;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  background: black;
  border: 0;
  width: 100%;
  height: 2.5px;
  cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  margin-top: -4.5px;
  width: 11px;
  height: 11px;
  background: black;
  border: 2.5px solid black;
  border-radius: 50px;
  cursor: pointer;
  -webkit-appearance: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: black;
}
input[type=range]::-moz-range-track {
  background: black;
  border: 0;
  width: 100%;
  height: 2.5px;
  cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  width: 11px;
  height: 11px;
  background: black;
  border: 2.5px solid black;
  border-radius: 50px;
  cursor: pointer;
}
input[type=range]::-ms-track {
  background: transparent;
  border-color: transparent;
  border-width: 4.5px 0;
  color: transparent;
  width: 100%;
  height: 2.5px;
  cursor: pointer;
}
input[type=range]::-ms-fill-lower {
  background: black;
  border: 0;
}
input[type=range]::-ms-fill-upper {
  background: black;
  border: 0;
}
input[type=range]::-ms-thumb {
  width: 11px;
  height: 11px;
  background: black;
  border: 2.5px solid black;
  border-radius: 50px;
  cursor: pointer;
  margin-top: 0px;
  /*Needed to keep the Edge thumb centred*/
}
input[type=range]:focus::-ms-fill-lower {
  background: black;
}
input[type=range]:focus::-ms-fill-upper {
  background: black;
}
/*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out
how to remove the virtical space around the range input in IE*/
@supports (-ms-ime-align:auto) {
  /* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
  input[type=range] {
    margin: 0;
    /*Edge starts the margin from the thumb, not the track as other browsers do*/
  }
}

}