@font-face {
    font-family: 'RhymesDisplayRegular';
    src: url('Rhymes Display Regular.woff2') format('woff2'),
         url('Rhymes Display Regular.woff') format('woff');
}

@keyframes about {
    0% { left: 160px; top: 336px; }
    100% { left: 160px; top: 376px; }
}
@keyframes members {
    0% { left: 366px; top: 231px; }
    100% { left: 366px; top: 271px; }
}
@keyframes lectures {
    0% { left: 790px; top: 441px; }
    100% { left: 810px; top: 461px; }
}
@keyframes discussions {
    0% { left: 1042px; top: 173px; }
    100% { left: 1022px; top: 193px; }
}
@keyframes papers {
    0% { left: 247px; top: 632px; }
    100% { left: 225px; top: 612px; }
}

@keyframes blob-navi-ms {
    from { width: 50%; height: 50%; }
    to { width: 100%; height: 100%; }
}
/*@keyframes blob-navi-ms {
    from { left: -31.94px; top: 114.56px; width: 438.88px; height: 438.88px; }
    to { left: -182.88px; top: 10.13px; width: 837.75px; height: 837.75px; }
}*/
@keyframes appear-navi-ms {
    from { opacity: 0.0; }
    to { opacity: 1.0; }
}
@keyframes disappear-navi-ms {
    from { opacity: 1.0; }
    to { opacity: 0.0; }
}

html, body {
    margin: 0px;
    padding: 0px;
    border: 0px;
    font-family: 'RhymesDisplayRegular';
    color: black;
}

a:link {
    color: black;
    text-decoration: none;
}
a:visited {
    color: black;
    text-decoration: none;
}
a:hover {
    color: black;
    text-decoration: none;
    letter-spacing: 2px;
}
a:active {
    color: black;
    text-decoration: none;
}

/* Normal Screen */
#load-normal-screen {
    display: block;
    margin: auto;
    position: relative;
    width: 1366px;
}
#landingpage-about-ns {
    position: absolute;
    left: 160px;
    top: 336px;
    width: 52px;
    height: 27px;
    font-size: 18px;
    animation-name: about;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
#landingpage-members-ns {
    position: absolute;
    left: 366px;
    top: 231px;
    width: 178px;
    height: 27px;
    font-size: 18px;
    animation-name: members;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
#landingpage-lectures-ns {
    position: absolute;
    left: 790px;
    top: 441px;
    width: 178px;
    height: 27px;
    font-size: 18px;
    animation-name: lectures;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
#landingpage-discussions-ns {
    position: absolute;
    left: 1042px;
    top: 173px;
    width: 101px;
    height: 27px;
    font-size: 18px;
    animation-name: discussions;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
#landingpage-papers-ns {
    position: absolute;
    left: 247px;
    top: 632px;
    width: 56px;
    height: 27px;
    font-size: 18px;
    animation-name: papers;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
#blobvideo-ns {
    position: absolute;
    left: 324px;
    top: 10px;
    width: 739px;
    height: 739px;
    z-index: -3;
}
#blobvideo-ws {
    position: absolute;
    left: 422.5px;
    top: 1px;
    width: 1079px;
    height: 1079px;
    z-index: -3;
}
#logo-ns {
    position: fixed;
    right: 50px;
    bottom: 50px;
    width: 242px;
    height: 54px;
    font-size: 40px;
    z-index: 5;
}
#logo-ns:hover {
    letter-spacing: 0px;
}
#logo-container-ns {
    position: fixed;
    right: 0px;
    bottom: 0px;
    width: 375px;
    height: 145px;
    background: -webkit-radial-gradient(ellipse farthest-side at center center, #ffffff 0%, #ffffff 70%, rgba(255,255,255,0) 100%);
    background: -o-radial-gradient(ellipse farthest-side at center center, #ffffff 0%, #ffffff 70%, rgba(255,255,255,0) 100%);
    background: -moz-radial-gradient(ellipse farthest-side at center center, #ffffff 0%, #ffffff 70%, rgba(255,255,255,0) 100%);
    background: radial-gradient(ellipse farthest-side at center center, #ffffff 0%, #ffffff 70%, rgba(255,255,255,0) 100%);
    z-index: 3;
}
#logo-ws {
    position: fixed;
    right: 50px;
    bottom: 50px;
    width: 242px;
    height: 54px;
    font-size: 40px;
    z-index: 5;
}
#logo-ws:hover {
    letter-spacing: 0px;
}
#logo-container-ws {
    position: fixed;
    right: 0px;
    bottom: 0px;
    width: 375px;
    height: 145px;
    background: -webkit-radial-gradient(ellipse farthest-side at center center, #ffffff 0%, #ffffff 70%, rgba(255,255,255,0) 100%);
    background: -o-radial-gradient(ellipse farthest-side at center center, #ffffff 0%, #ffffff 70%, rgba(255,255,255,0) 100%);
    background: -moz-radial-gradient(ellipse farthest-side at center center, #ffffff 0%, #ffffff 70%, rgba(255,255,255,0) 100%);
    background: radial-gradient(ellipse farthest-side at center center, #ffffff 0%, #ffffff 70%, rgba(255,255,255,0) 100%);
    z-index: 3;
}
#small-text {
    font-size: 14px;
}

/* Wide Screen */
#load-wide-screen {
    display: none;
    margin: auto;
    position: relative;
    width: 1920px;
}
#small-text-ws {
    font-size: 20px;
}

/* Mobile Screen */
#centering-container {
    display: flex;
    justify-content: center;
    width: 375px;
}
#left-container {
    display: flex;
    justify-content: left;
    /*margin-left: 17px;*/
}
#right-container {
    display: flex;
    justify-content: right;
    /*margin-right: 34px;*/
}
#load-mobile-screen {
    display: none;
}
#navi-about-ms {
    position: absolute;
    left: 0px;
    top: 201px;
    width: 376px;
    height: 61px;
    font-size: 45px;
    text-align: center;
    opacity: 0.0;
    animation-name: appear-navi-ms;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
