@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&family=Sanchez&display=swap');

    * {
        margin:0;
        padding:0;
        font-family:'Roboto',sans-serif;
        font-size:12pt;
        font-weight:300;
        color:#3c494c;
        box-sizing:border-box;
    }
    
    body {
        app-region: drag;
        user-select: none;
    }
    
    button, .lessonText {
        app-region: no-drag;
    }
    
    .lessonText::-webkit-scrollbar {
        width: 5px;
    }
    
    /* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #53676c;
    border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #53676c;
}

    h1,h2,h3,h4,#logoA,#logoB {
        font-family:'Sanchez',serif;
        font-weight:100;
        line-height:1;
    }

    h1 {
        font-size:24pt;
        color:#53676c;
        text-transform:uppercase;
    }

    h2 {
        font-size:17pt;
        padding:12pt 0pt 12pt 0pt;

        color:#53676c;
    }

    h3 {
        font-size:12pt;
        color:#93a7ac;
    }
    

    p, li {
        margin-bottom:18pt;
    }
    
    ol, ul {
        margin-left:20px;
    }
    
    ul li::marker {
        color:#53676c;
    }
    
    strong {
        font-weight:900;
        color:#53676c;
    }

    body {
        display:flex;
        justify-content:center;
        align-items:center;
        width:100%;
        height:100%;
        /*background:url(bg.webp) center center repeat;*/
    }

    #mainContainer {
        position:relative;
        display:flex;
        flex-direction:row;
        justify-content:space-between;
        width:1000px;
        padding:0px;
    }

    #leftContainer {
        position:relative;
        display:flex;
        flex-direction:row;
        justify-content:space-between;
        max-width:1000px;
        height:650px;
        background-color:#fff;
        border-radius:20px;
        box-shadow:0px 0px 20px rgba(0,0,0,0.2);
        overflow:hidden;
    }

    #rightContainer {
        display:flex;
        position:relative;
        flex-direction:column;
        justify-content:space-between;
        width:300px;
        height:650px;
        background-color:#374548;
        border-radius:20px;
        box-shadow:0px 5px 15px rgba(0,0,0,0.1);
        overflow:hidden;
        padding:0px;
        display:none;
    }
    
    #rightContainer img {
        width:100%;
    }

    #rightContainer h3 {
        padding:10px 30px;
        font-size:17pt;
    }

    #rightContainer p {
        padding:0 30px;
        color:#fff;
        font-size:10pt;
        line-height:1.3;
    }
    
    #rightContainer p:last-of-type {
        margin:0;
    }

    #rightContainer div:last-of-type {
        padding:30px;
    }

    #rightContainer button {
        width:100%;
        padding:10px;
        font-family:'Sanchez',serif;
        text-transform:uppercase;
        color:#fff;
        background-color:#6f8a91;
        border:none;
        border-radius:5px;
    }

    #leftHalf, #rightHalf {
        width:620px;
    }

    #rightHalf {
        padding:80px 40px 40px 0;
        z-index:10;
    }

    #video1 {
        position:absolute;
        bottom:0px;
        left:0px;
        z-index:2;
    }

    #video2 {
        position:absolute;
        bottom:0px;
        left:0px;
        z-index:1;
    }

    #mediaButtons {
        position:absolute;
        left:30px;
        bottom:30px;
        width:50px;
        z-index:100;
    }

    #mediaButtons button {
        width:50px;
        height:50px;
        margin-top:20px;
        background-color:rgba(255,255,255,0.8);
        background-size:35px;
        background-position:center center;
        background-repeat:no-repeat;
        border-radius:10px;
        border:none;
    }
    
    #playVideo {
        background-image:url("rotate.svg");
    }
    
    #altVideo {
        background-image:url("organs.svg");
    }
    
    #viewGallery {
        background-image:url("gallery.svg");
    }

    #logo {
        position:absolute;
        top:30px;
        left:30px;
        z-index:100;
    }

    #logoA {
        font-size:48px;
        text-transform:uppercase;
        color:#53676c;
        line-height:1;
    }

    #logoA sup {
        display:inline-block;
        position:relative;
        font-family:'Roboto',sans-serif;
        font-weight:800;
        font-size:26px;
        color:#b7c4c8;
        margin-top:-20px;
    }

    #logoB {
        font-size:14px;
        color:#748e95;
        line-height:1;
    }

    #nav {
        position:absolute;
        top:30px;
        right:30px;
        z-index:1000 !important;
    }

    #nav button {
        position:relative;
        width:40px;
        height:40px;
        border:none;
        background-color:transparent;
        background-image:url("menu.svg");
        background-size:contain;
        z-index:1000 !important;
    }
    
    #nav button:hover, #mediaButtons button:hover, .lessonNav button:hover {
        opacity:0.6;
        cursor:pointer;
    }

    .lessonText {
        margin:30px 0;
        padding-right:30px;
        height:400px;
        line-height:1.3;
        overflow-y:scroll;
    }

    .lessonNav {
        display:flex;
        justify-content:space-between;
    }
    
    .lessonNav button {
        width:100%;
        padding:0px;
        font-family:'Sanchez',serif;
        text-transform:uppercase;
        color:#53676c;
        height:30px;
        background:transparent;
        border:none;
    }
    
    .lessonNav button:first-of-type {
        background-image:url(prev.svg);
        background-repeat:no-repeat;
        background-position:left center;
        background-size:contain;
        text-align:left;
        padding-left:25px;
    }
    
    .lessonNav button:last-of-type {
        background-image:url(next.svg);
        background-repeat:no-repeat;
        background-position:right center;
        background-size:contain;
        text-align:right;
        padding-right:25px;
    }
    
    #leftHalf .lessonNav {
        display:none;
    }

    .elements {
        display:none;
    }

    .elements:first-of-type {
        display:block;
    }
    
    #videos {
        position:absolute;
        height:600px;
        width:600px;
        bottom:0;
    }

    #videos video {
        margin:0 0 0 -50px;
        position:absolute;
        bottom:0;
        width:600px;
        height:600px;
    }





