* {
  margin: 0;
  box-sizing: border-box;
}

@font-face {
    font-family: "Forte";
    src:
        url("/www/assets/fonts/FORTE.ttf") format("trueType");
}

html,
body {
    position: fixed;
    justify-self: center;
    max-width: min-content;
}

body {
    background-image: url(/www/assets/backgrounds/background-1.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.wrapper {
  display: grid;
  grid-template-areas:
    'ads1'
    'main'
    'ads2'
    'footer';
  gap: 9em;
  grid-template-columns: 900px;
  grid-template-rows: 10% 70% 10% 10%;
  position: relative;
}

.cont1{
    grid-area: ads1;
    position: absolute;
    justify-self: center;
}

.cont2{
    grid-area: main;
    position: relative;
    justify-self: center;
}

.cont3{
    grid-area: ads2;
    position: relative;
}

.cont4{
    grid-area: footer;
    position: relative;
}

.main {
    display: flex;
    position: relative;
    justify-content: center;
    top: 15rem;
}

.FxButton {
    display: inline-block;
    margin: 3px;
    padding: 6px 8px;
    font-size: 0.6rem;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    outline: none;
    color: #fff;
    border: none;
    border-radius: 30px;
    box-shadow: 0 6px #999;
}

#FxOn {
    background-color: #04AA6D;
    box-shadow: 0 3px #666;
    transform: translateY(4px);
}

#FxOn:hover {background-color: #3e8e41}

#FxOff {
    background-color: #300724;
}

#FxOff:hover {background-color: #54404e;}

.setup {
    position: absolute;
    transition: 0.4s;
    font-family: cursive, monospace, sans-serif;
    font-weight: 500;
    color: maroon;
    z-index: 99999999;
    background-color: transparent;
    border: none;
    justify-self: self-end;
}


.settingsBar {
    position: absolute;
    box-shadow: 0 0 5px rgb(151 236 255 / 93%);
    background: rgb(217 255 251 / 62%);
    padding: 11px 10px 16px 18px;
    margin: 10px 10px 10px 10px;
    align-self: self-start;
    justify-self: flex-end;
    justify-items: center;
}

span.soundsettings {
    display: inline-grid;
    padding: 5px;
    border: 1px solid #fff20078;
    background-color: rgb(211 188 95 / 83%);
    font-family: cursive, monospace, sans-serif;
    justify-items: anchor-center;
}

form > p {
    margin-top: 9px;
}

div#convolver {
    margin-top: 9px;
}

#volume .rs-range-color {
    background: radial-gradient(ellipse at bottom, rgba(0, 0, 0, 1) 0%, rgba(48, 7, 36, 1) 34%, rgba(255, 255, 255, 1) 66%, rgba(0, 0, 0, 1) 100%);
}

#volume .rs-path-color {
    background: radial-gradient(ellipse at bottom, rgba(255, 255, 255, 1) 0%, rgba(169, 173, 174, 1) 34%, rgba(255, 255, 255, 1) 66%, rgba(5, 0, 0, 1) 100%);
}

#volume .rs-handle {
    background: radial-gradient(ellipse at center, rgba(228, 228, 228, 1) 0%, rgba(179, 179, 179, 1) 34%, rgb(102, 91, 98) 100%);
}

#volume .rs-border {
    border-color: white;
}

p#RGK>a:link, p#RGK>a:visited {
    color: gold;
}

p#RGK {
    font-family: cursive;
    font-size: 1.2rem;
    color: black;
    position: absolute;
    margin: 4rem 0rem 0rem 0rem;
    justify-self: center;
}

.tanbou {
    display: flex;
    position: absolute;
    justify-self: center;
}

#svg1 {
    position: relative;
    top: -6vh;
    }

footer {
    font-family: cursive, monospace, sans-serif;
    font-weight: 500;
    color: maroon;
    background-color: rgb(217 255 251 / 62%);
    align-content: center;
    align-items: center;
    justify-items: center;
    display: grid;
    overflow: visible;
    position: fixed;
    grid-template-columns: 11% 88%;
    grid-template-rows: 8em;
    width: 100%;
    height: 5.5rem;
    bottom: 0em;
    left: 0em;
}