#navi-about-ms:hover {
    letter-spacing: 0px;
}
#navi-members-ms {
    position: absolute;
    left: 0px;
    top: 291px;
    width: 375px;
    height: 61px;
    font-size: 45px;
    text-align: center;
    opacity: 0.0;
    animation-name: appear-navi-ms;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
#navi-lectures-ms {
    position: absolute;
    left: 0px;
    top: 381px;
    width: 375px;
    height: 61px;
    font-size: 45px;
    text-align: center;
    opacity: 0.0;
    animation-name: appear-navi-ms;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
#navi-discussions-ms {
    position: absolute;
    left: 0px;
    top: 471px;
    width: 375px;
    height: 61px;
    font-size: 45px;
    text-align: center;
    opacity: 0.0;
    animation-name: appear-navi-ms;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
#navi-papers-ms {
    position: absolute;
    left: 0px;
    top: 561px;
    width: 375px;
    height: 61px;
    font-size: 45px;
    text-align: center;
    opacity: 0.0;
    animation-name: appear-navi-ms;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
#blobvideo-ms {
    position: absolute;
    /*left: -31.94px;
    top: 114.56px;
    width: 438.88px;
    height: 438.88px;*/
    top: 150px;
    width: 100%;
    z-index: -3;
    /*animation-name: blob-navi-ms;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: 1s;*/
    opacity: 0.0;
    animation-name: appear-navi-ms;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
#logo-ms {
    position: absolute;
    left: 77px;
    top: 617px;
    width: 247px;
    height: 54px;
    font-size: 40px;
    z-index: 3;
    opacity: 1.0;
    animation-name: disappear-navi-ms;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: 2s;
}
#logo-top-ms {
    position: absolute;
    left: 17px;
    top: 19px;
    width: 242px;
    height: 40px;
    font-size: 30px;
    z-index: 3;
    opacity: 0.0;
    animation-name: appear-navi-ms;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
#logo-top-ms:hover {
    letter-spacing: 0px;
}
#logo-pages-ms {
    position: absolute;
    /*left: 17px;*/
    top: 19px;
    /*width: 242px;*/
    width: 375px;
    height: 40px;
    font-size: 30px;
    z-index: 3;
    text-align: left;
    margin-left: 17px;
}
#logo-pages-ms:hover {
    letter-spacing: 0px;
}
#burger-ms {
    position: absolute;
    /*left: 303.63px;*/
    /*right: 34px;*/
    right: 0px;
    top: 32px;
    width: 37.48px;
    height: 15.81px;
    z-index: 4;
}
#burger-line1-ms {
    position: absolute;
    /*left: 303.63px;*/
    /*right: 34px;*/
    right: 0px;
    top: 32px;
    width: 37.48px;
    z-index: 3;
}
#burger-line2-ms {
    position: absolute;
    /*left: 303.63px;*/
    /*right: 34px;*/
    right: 0px;
    top: 38.91px;
    width: 37.48px;
    z-index: 3;
}
#burger-line3-ms {
    position: absolute;
    /*left: 303.63px;*/
    /*right: 34px;*/
    right: 0px;
    top: 45.81px;
    width: 37.48px;
    z-index: 3;
}
#small-text-ms {
    font-size: 12px;
}

@media screen and (min-width: 1920px) {
    #load-normal-screen {
        display: none;
    }

    #load-wide-screen {
        display: block;
    }
}
/*@media screen and (max-width: 900px) {
    #load-normal-screen {
        display: none;
    }

    #load-mobile-screen {
        display: block;
    }
}*/
@media screen and (max-width: 900px) and (orientation: portrait) {
    #load-normal-screen {
        display: none;
    }

    #load-mobile-screen {
        display: block;
        width: 100vh;
    }
}
@media screen and (max-width: 900px) and (orientation: landscape) {
    #load-normal-screen {
        display: none;
    }

    #load-normal-screen {
        display: block;
        width: 100vw;
    }
}