#galleryWindow {
    background:rgb(255 255 255 / .2);
    border-radius:16px;
    box-shadow: 0 4px 30px rgb(0 0 0 / .1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border:1px solid rgb(255 255 255 / .3);
}


@media only screen and (orientation: portrait) {
    
    #logoA {
        font-size:36px;
        text-transform:uppercase;
        color:#53676c;
        line-height:1;
    }

    #logoA sup {
        display:inline-block;
        position:relative;
        font-family:'Roboto',sans-serif;
        font-weight:800;
        font-size:18px;
        color:#b7c4c8;
        margin-top:-20px;
    }

    #logoB {
        font-size:10px;
        color:#748e95;
        line-height:1;
    }
    
    #mainContainer {
        position:relative;
        display:block;
        width:100vw;
        padding:0px;
    }

    #leftContainer {
        position:relative;
        display:block;
        max-width:100vw;
        height:auto;
        border-radius:0px;
        box-shadow:none;
        overflow-y:visible;
        overflow-x:hidden;
        padding-top:100px;
    }

    #rightContainer {
        display:block;
        position:relative;
        width:100vw;
        height:auto;
        background-color:#374548;
        border-radius:0px;
        box-shadow:none;
        overflow:visible;
        padding:0px;
    }
    
    #leftHalf, #rightHalf {
        position:relative;
        display:block;
        width:100vw;
        min-height:600px;
        height:auto !important;
    }
    
    #leftHalf .lessonNav {
        display:flex;
        position:relative;
        padding:200px 20px 0px 20px;
        z-index:50;
    }

    #rightHalf {
        position:relative;
        padding:20px 30px 40px 30px;
        z-index:10;
    }
    
    #rightHalf .lessonNav {
        display:none;
    }
    
    #mediaButtons {
        display:flex;
        position:absolute;
        left:0px;
        bottom:80px;
        flex-direction:row;
        width:100%;
        justify-content:center;
    }
    
    #mediaButtons button {
        margin:0 20px;
    }
    
    #videos {
        display:block;
        position:relative;
        height:800px;
    }
    
    #videos video {
        margin:0;
        position:absolute;
        bottom:0;
        
    }
    
    .lessonText {
        margin:30px 0;
        padding-right:0px;
        height:auto;
        overflow:visible;
    }
    
#videos {
    position: absolute;
    top: -10%;
    left: -50%;
    width: 200%;
    height: 200%;
    overflow-x:hidden;
}

#video1, #video2 {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left:0;
    margin-left: 0%;
    min-height: 50%;
    min-width: 50%;
}
}