#social_icons {
    outline: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-shrink: 0;
    transform: none;
    opacity: 1;
    text-align: center;
}

.fa.fa-facebook {
    color: blue;
}

.fa.fa-linkedin {
    color: blue;
}

.fa.fa-whatsapp {
    color: green;
}

.fa.fa-github {
    color: black;
}

#footer_line {
    display: flex;
    opacity: 1;
    align-items: center;
    align-content: space-around;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 0px;
    line-height: normal;
    justify-content: center;
}

.logo {
    position: static;
    align-self: center;
}

#logo_image {
    width: 9rem;
}

.soundsettingsBar {
    text-align: center;
    border: 2px solid #010101;
    border-radius: 5px;
    padding: 5px;
    width: 200px;
    height: 150px;
} 

#presentation {
    font-family: cursive;
    position: relative;
    top: 0vh;
    text-align: center;
    font-size: x-large;
}

.regie {
    position: absolute;
    display: flex;
    justify-self: center;
    flex-direction: column;
}

.adspicture {
    border: 3px solid goldenrod;
    height: 12rem;
    width: 14rem;
}

#regieDownLeft {
    bottom: 7rem;
    z-index: 10;
    position: fixed;
    width: 10vw;
    justify-self: left;
    left: 2vw;
}

#regieDownRight {
    bottom: 7rem;
    z-index: 10;
    position: fixed;
    width: 25%;
    justify-self: right;
    margin-right: 2rem;
}

#name_banner {
    width: 34rem;
}

#settings, #saveSettings {
    width: 12vw;
}

@media screen and (max-width: 320px) and (orientation: portrait) {
    #regieDownRight {
        right: 2vw;
    }

    .adspicture {
        height: 5rem;
        width: 7rem;
    }

    .main {
        top: 5.5rem;
    }
    
    #name_banner {
        width: 12rem;
    }

    .setup {
        top: 11.5em;
        width: 100%;
        font-size: x-small;
    }

    #settings, #saveSettings {
        width: 15vw;
    }

    #tanbou {
        --vert: 0em;
    }

    #svg1 {
        --gabarit: 15em;
    }

    #presentation {
        font-size: x-small;
    }

    footer {    
        font-size: xx-small;
    }

    #social_icons {
        font-size: small;
    }

    .logo {
        width: 5rem;
    }

    #logo_image {
        width: 5rem;
    }

    .soundsettingsBar {
        width: 12rem;
        height: 17rem;
    }

    span.soundsettings {
        width: 5rem;
        height: 6rem;
    }

    input#checkpo {
        height: 0.75rem;
        width: 1rem;
    }

    input#pform1, input#pform2, input#pform3 {
        height: 1rem;
        width: 1.5rem;
    }

    input#taille, input#vertical {
        height: 1rem;
        width: 8rem;
        margin-left: 1rem;
    }

    .rs-container.rs-full {
        width: 60px;
        height: 60px;
        justify-self: anchor-center;
    }

    select#reverbs {
        font-size: larger;
    }
}

@media screen and (min-width: 321px) and (max-width: 376px) and (orientation: portrait) {
    #regieDownRight {
        right: 3vw;
    }

    .adspicture {
        height: 6rem;
        width: 8rem;
    }

    .main {
        top: 6.3rem;
    }
    
    #name_banner {
        width: 16rem;
    }

    .setup {
        top: 13.5em;
        width: 80%;
        font-size: x-small;
    }

    #settings, #saveSettings {
        width: 15vw;
    }

    #tanbou {
        --vert: 0em;
    }

    #svg1 {
        --gabarit: 15em;
    }

    #presentation {
        font-size: x-small;
    }

    footer {    
        font-size: xx-small;
    }

    #social_icons {
        font-size: small;
    }

    .logo {
        width: 5rem;
    }

    #logo_image {
        width: 5rem;
    }

    .soundsettingsBar {
        width: 13rem;
        height: 17rem;
    }

    span.soundsettings {
        width: 5rem;
        height: 6rem;
    }

    input#checkpo {
        height: 0.75rem;
        width: 1rem;
    }

    input#pform1, input#pform2, input#pform3 {
        height: 1rem;
        width: 1.5rem;
    }

    input#taille, input#vertical {
        height: 1rem;
        width: 8rem;
        margin-left: 1rem;
    }

    .rs-container.rs-full {
        width: 60px;
        height: 60px;
        justify-self: anchor-center;
    }

    select#reverbs {
        font-size: larger;
    }
}

