:root{--blue: #0276A6;--blue-light: #59a9de;--green: #0ac890;--green-light: #6aebb7;--red: #df4153;--red-light: #e7949e;--grey: #eee;--grey-dark: #888;background-color:var(--grey2);--body-font: 20px;--body-font-big: 26px;--heading-font: 34px;--border-radius: 10px;--font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;--black: #000;--white: #fff;--grey1: #232323;--grey2: #272727;--grey3: #3a3a3a}*{margin:0;padding:0}html,body,#root{height:100%}#root{font-family:var(--font-family);color:var(--white);display:flex;flex-direction:column;gap:10%}h3{font-size:24px;text-align:center}h1.course-title{color:var(--white);margin:2.5% 0;text-align:center;font-size:68px}@media only screen and (max-width: 770px){h1.course-title{font-size:44px}}main{margin:0 10%;flex:1}@media only screen and (max-width: 770px){main{margin:0}}.button-green{font-size:var(--header-login-fontsize);color:var(--white);background-color:var(--green);padding:10px 18px;border:none;border-radius:10px;transition:background-color .3s ease}.button-green:hover{background-color:var(--green-light)}.button-green:disabled{background-color:var(--grey-dark);filter:blur(2px)}ul{list-style-type:none;text-align:center}a.green-highlight{color:var(--green);text-decoration:none}a.green-highlight:visited{color:var(--green)}a.green-highlight:hover{color:var(--green-light);text-decoration:underline}#message-container{position:fixed;top:0;left:0;width:100vw;height:100vh;display:none;align-items:center;justify-content:center;flex-direction:column;background-color:#0009;z-index:999}.message-confirm{background-color:var(--green)}.message-cancel{background-color:var(--red)}.message-cancel:hover{background-color:var(--red-light)}.message-buttons{display:flex;align-items:center;justify-content:center;flex-direction:row;margin:2.5%;gap:2.5%}.file-input{margin:2.5%}.file-input::file-selector-button{font-size:var(--header-login-fontsize);color:var(--white);background-color:var(--green);padding:10px 18px;border:none;border-radius:10px}.drop-zone{margin-top:2.5%;padding:30px;border:2px dashed var(--green);border-radius:var(--border-radius);background-color:none;text-align:center;cursor:pointer;transition:background-color .2s ease}.drop-zone.dragging{background-color:var(--green-light);border-color:var(--blue)}textarea{font-family:Arial,Helvetica,sans-serif}.loading-bar-container{width:90%;margin:30px 5%;height:30px;background-color:var(--grey2);border-radius:var(--border-radius);overflow:hidden;display:flex;align-items:center;text-align:center;position:relative}.loading-bar-fill{height:100%;background-color:var(--blue);transition:width .3s ease-in-out;border-radius:var(--border-radius)}.loading-bar-text{color:var(--white);position:absolute;width:100%}iframe.article{width:100%;height:80vh}.quick-center{display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center}:root{--level-red: #ffddee;--level-green: #d0f0c0;--level-purple: #c1c1f4;--level-orange: #f8d7b5;--level-yellow: #fff9c4;--level-blue: #cce5ff;--level-grey: var(--grey3);--font-family-main: Arial, Helvetica, sans-serif}.tile-collection{width:100%;display:flex;align-items:stretch;flex-direction:row;justify-content:left}.tile{font-family:var(--font-family-main);display:flex;flex-direction:column;width:25%;background:var(--grey3);margin:2.5%;border-radius:var(--border-radius);font-size:var(--body-font);padding:30px;color:var(--white);text-align:left;gap:20px;box-shadow:0 4px 8px #0009,0 8px 16px #00000080}.tile.medium{width:40%}.tile.big{width:60%}.tile.half-width{width:40%}.tile.full-width{width:90%}.tile.force-full{width:100%;padding:10% 0 0}.tile.full{padding:0;background:none;font-size:var(--heading-font);box-shadow:none}.tile.center-content{align-items:center;justify-content:flex-start;margin-top:100px;flex-direction:column}.tile h2{font-size:30px;text-align:center}.tile .text-small{padding:2.5%;font-size:20px;text-align:center}.tile li{padding:5px;transition:transform .3s ease;-webkit-user-select:none;user-select:none}.tile li.hover-shift .before-text{opacity:0;padding:5px;transition:opacity .3s ease}.tile li.hover-shift .below-text{opacity:0;padding:5px;transition:opacity .3s ease;color:var(--red)}.tile li.hover-shift:hover .below-text{opacity:1}.tile li.hover-shift .below-text:hover,.tile li.hover-shift .course-title:hover{text-decoration:underline}.tile li.hover-shift:hover .before-text{opacity:1;text-decoration:none}.tile li.hover-shift:hover{padding:5px;transform:translate(20px)}.square-container{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto;gap:2%;margin:30px}.square-container .square{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:20px;background-color:var(--blue);border-radius:var(--border-radius);color:#fff;transition:background-color .2s ease,transform .2s ease;padding:20px 0}.square-container .square:hover{background-color:var(--blue-light);transform:scale(1.05)}table.list-table{border-collapse:collapse}table.list-table td>a{display:inline-block;font-weight:700;color:var(--green);transition:transform .3s ease;padding-bottom:15px}table.list-table td>a:hover{transform:translate(20px)}table.list-table td,th{text-align:left;padding:4px;border-radius:8px;color:var(--white);font-size:var(--body-font)}table.list-table th{color:var(--blue);font-size:var(--body-font-big)}table.list-table tr{border-radius:8px}.level-group{display:flex;align-items:center;flex-direction:column;justify-content:center;width:100%;border-radius:inherit;padding:2.5%;box-shadow:0 4px 8px #0009,0 8px 16px #00000080}.level-group.dark-text{color:var(--black)}.level{position:relative;display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:var(--blue-light);width:100px;aspect-ratio:1.5 / 1;margin:2.5%;font-weight:700;z-index:10;box-shadow:0 8px #fff;transition:transform .3s ease,box-shadow .3s ease}.after-text{position:absolute;opacity:0;content:"hi";font-size:var(--body-font);background-color:var(--grey3);transform:translate(100px);padding:10px;border-radius:var(--border-radius);transition:opacity .3s ease;font-weight:lighter;color:var(--white)}.level.left{--translate-x: translateX(-80px)}.level.left.far{--translate-x: translateX(-120px)}.level.right{--translate-x: translateX(80px)}.level.right.far{--translate-x: translateX(120px)}.level{transform:var(--translate-x, translateX(0))}.level:hover{transform:var(--translate-x, translateX(0)) scale(1.1) translateY(-10px);box-shadow:none}.level:hover .after-text{opacity:1}.level .level-icon{width:60%}@media (max-width: 1000px) and (min-width: 770px){.square-container{grid-template-columns:repeat(2,1fr);gap:10px}.square-container .square{aspect-ratio:auto}}@media (max-width: 770px){.square-container{grid-template-columns:repeat(1,1fr);gap:20px}.square-container .square{aspect-ratio:auto;padding:15px 0}.tile.center-content{margin-top:0;height:150px;justify-content:center}}.course-creator{display:flex;align-items:center;justify-content:center;margin:2.5%;padding:2.5%;background-color:none;border-radius:var(--border-radius);aspect-ratio:2 / 1;height:100%}.flashcard-container{display:flex;align-items:center;justify-content:center;z-index:1;perspective:1000px}.flashcard-full{display:flex;align-items:center;justify-content:center;gap:15%;padding:2rem;width:100%;box-sizing:border-box}.flashcard{flex:1;max-width:500px;aspect-ratio:1 / 1.25;background-color:var(--blue-light);border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;font-size:var(--heading-font);transition:transform .6s;color:var(--grey2);-webkit-user-select:none;user-select:none;position:relative;transform-style:preserve-3d}.flashcard-front{top:0;left:0;position:absolute;width:100%;height:100%;border-radius:var(--border-radius);backface-visibility:hidden;display:flex;align-items:center;justify-content:center;font-size:var(--heading-font);color:var(--white);-webkit-user-select:none;user-select:none;overflow:hidden;background-color:var(--blue-light)}.flashcard.flipped{transform:rotateY(180deg) scaleX(-1)}.flashcard.back-card:after{content:"";position:absolute;background-color:var(--blue);transform:rotate(4deg);top:0;left:15px;width:100%;height:100%;z-index:-1;border-radius:var(--border-radius)}.flashcard.flipped.back-card:after{display:none}.flashcard-content{width:250px;overflow-y:auto;text-align:center;display:flex;align-items:center;justify-content:center}.button-green.flashcard-btn{font-size:var(--heading-font)}.button-collection-row{display:flex;align-items:flex-start;justify-content:center;flex-direction:row;gap:30px}.clause-wrapper{position:relative;display:inline-block}.help-tip{display:none;position:absolute;font-family:Arial,Helvetica,sans-serif;top:100%;right:0;background-color:var(--level-orange);color:var(--grey-dark);padding:8px;font-size:16px;border-radius:var(--border-radius);box-shadow:0 2px 6px #0003;z-index:10;width:100%}.clause-wrapper:hover .help-tip{display:block}.sentence-check{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:25px;aspect-ratio:1 / 1;border-radius:5px;border:1px solid black;background-color:var(--red)}.sentence-check:checked{background-color:var(--green)}.toggle-switch{width:80px;height:40px;border-radius:40px;background-color:var(--level-orange);position:absolute;right:30px;bottom:30px;cursor:pointer;transition:background-color .2s}.toggle-switch.on{background-color:var(--level-green)}.toggle-thumb{width:30px;height:30px;background-color:var(--white);color:var(--black);border-radius:15px;position:relative;top:5px;left:5px;transition:left .2s ease;text-align:center;font-size:25px}.toggle-switch.on .toggle-thumb{left:45px}.feedback-bar{background:var(--grey3);padding:15px;color:var(--white);display:flex;align-items:center;justify-content:center}.feedback-form{display:flex;align-items:center;justify-content:center;flex-direction:column}.feedback-input{margin:2.5%;padding:1%;width:70%;border:none;border-bottom:3px solid var(--grey-dark);border-radius:0;text-align:center;transition:border .2s ease,box-shadow .3s ease}.feedback-input:focus{outline:none;border-color:var(--blue-light);box-shadow:0 4px 8px #0006}.feedback-input.body{display:flex;align-items:flex-start;justify-content:center;border:3px solid var(--grey-dark);aspect-ratio:3 / 1}.feedback-input.body:focus{outline:none;border-color:var(--blue-light)}.footer-container{display:flex;align-items:center;justify-content:center;height:175px;flex-wrap:wrap}footer{width:80%;height:100%;padding:2.5% 2.5% 1%;display:flex;align-items:flex-start;justify-content:center;background:var(--blue);border-top-left-radius:50px;border-top-right-radius:50px;gap:20px}@media only screen and (max-width: 770px){footer{width:90%;border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.large-only{display:none}}footer>div{width:100%;height:100%;display:flex;align-items:center;justify-content:flex-start;flex-direction:column}.footer-logo{width:100px}.footer-logo-container{align-items:center;justify-content:center}.footer-column{display:flex;align-items:center;justify-content:space-evenly;flex-direction:column;height:100%}footer h2{font-family:var(--font-family-main);text-align:center}footer li{font-family:var(--font-family-main);list-style:none;text-align:center}:root{--header-fontsize: 20px;--header-login-fontsize: 20px}header{background-color:var(--grey1);display:flex;min-height:80px}header .logo{width:25%;display:flex;align-items:center;justify-content:center}header .logo a{width:25%}header .logo img{width:90px;filter:drop-shadow(1px 0 0 white) drop-shadow(-1px 0 0 white) drop-shadow(0 1px 0 white) drop-shadow(0 -1px 0 white) drop-shadow(1px 1px 0 white) drop-shadow(-1px 1px 0 white) drop-shadow(1px -1px 0 white) drop-shadow(-1px -1px 0 white)}header ul{width:50%;list-style-type:none;display:flex;align-items:center;flex-direction:row}@media only screen and (max-width: 770px){header ul{flex-direction:column}}header ul a{width:100%;text-align:center;padding:10px;font-size:var(--header-fontsize);color:var(--white);transition:transform .2s ease}header ul a{color:inherit;text-decoration:none}header ul a:hover{transform:scale(1.2)}header .login-container{width:25%;display:flex;align-items:center;justify-content:center}