@import"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap";.header{position:absolute;width:500px;top:0;left:0;width:100vw;height:50px;border-bottom:.5px solid var(--grey-2);display:flex;padding:10px 20px;box-sizing:border-box;justify-content:space-between;background-color:#fff}.product-icon{height:30px;margin-right:7.5px}.header-left,.header-center,.header-right{display:flex;align-items:center;width:calc(100vh / 3)}.header-left{text-decoration:none;color:var(--grey-7)}.header-center{justify-content:center}.product-title{font-size:26px;font-weight:700;margin-left:-8px}.game-title{font-size:24px;font-weight:600}.header-right{gap:10px;justify-content:right}.header-button{cursor:pointer;height:32px}.spinner{border:3px solid var(--grey-3);border-top:3px solid var(--blue-5);border-radius:50%;width:24px;height:24px;animation:spin 1s linear infinite;margin-right:10px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media screen and (max-width: 768px){.header{width:100vw}.header-center{display:none}}.popup-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0000001a;display:flex;justify-content:center;align-items:center;z-index:5}.popup-container{padding:10px 40px 30px;max-height:90vh;max-width:450px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;position:relative;box-sizing:border-box}.popup-content{scrollbar-width:none;max-height:85vh;overflow-y:auto}.popup-content::-webkit-scrollbar{display:none}.popup-close-button{position:sticky;top:20px;left:500px;background:none;border:none;font-size:18px;cursor:pointer;z-index:20}.popup-title{font-weight:700;font-size:24px;margin-bottom:0;margin-top:0}.popup-title-description{font-style:italic;margin-bottom:20px;margin-top:5px}.popup-section-title{font-size:18px}.voorbeelden-list{list-style-type:disc;padding-left:20px;margin-top:10px}.voorbeelden-list li{margin-bottom:5px;line-height:1.2}@media screen and (max-width: 768px){.popup-container{width:350px;padding:10px 20px;box-sizing:border-box}.popup-close-button{top:20px;left:290px}}:root{--yellow-1: #f8edda;--yellow-2: #f1dbb6;--yellow-3: #ebc891;--yellow-4: #e4b66d;--yellow-5: #dda448;--blue-1: #dcebf6;--blue-2: #bad6ed;--blue-3: #97c2e5;--blue-4: #75addc;--blue-5: #5299D3;--blue-6: #427aa9;--blue-7: #315c7f;--blue-8: #213d54;--blue-9: #101f2a;--blue-10: #000000;--green-1: #e2f1e5;--green-2: #c6e2cb;--green-3: #a9d4b2;--green-4: #8dc598;--green-5: #70B77E;--red-1: #edd8d2;--red-2: #dab1a6;--red-3: #c88979;--red-4: #b5624d;--red-5: #a33b20;--purple-1: #edddef;--purple-2: #dbbcdf;--purple-3: #ca9ace;--purple-4: #b879be;--purple-5: #A657AE;--grey-1: #ededed;--grey-2: #dadada;--grey-3: #c8c8c8;--grey-4: #b5b5b5;--grey-5: #a3a3a3;--grey-6: #828282;--grey-7: #626262;--grey-8: #414141;--grey-9: #212121;--grey-10: #000000}html,body{font-family:Open Sans;color:var(--grey-7);height:100vh;margin:0;display:flex;align-items:center;justify-content:center}.break-line{height:1px;width:100%;background-color:var(--grey-2);margin-top:20px;margin-bottom:20px}.break-line-vertical{height:100%;width:1px;background-color:var(--grey-2);margin-right:20px;margin-left:20px}.last-paragraph{margin-bottom:0}.green-text{color:var(--green-4);font-weight:700}.yellow-text{color:var(--yellow-4);font-weight:700}.grey-text{color:var(--grey-7);font-weight:700}.blue-text{color:var(--blue-4);font-weight:700}.terug-knop{bottom:20px;cursor:pointer;position:absolute;font-size:50px;font-weight:300;color:var(--grey-4);text-decoration:none;transition:.3s}.terug-knop:hover{color:var(--grey-7)}.popup-error{position:absolute;top:20px;left:50%;transform:translate(-50%);background-color:#000;color:#fff;padding:10px;border-radius:5px;z-index:10;opacity:0;transition:opacity .2s ease-in-out}.popup-error.show{opacity:1}@media screen and (max-width: 768px){.terug-knop{display:none}}.bar-chart-container{width:100%}.info-example-words{display:flex;flex-direction:column}.info-example-letter-row{display:flex;align-items:center;margin-bottom:10px}.info-arrow{margin:0 18px;font-weight:700;font-size:18px;color:var(--grey-7)}.info-example-letter{width:25px;height:25px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--grey-2);margin-right:6px;font-size:14px;font-weight:700;box-shadow:.5px .5px .5px #0003;text-transform:uppercase;color:var(--grey-7);transition:.3s ease}.info-example-letter.incorrect{background-color:var(--grey-7);color:#fff}.info-example-letter.correct{background-color:var(--green-4);color:#fff}.info-example-letter.misplaced{background-color:var(--yellow-4);color:#fff}.juiste-woord{font-weight:700;font-size:40px;display:flex;justify-content:center;margin-top:-40px;margin-bottom:-40px}.congrats-container{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative}.congrats-icon{animation:pop-in 10s ease-in-out infinite;position:relative}.congrats-icon-img{width:80px}@keyframes pop-in{0%{transform:scale(1)}10%{transform:scale(1)}12%{transform:scale(.85)}14%{transform:scale(1.25)}16%{transform:scale(1)}}.bar-chart-container{margin-top:20px}.bar-chart-container canvas{width:100%!important;height:auto!important}.chart-title{margin-bottom:0}.stats-general{display:flex;gap:20px;height:70px}.stats-group{display:flex;width:50%;justify-content:center;gap:20px}.stats-category{display:flex;flex-direction:column;align-items:center}.stats-value{font-size:28px;font-weight:600;margin:0}.stats-label{font-size:12px;margin:0;text-align:center}@media screen and (max-width: 768px){.stats-general{gap:0px}}.stats-table{width:100%;border-collapse:collapse;margin:20px 0;font-size:16px;text-align:left}.stats-table thead tr{background-color:#f2f2f2;color:#333;font-weight:700}.stats-table th,.stats-table td{padding:12px 15px;border-bottom:1px solid #ddd}.stats-table tbody tr:nth-child(2n){background-color:#f9f9f9}.stats-table tbody tr:hover{background-color:#f1f1f1}.stats-table tbody td{color:#555}.stats-table th{text-transform:uppercase;letter-spacing:.05em}.index-container{display:flex;flex-direction:column;align-items:center;height:100vh;font-family:Arial,sans-serif;width:100vw}.index-title{font-size:50px;font-weight:600;margin-bottom:10px;color:var(--grey-7);margin-top:100px}.break-line-index{width:700px}.games-container{margin-top:20px;margin-bottom:20px;display:flex;flex-wrap:wrap;gap:20px;max-width:80%;justify-content:center}.game-card{display:flex;align-items:center;width:250px;height:250px;border:1px solid var(--grey-2);box-shadow:0 4px 15px #0000001a;border-radius:8px;overflow:hidden;background-color:#fff;transition:transform .3s ease,box-shadow .3s ease;text-decoration:none;color:var(--grey-7)}.game-card:hover{transform:translateY(-2px)}.left-ribbon{width:40px;height:100%;flex-shrink:0}.game-card-content{flex-grow:1;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:25px;box-sizing:border-box;height:100%;width:100%}.game-card-logo-container{display:flex;flex-direction:column;justify-content:center;align-items:center}.game-card-icon-container{width:50px}.game-card-icon-container-gespeeld{width:70px}.game-card-icon{width:100%}.game-card-title{font-weight:600;font-size:20px;margin-top:5px}.game-card-title-gespeeld{margin-top:10px;font-weight:600;font-size:25px}.game-card-description{font-style:italic;text-align:center;font-size:14px}.game-card-button{padding:5px 50px;border-radius:5px;cursor:pointer;transition:background-color .3s,box-shadow .3s;text-align:center;text-decoration:none;color:#fff}.game-card-content-finished{justify-content:center}.test-bg-color{background-color:var(--red-4)}.wordle-bg-color{background-color:var(--green-4)}.wordle-bg-color-finished{background-color:var(--green-3)}.game-card-button-wordle:hover{background-color:var(--green-5);box-shadow:0 4px 8px #0000001a}.wordle6-bg-color{background-color:var(--yellow-4)}.wordle6-bg-color-finished{background-color:var(--yellow-3)}.game-card-button-wordle6:hover{background-color:var(--yellow-5);box-shadow:0 4px 8px #0000001a}.connections-bg-color{background-color:var(--blue-4)}.connections-bg-color-finished{background-color:var(--blue-3)}.game-card-button-connections:hover{background-color:var(--blue-5);box-shadow:0 4px 8px #0000001a}.countdown-container{text-align:center}.countdown-text{font-size:18px;margin-bottom:10px}.countdown{font-size:24px;font-weight:700;margin-bottom:20px}.countdown-time{display:inline-block;text-align:center}@media screen and (max-width: 768px){.break-line-index{width:300px;margin-top:5px;margin-bottom:5px}.games-container{max-width:95%}.game-card{width:150px;height:150px}.index-title{font-size:24px}.game-card-content{padding:25px 0}.left-ribbon{width:20px}.game-card-icon-container{width:40px}.game-card-title{margin-top:3px;font-weight:600;font-size:15px}.game-card-description{font-size:12px;display:none}.game-card-button{padding:5px 20px;font-size:12px}.game-card-icon-container-gespeeld{width:50px}.game-card-title-gespeeld{margin-top:5px;font-weight:600;font-size:20px}}.container{width:100vw;height:100vh;display:flex;justify-content:center;flex-direction:column;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;padding-top:75px;padding-bottom:25px;overflow-y:auto}.gissing{display:flex}.gissing-letter{width:50px;height:50px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--grey-2);margin:3px;font-size:30px;font-weight:700;box-shadow:.5px .5px .5px #0003;text-transform:uppercase;color:var(--grey-7);transition:.3s ease}.gissing-letter.incorrect{background-color:var(--grey-7);color:#fff}.gissing-letter.correct{background-color:var(--green-4);color:#fff}.gissing-letter.misplaced{background-color:var(--yellow-4);color:#fff}.keyboard{margin-top:20px;display:flex;flex-direction:column;align-items:center}.key-row{display:flex}.key{width:40px;height:40px;margin:5px;display:flex;align-items:center;justify-content:center;background-color:var(--grey-2);color:var(--grey-7);font-size:18px;font-weight:700;border:none;border-radius:5px;cursor:pointer;-webkit-user-select:none;user-select:none;text-transform:uppercase;transition:.3s;box-shadow:.5px .5px .5px #0003}.key-groot{width:65px;font-size:14px}.key-correct{background-color:var(--green-4);color:#fff}.key-misplaced{background-color:var(--yellow-4);color:#fff}.key-incorrect{background-color:var(--grey-7);color:#fff}.key:hover{background-color:#f0f0f0}.key:hover{background-color:var(--grey-4)}.backspace-icon{width:65%;opacity:.75}@media screen and (max-width: 768px){.key{height:40px;width:28px;margin:2.5px;font-size:15px}.key-groot{height:40px;width:45px;font-size:12px}}@media screen and (max-height: 650px){.container{justify-content:start}}.container-connections{display:flex;flex-direction:column;align-items:flex-start;width:400px}.grid{display:grid;grid-template-columns:repeat(4,96.25px);grid-template-rows:repeat(4,50px);gap:5px;margin-bottom:20px}.grid-item{background-color:var(--grey-1);transition:.3s ease;display:flex;justify-content:center;align-items:center;text-align:center;font-size:14px;height:100%;width:100%;cursor:pointer;border-radius:5px;box-shadow:.5px .5px .5px #0003;font-weight:750}.grid-item:hover{background-color:var(--grey-2)}.grid-item-selected{background-color:var(--grey-6);color:#fffc}.grid-item-selected:hover{background-color:var(--grey-6)}.grid-item-completed-1{background-color:var(--blue-3);color:#0000;pointer-events:none}.grid-item-completed-2{background-color:var(--green-3);color:#0000;pointer-events:none}.grid-item-completed-3{background-color:var(--yellow-3);color:#0000;pointer-events:none}.grid-item-completed-4{background-color:var(--purple-3);color:#0000;pointer-events:none}.submit-btn{display:flex;justify-content:center;align-items:center;margin-top:10px;padding:12px 24px;box-sizing:border-box;background-color:var(--blue-5);color:#fff;font-size:16px;border:none;cursor:pointer;box-shadow:0 4px 8px #0000001a;transition:background-color .3s ease,transform .2s ease,box-shadow .2s ease;width:100%;border-radius:5px}.submit-btn:hover{background-color:var(--blue-6);box-shadow:0 6px 12px #0003}.completed-groups{position:absolute;padding-left:0;display:flex;flex-direction:column;align-items:center;gap:5px;margin-top:50px;width:400px}.completed-group{height:50px;border-radius:8px;text-align:center;width:90%;display:flex;flex-direction:column;justify-content:center}.completed-group-title{margin:0;font-weight:700}.completed-group-1{background-color:var(--blue-3)}.completed-group-2{background-color:var(--green-3)}.completed-group-3{background-color:var(--yellow-3)}.completed-group-4{background-color:var(--purple-3)}.completed-items{font-size:14px;display:inline-block}.completed-item{display:inline}.dots-container{display:flex;justify-content:center;width:100%;margin-bottom:30px}.dot{width:20px;height:20px;border-radius:50%;background-color:var(--grey-4);margin:0 5px;transition:background-color .3s ease,opacity .3s ease}.dot-hidden{background-color:#fff;opacity:0}@media screen and (max-width: 768px){.grid{grid-template-columns:repeat(4,83.75px)}.container-connections,.completed-groups{width:350px}}.input__container-connections{display:flex;flex-direction:row;flex-wrap:wrap;gap:16px;width:500px;height:auto;padding:10px}.input__group-container{display:flex;flex-direction:column}.input__input{margin:4px 0;padding:8px;font-size:16px}.input__submit-btn{cursor:pointer;background-color:#4caf50;color:#fff;padding:10px;text-align:center;width:100px;border-radius:5px}