@media screen and (min-width: 376px) and (max-width: 700px) and (orientation: portrait) {
    #regieDownRight {
        right: 3vw;
    }

    .adspicture {
        height: 7rem;
        width: 9rem;
    }

    .main {
        top: 7.3rem;
    }
    
    #name_banner {
        width: 18rem;
    }

    .setup {
        top: 16em;
        width: 71%;
        font-size: x-small;
    }

    #settings, #saveSettings {
        width: 4rem;
    }

    #tanbou {
        --vert: 2em;
    }

    #svg1 {
        --gabarit: 15em;
    }

    #presentation {
        font-size: x-small;
    }

    footer {    
        font-size: xx-small;
    }

    #social_icons {
        font-size: small;
    }

    .logo {
        width: 5rem;
    }

    #logo_image {
        width: 5rem;
    }

     .soundsettingsBar {
        width: 12rem;
        height: 17rem;
    }

    span.soundsettings {
        width: 5rem;
        height: 6rem;
    }

    input#checkpo {
        height: 0.75rem;
        width: 1rem;
    }

    input#pform1, input#pform2, input#pform3 {
        height: 1rem;
        width: 1.5rem;
    }

    input#taille, input#vertical {
        height: 1rem;
        width: 8rem;
        margin-left: 1rem;
    }

    .rs-container.rs-full {
        width: 60px;
        height: 60px;
        justify-self: anchor-center;
    }

    select#reverbs {
        font-size: larger;
    }
}

@media screen and (min-width: 700px) and (max-width: 768px) and (orientation: portrait)  {
    #regieDownRight {
        right: 2vw;
    }

    .adspicture {
        height: 9rem;
        width: 12rem;
    }

    .main {
        top: 9.5rem;
    }
    
    #name_banner {
        width: 29rem;
    }

    .setup {
        top: 13.5em;
        width: 100%;
        font-size: medium;
    }

    #settings, #saveSettings {
        width: 12vw;
    }

    #tanbou {
        --vert: 8em;
    }

    #svg1 {
        --gabarit: 15em;
    }

    #presentation {
        font-size: medium;
    }

    footer {    
        font-size: xx-small;
    }

    #social_icons {
        font-size: medium;
    }

    .logo {
        width: 8rem;
    }

    #logo_image {
        width: 5rem;
    }

    .soundsettingsBar {
        width: 28rem;
        height: 13rem;
    }

    span.soundsettings {
        width: 6rem;
        height: 7rem;
    }

    input#checkpo {
        height: 1.1rem;
        width: 3rem;
    }

    input#pform1, input#pform2, input#pform3 {
        height: 1.3rem;
        width: 2rem;
    }

    input#taille, input#vertical {
        height: 1rem;
        width: 18rem;
        margin-left: 1rem;
    }

    .rs-container.rs-full {
        width: 60px;
        height: 60px;
        justify-self: anchor-center;
    }

    select#reverbs {
        font-size: smaller;
    }

    
}

@media screen and (min-width: 769px) and (max-width: 992px) and (orientation: portrait)  {
    .regie {
        width: 57vw;
    }

    #regieDownRight {
        right: 24vw;
    }

    .adspicture {
        height: 16vh;
    }

    .main {
        top: 25rem;
    }
    
    #name_banner {
        width: 100%;
    }

    .setup {
        top: 18.5em;
        width: 100%;
    }

    #settings, #saveSettings {
        width: 12%;
    }

    #tanbou {
        --vert: 3em;
    }

    #svg1 {
        --gabarit: 15em;
    }

    #presentation {
        font-size: x-small;
    }

    footer {    
        font-size: xx-small;
    }

    #social_icons {
        font-size: medium;
    }

    .logo {
        width: 11vh;
    }

    #logo_image {
        width: 5rem;
    }

    .soundsettingsBar {
        width: 22rem;
        height: 8rem;
    }

    span.soundsettings {
        width: 6rem;
        height: 7rem;
    }

    input#checkpo {
        height: 1.5rem;
        width: 3rem;
    }

    input#pform1, input#pform2, input#pform3 {
        height: 2rem;
        width: 3rem;
    }

    input#taille, input#vertical {
        height: 1rem;
        width: 18rem;
        margin-left: 1rem;
    }

    .rs-container.rs-full {
        width: 60px;
        height: 60px;
        justify-self: anchor-center;
    }

    select#reverbs {
        font-size: larger;
    }
}

@media screen and (min-width: 993px) and (max-width: 1024px) and (orientation: portrait) {
    .regie {
        width: 34vw;
    }

    #regieDownRight {
        right: 10vw;
    }

    .adspicture {
        height: 21rem;
        width: 21rem;
    }

    .main {
        top: 23rem;
    }
    
    #name_banner {
        width: 47rem;
    }

    .setup {
        top: 19em;
        width: 100%;
        font-size: x-large;
    }

    #settings, #saveSettings {
        width: 12vw;
    }

    #tanbou {
        --vert: 28em;
    }

    #svg1 {
        --gabarit: 15em;
    }

    #presentation {
        font-size: x-large;
    }

    footer {
        font-size: xx-small;
    }

    #social_icons {
        font-size: larger;
    }

    .logo {
        width: 14vh;
    }

    #logo_image {
        width: 5rem;
    }

    .soundsettingsBar {
        width: 40rem;
        height: 12rem;
    }

    span.soundsettings {
        width: 9rem;
        height: 9rem;
    }

    input#checkpo {
        height: 1.7rem;
        width: 3rem;
    }

    input#pform1, input#pform2, input#pform3 {
        height: 2rem;
        width: 3rem;
    }

    input#taille, input#vertical {
        height: 2rem;
        width: 31rem;
        margin-left: 1rem;
    }

    .rs-container.rs-full {
        width: 60px;
        height: 60px;
        justify-self: anchor-center;
    }

    select#reverbs {
        font-size: 1.2rem;
    }
}

@media screen and (min-width: 1025px) and (max-width: 1440px) and (orientation: portrait) {
    .regie {
        width: 23vw;
    }

    #regieDownRight {
        right: 0vw;
    }

    .adspicture {
        height: 21rem;
        width: 21rem;
    }

    .main {
        top: 23rem;
    }
    
    #name_banner {
        width: 55rem;
    }

    .setup {
        top: 21em;
        width: 100%;
        font-size: x-large;
    }

    #settings, #saveSettings {
        width: 12vw;
    }

    #tanbou {
        --vert: 28em;
    }

    #svg1 {
        --gabarit: 32em;
    }

    #presentation {
        font-size: x-large;
    }

    footer {
        font-size: xx-small;
    }

    #social_icons {
        font-size: larger;
    }

    .logo {
        width: 17vh;
    }

    #logo_image {
        width: 5rem;
    }

    .soundsettingsBar {
        width: 40rem;
        height: 11rem;
    }

    span.soundsettings {
        width: 6rem;
        height: 8rem;
    }

    input#checkpo {
        height: 2rem;
        width: 3rem;
    }

    input#pform1, input#pform2, input#pform3 {
        height: 2rem;
        width: 3rem;
    }

    input#taille, input#vertical {
        height: 2rem;
        width: 31rem;
        margin-left: 1rem;
    }

    .rs-container.rs-full {
        width: 60px;
        height: 60px;
        justify-self: anchor-center;
    }

    select#reverbs {
        font-size: smaller;
    }
}

@media screen and (min-width: 1440px) and (max-width: 1500px)  and (orientation: portrait)  {
    .regie {
        width: 30vw;
    }

    #regieDownRight {
        right: 5vw;
    }

    .adspicture {
        height: 18rem;
        width: 18rem;
    }

    .main {
        top: 18rem;
    }
    
    #name_banner {
        width: 42rem;
    }

    .setup {
        top: 45.5em;
        width: 100%;
        font-size: x-large;
    }

    #settings, #saveSettings {
        width: 13vw;
    }

    #tanbou {
        --vert: 28em;
    }

    #svg1 {
        --gabarit: 15em;
    }

    #presentation {
        font-size: larger;
    }

    footer {
        font-size: xx-small;
    }

    #social_icons {
        font-size: larger;
    }

    .logo {
        width: 14vh;
    }

    #logo_image {
        width: 5rem;
    }

     .soundsettingsBar {
        width: 36rem;
        height: 9rem;
    }

    span.soundsettings {
        width: 6rem;
        height: 7rem;
    }

    input#checkpo {
        height: 3rem;
        width: 3rem;
    }

    input#pform1, input#pform2, input#pform3 {
        height: 3rem;
        width: 3rem;
    }

    input#taille, input#vertical {
        height: 2rem;
        width: 31rem;
        margin-left: 1rem;
    }

    .rs-container.rs-full {
        width: 60px;
        height: 60px;
        justify-self: anchor-center;
    }

    select#reverbs {
        font-size: larger;
    }
}


@media screen and (min-width: 1501px)  and (max-width: 2500px)  and (orientation: portrait)  {
    .regie {
        width: 25vw;
    }

    #regieDownRight {
        right: 2vw;
    }

    .adspicture {
        height: 40rem;
        width: 40rem;
    }

    .main {
        top: 42rem;
    }
    
    #name_banner {
        width: 124rem;
    }

    .setup {
        top: 18.5em;
        width: 100%;
        font-size: 3rem;
    }

    #settings, #saveSettings {
        width: 11vw;
    }

    #tanbou {
        --vert: 70em;
    }

    #svg1 {
        --gabarit: 50em;
    }

    #presentation {
        font-size: xxx-large;
    }

    footer {
        font-size: xx-small;
    }

    #social_icons {
        font-size: larger;
    }

    .logo {
        width: 17vh;
    }

    #logo_image {
        width: 5rem;
    }

    .soundsettingsBar {
        text-align: center;
        width: 60rem;
        height: 19rem;
    }

    span.soundsettings {
        width: 12rem;
        height: 13rem;
    }

    input#checkpo {
        height: 3rem;
        width: 5rem;
    }

    input#pform1, input#pform2, input#pform3 {
        height: 3rem;
        width: 3rem;
        margin: 21px;
    }

    input#taille, input#vertical {
        height: 2rem;
        width: 31rem;
        margin-left: 1rem;
    }

    .rs-container.rs-full {
        width: 60px;
        height: 60px;
        justify-self: anchor-center;
    }

    select#reverbs {
        font-size: smaller;
        width: 26rem;
        height: 4rem;
    }    
    
}

@media screen and (min-width: 320px)  and (orientation: landscape)  {
    .regie {
        width: 27vw;
    }

    #regieDownRight {
        right: 0vw;
    }

    .adspicture {
        height: 8rem;
        width: 11rem;
    }

    .main {
        top: 10rem;
    }
    
    #name_banner {
        width: 24rem;
    }

    .setup {
        top: 19.5em;
        width: 100%;
        font-size: smaller;
    }

    #settings, #saveSettings {
        width: 9vw;
    }

    #tanbou {
        --vert: 9em;
    }

    #svg1 {
        --gabarit: 16em;
    }

    #presentation {
        font-size: medium;
    }

    footer {
        font-size: xx-small;
    }

    #social_icons {
        font-size: 1rem;
    }

    #logo_image {
        width: 5rem;
    }

    .soundsettingsBar {
        text-align: center;
        width: 36rem;
        height: 14rem;
    }

    span.soundsettings {
        width: 8rem;
        height: 9rem;
    }

    input#checkpo {
        height: 2rem;
        width: 4rem;
    }

    input#pform1, input#pform2, input#pform3 {
        height: 2rem;
        width: 2rem;
        margin: 21px;
    }

    input#taille, input#vertical {
        height: 2rem;
        width: 31rem;
        margin-left: 1rem;
    }

    .rs-container.rs-full {
        width: 60px;
        height: 60px;
        justify-self: anchor-center;
    }

    select#reverbs {
        font-size: smaller;
    }    
    
}

@media screen and (min-width: 375px)  and (orientation: landscape)  {
    .regie {
        width: 27vw;
    }

    #regieDownRight {
        right: 0vw;
    }

    .adspicture {
        height: 8rem;
        width: 11rem;
    }

    .main {
        top: 10rem;
    }
    
    #name_banner {
        width: 24rem;
    }

    .setup {
        top: 19.5em;
        width: 100%;
        font-size: smaller;
    }

    #settings, #saveSettings {
        width: 9vw;
    }

    #tanbou {
        --vert: 9em;
    }

    #svg1 {
        --gabarit: 16em;
    }

    #presentation {
        font-size: medium;
    }

    footer {
        font-size: xx-small;
    }

    #social_icons {
        font-size: 1rem;
    }

    #logo_image {
        width: 5rem;
    }

    .soundsettingsBar {
        text-align: center;
        width: 36rem;
        height: 14rem;
    }

    span.soundsettings {
        width: 8rem;
        height: 9rem;
    }

    input#checkpo {
        height: 2rem;
        width: 4rem;
    }

    input#pform1, input#pform2, input#pform3 {
        height: 2rem;
        width: 2rem;
        margin: 21px;
    }

    input#taille, input#vertical {
        height: 2rem;
        width: 31rem;
        margin-left: 1rem;
    }

    .rs-container.rs-full {
        width: 60px;
        height: 60px;
        justify-self: anchor-center;
    }

    select#reverbs {
        font-size: smaller;
    }   
    
}

@media screen and (min-width: 425px)  and (orientation: landscape)  {
    .regie {
        width: 27vw;
    }

    #regieDownRight {
        right: 0vw;
    }

    .adspicture {
        height: 8rem;
        width: 11rem;
    }

    .main {
        top: 10rem;
    }
    
    #name_banner {
        width: 24rem;
    }

    .setup {
        top: 16em;
        width: 100%;
        font-size: smaller;
    }

    #settings, #saveSettings {
        width: 5rem;
    }

    #tanbou {
        --vert: 9em;
    }

    #svg1 {
        --gabarit: 16em;
    }

    #presentation {
        font-size: medium;
    }

    footer {
        font-size: xx-small;
    }

    #social_icons {
        font-size: 1rem;
    }

    #logo_image {
        width: 5rem;
    }

    .soundsettingsBar {
        text-align: center;
        width: 27rem;
        height: 13rem;
    }

    span.soundsettings {
        width: 6rem;
        height: 7rem;
    }

    input#checkpo {
        height: 1rem;
        width: 2rem;
    }

    input#pform1, input#pform2, input#pform3 {
        height: 1.2rem;
        width: 1.5rem;
        margin: 10px;
    }

    input#taille, input#vertical {
        height: 1rem;
        width: 20rem;
        margin-left: 1rem;
    }

    .rs-container.rs-full {
        width: 60px;
        height: 60px;
        justify-self: anchor-center;
    }

    select#reverbs {
        font-size: larger;
    }  
    
}

@media screen and (min-width: 768px)  and (orientation: landscape)  {
    .regie {
        width: 27vw;
    }

    #regieDownRight {
        right: -5vw;
    }

    .adspicture {
        height: 8rem;
        width: 11rem;
    }

    .main {
        top: 10rem;
    }
    
    #name_banner {
        width: 24rem;
    }

    .setup {
        top: 16em;
        width: 100%;
        font-size: smaller;
    }

    #settings, #saveSettings {
        width: 5rem;
    }

    #tanbou {
        --vert: 9em;
    }

    #svg1 {
        --gabarit: 16em;
    }

    #presentation {
        font-size: medium;
    }

    footer {
        font-size: medium;
    }

    #social_icons {
        font-size: 1rem;
    }

    #logo_image {
        width: 7rem;
    }

    .soundsettingsBar {
        text-align: center;
        width: 33rem;
        height: 13rem;
    }

    span.soundsettings {
        width: 7rem;
        height: 7rem;
    }

    input#checkpo {
        height: 1rem;
        width: 2rem;
    }

    input#pform1, input#pform2, input#pform3 {
        height: 1.2rem;
        width: 1.5rem;
        margin: 10px;
    }

    input#taille, input#vertical {
        height: 1rem;
        width: 24rem;
        margin-left: 1rem;
    }

    .rs-container.rs-full {
        width: 60px;
        height: 60px;
        justify-self: anchor-center;
    }

    select#reverbs {
        font-size: larger;
    }   
    
}

@media screen and (min-width: 992px)  and (orientation: landscape)  {
    .regie {
        width: 27vw;
    }

    #regieDownRight {
        right: 0vw;
    }

    .adspicture {
        height: 9rem;
        width: 14rem;
    }

    .main {
        top: 11rem;
    }
    
    #name_banner {
        width: 27rem;
    }

    .setup {
        top: 17.3em;
        width: 100%;
        font-size: smaller;
    }

    #settings, #saveSettings {
        width: 5rem;
    }

    #tanbou {
        --vert: 9em;
    }

    #svg1 {
        --gabarit: 16em;
    }

    #presentation {
        font-size: medium;
    }

    footer {
        font-size: medium;
    }

    #social_icons {
        font-size: 1rem;
    }

    #logo_image {
        width: 7rem;
    }

    .soundsettingsBar {
        text-align: center;
        width: 32rem;
        height: 13rem;
    }

    span.soundsettings {
        width: 7rem;
        height: 7rem;
    }

    input#checkpo {
        height: 1rem;
        width: 2rem;
    }

    input#pform1, input#pform2, input#pform3 {
        height: 1.2rem;
        width: 2rem;
        margin: 10px;
    }

    input#taille, input#vertical {
        height: 1rem;
        width: 24rem;
        margin-left: 1rem;
    }

    .rs-container.rs-full {
        width: 60px;
        height: 60px;
        justify-self: anchor-center;
    }

    select#reverbs {
        font-size: larger;
    }   
    
}

@media screen and (min-width: 1024px)  and (orientation: landscape)  {
    .regie {
        width: 27vw;
    }

    #regieDownRight {
        right: 0vw;
    }

    .adspicture {
        height: 10rem;
        width: 17rem;
    }

    .main {
        top: 12rem;
    }
    
    #name_banner {
        width: 27rem;
    }

    .setup {
        top: 18.5em;
        width: 100%;
        font-size: smaller;
    }

    #settings, #saveSettings {
        width: 5rem;
    }

    #tanbou {
        --vert: 9em;
    }

    #svg1 {
        --gabarit: 16em;
    }

    #presentation {
        font-size: medium;
    }

    footer {
        font-size: medium;
    }

    #social_icons {
        font-size: 1rem;
    }

    #logo_image {
        width: 8rem;
    }

    .soundsettingsBar {
        text-align: center;
        width: 30rem;
        height: 14rem;
    }

    span.soundsettings {
        width: 7rem;
        height: 8rem;
    }

    input#checkpo {
        height: 1rem;
        width: 2rem;
    }

    input#pform1, input#pform2, input#pform3 {
        height: 1.2rem;
        width: 2rem;
        margin: 10px;
    }

    input#taille, input#vertical {
        height: 1rem;
        width: 24rem;
        margin-left: 1rem;
    }

    .rs-container.rs-full {
        width: 60px;
        height: 60px;
        justify-self: anchor-center;
    }

    select#reverbs {
        font-size: larger;
    }   
    
}

@media screen and (min-width: 1440px) and (orientation: landscape)  {
    .regie {
        width: 27vw;
    }

    #regieDownRight {
        right: 3vw;
    }

    .adspicture {
        height: 11rem;
        width: 25rem;
    }

    .main {
        top: 12rem;
    }
    
    #name_banner {
        width: 31rem;
    }

    .setup {
        top: 19.5em;
        width: 100%;
        font-size: smaller;
    }

    #settings, #saveSettings {
        width: 6rem;
    }

    #tanbou {
        --vert: 9em;
    }

    #svg1 {
        --gabarit: 16em;
    }

    #presentation {
        font-size: medium;
    }

    footer {
        font-size: medium;
    }

    #social_icons {
        font-size: 1rem;
    }

    #logo_image {
        width: 8rem;
    }

    .soundsettingsBar {
        text-align: center;
        width: 30rem;
        height: 14rem;
    }

    span.soundsettings {
        width: 7rem;
        height: 8rem;
    }

    input#checkpo {
        height: 1rem;
        width: 2rem;
    }

    input#pform1, input#pform2, input#pform3 {
        height: 1.2rem;
        width: 2rem;
        margin: 10px;
    }

    input#taille, input#vertical {
        height: 1rem;
        width: 24rem;
        margin-left: 1rem;
    }

    .rs-container.rs-full {
        width: 60px;
        height: 60px;
        justify-self: anchor-center;
    }

    select#reverbs {
        font-size: larger;
    }   
    
}


@media screen and (min-width: 1500px)  and (orientation: landscape)  {
    .regie {
        width: 27vw;
    }

    #regieDownRight {
        right: 0rem;
    }

    .adspicture {
        height: 12rem;
        width: 24rem;
    }

    .main {
        top: 13rem;
    }
    
    #name_banner {
        width: 35rem;
    }

    .setup {
        top: 20.8em;
        width: 100%;
        font-size: smaller;
    }

    #settings, #saveSettings {
        width: 6rem;
    }

    #tanbou {
        --vert: 9em;
    }

    #svg1 {
        --gabarit: 16em;
    }

    #presentation {
        font-size: medium;
    }

    footer {
        font-size: medium;
    }

    #social_icons {
        font-size: 1rem;
    }

    #logo_image {
        width: 8rem;
    }

    .soundsettingsBar {
        text-align: center;
        width: 30rem;
        height: 14rem;
    }

    span.soundsettings {
        width: 7rem;
        height: 8rem;
    }

    input#checkpo {
        height: 1.2rem;
        width: 2rem;
    }

    input#pform1, input#pform2, input#pform3 {
        height: 1.2rem;
        width: 2rem;
        margin: 10px;
    }

    input#taille, input#vertical {
        height: 1rem;
        width: 24rem;
        margin-left: 1rem;
    }

    .rs-container.rs-full {
        width: 60px;
        height: 60px;
        justify-self: anchor-center;
    }

    select#reverbs {
        font-size: larger;
    }    
    
}

@media screen and (min-width: 2500px)  and (orientation: landscape)  {
    .regie {
        width: 40vw;
    }

    #regieDownRight {
        right: -1vw;
    }

    .adspicture {
        height: 23rem;
        width: 37rem;
    }

    .main {
        top: 25rem;
    }
    
    #name_banner {
        width: 54rem;
    }

    .setup {
        top: 27em;
        width: 100%;
        font-size: larger;
    }

    #settings, #saveSettings {
        width: 6vw;
    }

    #tanbou {
        --vert: 30em;
    }

    #svg1 {
        --gabarit: 25em;
    }

    #presentation {
        font-size: x-large;
    }

    footer {
        font-size: x-large;
    }

    #social_icons {
        font-size: 1rem;
    }

    #logo_image {
        width: 11rem;
    }

    .soundsettingsBar {
        text-align: center;
        width: 37rem;
        height: 16rem;
    }

    span.soundsettings {
        width: 8rem;
        height: 9rem;
    }

    input#checkpo {
        height: 1.8rem;
        width: 3rem;
    }

    input#pform1, input#pform2, input#pform3 {
        height: 1.8rem;
        width: 2rem;
        margin: 10px;
    }

    input#taille, input#vertical {
        height: 1rem;
        width: 27rem;
        margin-left: 1rem;
    }

    .rs-container.rs-full {
        width: 60px;
        height: 60px;
        justify-self: anchor-center;
    }

    select#reverbs {
        font-size: larger;
    }
    
}

.adsTop {
    text-align: center;
}