@keyframes blink {
    0% { visibility:visible; }
    50% { visibility:hidden; }
}

@keyframes borderAnimation {
    from { background-position:0 0, -8px 0, 100% -8px, 0 100%; }
    to { background-position:0 -8px, 0 0, 100% 0, -8px 100%; }
}

@keyframes cast{
    from { height:0; }
    to { height:87px; }
}

@keyframes check{
    from { clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%); }
    to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
}

@keyframes fall {
    0% { top:60%; }
    100% { top:460%; }
}

@keyframes fly{
    0% { left:50%; top:50%; transform:translate(-50%, -50%) scale(0);opacity:1;}
    40% { left:250%; top:-150%; transform:translate(-50%, -50%) scale(1);opacity:1;}
    80% { left:450%; top:-350%; transform:translate(-50%, -50%) scale(1); opacity:1;}
    100% { left:550%; top:-450%; transform:translate(-50%, -50%) scale(1); opacity:0;}
}

@keyframes flipShow1{
    from { transform:rotateY(0deg); }
    to { transform:rotateY(90deg); }
}

@keyframes flipShow2{
    from { transform:rotateY(90deg); }
    to { transform:rotateY(180deg); }
}

@keyframes flipHide1{
    from { transform:rotateY(180deg); }
    to { transform:rotateY(90deg); }
}

@keyframes flipHide2{
    from { transform:rotateY(90deg); }
    to { transform:rotateY(0deg); }
}

@keyframes grow {
    0% { transform:scale(0); }
    100% { transform:scale(1); }
}

@keyframes hamburgerBottomClose{
    0% { transform:translateY(0) rotate(0deg); }
    50% { transform:translateY(-18px) rotate(0deg); }
    100% { transform:translateY(-18px) rotate(-45deg); }
}

@keyframes hamburgerBottomOpen{
    100% { transform:translateY(0) rotate(0deg); }
    50% { transform:translateY(-18px) rotate(0deg); }
    0% { transform:translateY(-18px) rotate(-45deg); }
}

@keyframes hamburgerMiddleClose{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:0; }
}

@keyframes hamburgerMiddleOpen{
    100% { opacity:1; }
    50% { opacity:0; }
    0% { opacity:0; }
}

@keyframes hamburgerTopClose{
    0% { transform:translateY(0) rotate(0deg); }
    50% { transform:translateY(18px) rotate(0deg); }
    100% { transform:translateY(18px) rotate(45deg); }
}

@keyframes hamburgerTopOpen{
    100% { transform:translateY(0) rotate(0deg); }
    50% { transform:translateY(18px) rotate(0deg); }
    0% { transform:translateY(18px) rotate(45deg); }
}

@keyframes jump {
    from { top:0; }
    to { top:-56px; }
}

@keyframes lineBurstScale {
    0% { height:3px; padding:0 0 24px 0; }
    50% { height:24px; padding:0 0 24px 0; }
    100% { height:3px; padding:0 0 45px 0; }
}

@keyframes marqueeGamepad {
    from { transform:translate(0, -49px) rotate(270deg); }
    to { transform:translate(0, -23px) rotate(270deg); }
}

@keyframes reel{
    from { height:87px; }
    to { height:0; }
}

@keyframes scaleUp {
    0% { transform:scale(0) }
    100% { transform:scale(1); }
}

@keyframes shake {
    0% { transform:translate(-4px, 0); }
    50% { transform:translate(4px, 0); }
}

@keyframes shrink {
    0% { transform:scale(1); }
    100% { transform:scale(0); }
}

@keyframes slide{
    0% { top: -6px; }
    100% { top: 50%; }
}

@keyframes spin {
    0% { transform:rotate(0deg); }
    100% { transform:rotate(360deg); }
}
@keyframes sway {
    0% { background-position:calc(50% - 12px) center; }
    50% { background-position:calc(50% + 12px) center; }
    100% { background-position:calc(50% - 12px) center; }
}

@keyframes pen-in{
    0% { left:-4px; top:-20px; opacity:0; }
    100% { left:4px; top:-12px; opacity:1; }
}

@keyframes pen-out{
    0% { left:19px; top:-16px; opacity:1; }
    100% { left:27px; top:-28px; opacity:0; }
}

@keyframes write{
    0% { left:4px; top:-12px; opacity:1; }
    70% { left:8px; top:-4px; opacity:1; }
    100% { left:19px; top:-16px;opacity:1; }
}

:root{
    --brand-off-white: #eaeaea;
    --brand-mid: #dadada;
    --brand-gray: #2b2b2b;
    --brand-green: #00bc59;
    --pure-white: #ffffff;
    --pure-black: #000000;
    --hidden: rgba(0, 0, 0, 0);
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--brand-off-white);
}

::-webkit-scrollbar-thumb {
  background: var(--brand-gray);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--brand-green);
}

#about-section{
    border:2px solid var(--brand-gray);
    margin:20px 0 0 0;
    padding:20px;
    position:relative;
    top:0;
    width:calc(100% - 44px);
}

#boat{
    color:var(--brand-green);
    cursor:pointer;
    font-size:24px;
    position:relative;
    top:4px;
    z-index:4;
}

#boat-div{
    text-align:center;
}

body{
    left:0;
    position:relative;
    top:0;
}

#brief{
    color:var(--brand-gray);
    display:inline-block;
    min-height:20px;
}

#brief.visible{
    font-size:16px;
}

#checkbox{
    border:2px solid var(--brand-green);
    border-radius:3px;
    cursor:pointer;
    display:inline-block;
    height:16px;
    left:0;
    position:relative;
    top:0;
    vertical-align:top;
    width:16px;
}

.check-icon{
    clip-path: polygon(0 0, 00% 0, 00% 100%, 0% 100%);
    color:var(--brand-green);
    filter:drop-shadow(1px 0 var(--brand-off-white)) drop-shadow(-1px 0 var(--brand-off-white)) 
        drop-shadow(0 1px var(--brand-off-white)) drop-shadow(0 -1px var(--brand-off-white));
    font-size:24px !important;
    position:absolute;
    transform:scale(0.9, 1.1);
    top:-7px;
    left:1px;
}

.checked{
    animation:check 0.5s cubic-bezier(0.5, 0, 0.75, 0) forwards 1;
}


.citation-line-svg{
    left:50%;
    position:absolute;
    top:50%;
    transform:translate(-50%, -50%);
}

.club::before{
    background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="1280.000000pt" height="1280.000000pt" viewBox="0 0 1280.000000 1280.000000" preserveAspectRatio="xMidYMid meet"><metadata>Created by potrace 1.15, written by Peter Selinger 2001-2017</metadata><g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)" fill="%2300bc59" stroke="none"><path d="M6210 12794 c-19 -2 -78 -9 -130 -15 -470 -53 -954 -260 -1350 -575 -108 -86 -335 -313 -424 -424 -415 -519 -646 -1177 -646 -1841 0 -749 276 -1472 957 -2507 56 -83 99 -152 96 -152 -3 0 -22 13 -42 29 -20 15 -90 64 -156 108 -460 306 -891 479 -1385 554 -175 27 -554 33 -705 11 -490 -71 -891 -234 -1265 -513 -729 -544 -1160 -1417 -1160 -2349 0 -932 431 -1805 1160 -2349 374 -279 777 -443 1265 -513 147 -21 492 -16 660 10 540 83 1041 298 1665 715 205 137 382 266 759 551 190 144 357 269 373 279 l28 19 0 -29 c0 -34 -34 -396 -55 -583 -138 -1232 -405 -1939 -921 -2440 -370 -359 -804 -578 -1514 -764 -48 -12 320 -14 2980 -14 2660 0 3028 2 2980 14 -710 186 -1144 405 -1514 764 -474 460 -734 1089 -880 2125 -41 289 -102 874 -94 911 2 12 31 -7 113 -76 322 -272 634 -509 915 -695 645 -428 1226 -670 1854 -772 618 -102 1311 83 1866 498 729 544 1160 1417 1160 2349 0 932 -431 1805 -1160 2349 -656 490 -1476 649 -2250 437 -352 -96 -706 -261 -1145 -531 -82 -51 -151 -92 -153 -90 -2 2 31 50 74 107 246 330 493 759 643 1114 240 571 363 1210 322 1673 -52 589 -275 1148 -637 1601 -89 111 -316 338 -424 424 -387 308 -827 500 -1315 572 -96 14 -472 27 -545 18z"/></g></svg>');
    background-size:calc(100% - 4px);
    background-position:center;
    background-repeat:no-repeat;
    content:"";
    color:var(--brand-green);
    display:inline-block;
    width:100%;
    height:100%;
}

#confetti-target{
    height:100%;
    left:0;
    pointer-events:none;
    position:fixed;
    top:0;
    width:100%;
    z-index:99;
}

#contact{
    overflow:visible !important;
}

.contact-icon{
    cursor:pointer;
    position:relative;
    top:0;
}

#contact-spiel{
    color:var(--brand-gray);
    display:inline-block;
    font-size:16px;
    margin:15px 0 20px 0;
}

#contact-spiel a:link{
    text-decoration:underline dotted 2px;
}

#contact-spiel a:active, #contact-spiel a:link, #contact-spiel a:hover, #contact-spiel a:visited{
    color:var(--brand-gray);
    text-underline-offset:6px;
}

#contact-spiel a:hover{
    text-decoration:underline solid 2px;
    text-underline-offset:5px;
}

#container{
    background:var(--brand-off-white);
    border:20px solid var(--brand-off-white);
    height:calc(100% - 40px);
    margin:auto;
    max-width:1400px;
    width:calc(100% - 40px);
}

.content-citation{
    background:var(--brand-off-white);
    border:1px solid var(--brand-gray);
    cursor:pointer;
    display:block;
    height:62px;
    margin:0 0 20px 20px;
    position:relative;
    top:0;
    width:62px;
}

.content-citation:last-child{
    margin:0 0 0 20px;
}

.content-citation span{
    color:var(--brand-off-gray);
    font-size:16px;
    font-weight:800;
    left:50%;
    position:absolute;
    top:50%;
    transform:translate(-50%, -50%);
}

.content-citations{
    display:none;
    vertical-align:top;
}

.content-thumbnail{
    aspect-ratio:16/9;
    background:var(--brand-gray);
    display:block;
    width:100px;
    margin:0 0 20px 20px;
}

.content-thumbnails{
    display:inline-block;
    vertical-align:top;
}

#dialogue-triangle.no{
    background:var(--brand-off-white);
    border:2px solid var(--brand-gray);
    clip-path:polygon(0 0, 100% 0, 0 100%);
    display:inline-block;
    height:16px;
    left:50%;
    position:absolute;
    top:calc(100% + 11px);
    transform:translate(-50%, 0%) rotate(45deg);
    width:16px;
    z-index:1;
}

.diamond::before{
    background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="1280.000000pt" height="1280.000000pt" viewBox="0 0 1280.000000 1280.000000" preserveAspectRatio="xMidYMid meet"><metadata>Created by potrace 1.15, written by Peter Selinger 2001-2017</metadata><g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)" fill="%2300bc59" stroke="none"><path d="M6361 12697 c-268 -738 -619 -1517 -939 -2082 -250 -443 -538 -874 -815 -1220 -364 -453 -828 -912 -1278 -1262 -701 -545 -1509 -998 -2549 -1430 -166 -69 -526 -209 -677 -264 -51 -19 -93 -36 -93 -39 0 -3 42 -20 93 -39 50 -18 189 -71 307 -117 2057 -797 3369 -1719 4385 -3084 119 -161 376 -544 477 -715 398 -667 777 -1484 1089 -2342 19 -51 36 -93 39 -93 3 0 20 42 39 93 268 738 619 1517 939 2082 250 443 538 874 815 1220 364 453 828 912 1278 1262 701 545 1509 998 2549 1430 166 69 526 209 677 264 51 19 93 36 93 39 0 3 -42 20 -93 39 -50 18 -189 71 -307 117 -2057 797 -3369 1719 -4385 3084 -119 161 -376 544 -477 715 -398 667 -777 1484 -1089 2342 -19 51 -36 93 -39 93 -3 0 -20 -42 -39 -93z"/></g></svg>');
    background-size:calc(100% - 4px);
    background-position:center;
    background-repeat:no-repeat;
    content:"";
    color:var(--brand-green);
    display:inline-block;
    width:100%;
    height:100%;
}

.dice{
    cursor:pointer;
    position:relative;
    left:0;
    z-index:2;
}

.dice::before{
    left:0;
    position:relative;
    top:0;
    z-index:3;
}

.dice::after{
    background:var(--brand-green);
    content:"";
    display:inline-block;
    height:20px;
    left:50%;
    position:absolute;
    top:50%;
    transform:translate(-50%, -50%);
    width:20px;
    z-index:1;
}

.dice.jumping{
    animation:jump 0.5s cubic-bezier(0.22, 1, 0.36, 1) alternate 2;
}

.display-option{
    background:var(--brand-off-white);
    cursor:pointer;
    display:inline-block;
    font-size:24px;
    font-weight:800;
    margin:0;
    padding:10px;
    text-transform:uppercase;
    width:calc(50% - 20px);
}

.display-option.current-option{
    background:var(--brand-gray);
    color:var(--brand-off-white);
}

#display-options{
    display:inline-block;
    text-align:left;
    vertical-align:middle;
    width:100%;
}

.dot{
    background:var(--brand-green);
    display:none;
    height:4px;
    width:4px;
}

.dots-background{
    background-color: #eaeaea;
    opacity: 1;
    background-image: radial-gradient(#00bc59 2px, #eaeaea 2px);
    background-size: 32px 32px;
}

#dove-icon{
    color:var(--brand-green);
    cursor:default;
    transform:scale(0);
    transition:transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

#download-icon, #view-icon{
    color:var(--brand-gray);
    font-size:16px;
}

.dragging{
    cursor:grabbing;
    user-select:none;
    -moz-user-select:none;
}

#egg-icon{
    color:var(--brand-green);
    cursor:pointer;
    transform:scale(1);
}

.fa-comment-dots{
    position:relative;
    top:0;
}

.fa-comment-dots::after{
    background:var(--brand-green);
    content:"";
    display:inline-block;
    height:8px;
    left:50%;
    position:absolute;
    top:50%;
    transform:translate(-50%, -50%);
    width:20px;
    z-index:2;
}

.fa-comment-dots::before{
    position:relative;
    z-index:3;
}

#false-video{
    aspect-ratio:16 / 9;
    display:none;
    object-fit:contain;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

#false-video.show{
    display:inline-block;
}

#fig-1-la-lines{
    clip-path: rect(0% 100% 100% 100%);
    transition:clip-path 1s ease;
}

.figure-line{
    background:var(--brand-gray);
    position:relative;
}

.figure-lines{
    filter:drop-shadow(1px 0 var(--brand-off-white)) drop-shadow(-1px 0 var(--brand-off-white)) 
        drop-shadow(0 1px var(--brand-off-white)) drop-shadow(0 -1px var(--brand-off-white));
    height:100%;
    left:0;
    position:absolute;
    top:0;
    width:100%;
}

.folder-icon{
    cursor:pointer;
    position:relative;
    top:0;
}

#fish{
    color:var(--brand-green);
    font-size:12px;
    left:0;
    position:relative;
    top:0;
}

#fish-div{
    height:12px;
}

.flip-hide-a{
    animation:flipHide1 0.25s linear 1;
}
.flip-hide-b{
    animation:flipHide2 0.25s linear 1;
}

.flip-show-a{
    animation:flipShow1 0.25s linear 1;
}
.flip-show-b{
    animation:flipShow2 0.25s linear 1;
}

.fly{
    animation:fly 2s linear forwards 1;
}

.fullscreen-button{
    background:var(--brand-off-white);
    bottom:10px;
    color:var(--brand-gray);
    cursor:pointer;
    font-size:16px;
    padding:5px;
    position:absolute;
    right:10px;
}

#fullscreen-trailer-lightbox{
    background-color: transparent;
    border: 40px solid transparent;
    box-sizing: border-box;
    height: 100%;
    left: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    width: 100%;
    transition: background-color 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

#fullscreen-video-lightbox{
    background-color: transparent;
    border: 20px solid transparent;
    box-sizing: border-box;
    height: 100%;
    left: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    width: 100%;
    transition: background-color 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    z-index:99;
}

#fullscreen-video-container video {
    height: 100%;
    width: 100%;
}

#fullscreen-video-lightbox.visible {
    background-color: var(--brand-off-white);
}

.gallery-image{
    width:100%;
    vertical-align:top;
}

.gallery-video{
    display:inline-block;
    vertical-align:top;
    width:100%;
}

.gamepad-icon-in-logo{
    animation:marqueeGamepad 1s linear infinite;
    color:var(--brand-off-white);
    font-size:16px;
    left:-3px;
    padding:10px 0 0 0;
    position:relative;
    top:0;
    /*transform:translate(0, -49px) rotate(270deg);*/
}

.geo-ball{
    background:var(--brand-green);
    border-radius:100%;
    display:inline-block;
    height:12px;
    width:12px;
}

#geo-ball, #geo-square, #geo-tri{
    left:0;
    position:relative;
    top:0;
}

#geo-belt{
    border:2px solid var(--brand-green);
    border-radius:24px;
    display:inline-block;
    height:calc(100% - 4px);
    left:0;
    position:relative;
    top:0;
    width:calc(100% - 91px);
}

#geo-catchers{
    display:inline-block;
    height:24px;
}

.geo-catcher{
    background:var(--brand-green);
    cursor:pointer;
    display:inline-block;
    height:24px;
    left:0;
    margin:0 0 0 5px;
    position:relative;
    top:0;
    vertical-align:bottom;
    width:24px;
}

#geo-container{
    display:inline-block;
    height:12px;
    left:0;
    margin:0 0 0 48px;
    position:relative;
    top:0;
    width:calc(100% - 48px);
}

#geo-container div:nth-child(2){
    margin:0 17px 0 17px;
}

.geo-gear{
    animation:spin 1s linear forwards infinite;
    animation-play-state:paused;
    background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="%2300bc59" d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"/></svg>');
    background-repeat:repeat-x;
    background-position:center;
    background-size:contain;
    height:16px;
    position:absolute;
    top:2px;
    width:16px;
}

.geo-gear:nth-child(1){
    left:2px;
}

.geo-gear:nth-child(2){
    right:2px;
}

#geo-ground{
    display:block;
    width:100%;
    height:24px;
}

.geo-square{
    background:var(--brand-green);
    border-radius:10%;
    display:inline-block;
    height:12px;
    width:12px;
}

.geo-symbol.geo-ball, .geo-symbol.geo-square, .geo-symbol.geo-tri{
    background:var(--brand-off-white);
    height:16px;
    margin:0;
    width:16px;
}

.geo-symbol.geo-tri{
    width: 18px !important;
    height: 18px !important;
    top: calc(50% - 1px) !important;
}

.geo-tri{
    background:var(--brand-green);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    display:inline-block;
    height:12px;
    width:12px;
}

#geo-table{
    border:none;
    border-collapse:collapse;
    margin:0;
    padding:0;
    width:100%;
}

#geo-table td{
    width:calc(100% / 3);
    vertical-align:bottom;
}

#geo-table td:nth-child(2){
    text-align:center;
}

#geo-table td:nth-child(3){
    text-align:right;
}

#geo-toggle{
    display:block;
    height:24px;
    text-align:center;
    width:100%;
}

#geo-toggle-icon{
    color:var(--brand-green);
    cursor:pointer;
    display:inline-block;
    font-size:24px;
    transform:scale(0);
    transition:transform 0.5s ease-out;
}

#geo-sky{
    display:block;
    width:100%;
    height:24px;
}

.geo-symbol{
    color:var(--brand-off-white);
    display:none !important;
    font-size:16px;
    left:50%;
    position:absolute;
    top:50%;
    transform:translate(-50%, -50%);
}

.geo-symbol.current{
    display:inline-block !important;
}

#graduation-cap{
    transform:scaleX(-1);
}

.grow{
    animation:grow 0.25s cubic-bezier(0.22, 1, 0.36, 1) forwards 1;
}

#hamburger{
    cursor:pointer;
    display:none;
    height:40px;
    position:absolute;
    right:20px;
    top:20px;
    width:40px;
    z-index:97;
}

#hamburger-bottom{
    animation-direction:forwards;
    animation-duration:0.5s;
    animation-fill-mode:both;
    animation-iteration-count:1;
    bottom:0;
}

#hamburger-middle{
    animation-direction:forwards;
    animation-duration:0.5s;
    animation-fill-mode:both;
    animation-iteration-count:1;
    top:calc(50% - 2px);
}

#hamburger-top{
    animation-direction:forwards;
    animation-duration:0.5s;
    animation-fill-mode:both;
    animation-iteration-count:1;
    top:0;
}

#hamburger-bottom, #hamburger-middle, #hamburger-top{
    background:var(--brand-gray);
    display:inline-block;
    height:4px;
    position:absolute;
    width:40px;
}

#header{
    display:grid;
    grid-template-columns:minmax(256px, auto) minmax(0, 100%);
    height:100px;
    width:100%;
}

.heart::before{
    background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="1280.000000pt" height="1228.000000pt" viewBox="0 0 1280.000000 1228.000000" preserveAspectRatio="xMidYMid meet"><metadata>Created by potrace 1.15, written by Peter Selinger 2001-2017</metadata><g transform="translate(0.000000,1228.000000) scale(0.100000,-0.100000)" fill="%2300bc59" stroke="none"><path d="M3580 10519 c-418 -47 -855 -233 -1197 -510 -191 -155 -415 -411 -552 -631 -303 -485 -468 -1037 -512 -1713 -76 -1171 375 -2000 1524 -2802 212 -148 408 -273 822 -523 570 -344 790 -490 1082 -717 659 -511 1296 -1213 1537 -1693 29 -58 58 -121 65 -140 l13 -35 18 50 c139 397 809 1167 1560 1795 329 275 617 476 1240 865 743 464 1044 683 1364 995 484 471 737 947 833 1567 24 155 24 661 0 863 -59 490 -166 864 -357 1240 -135 265 -301 491 -511 695 -369 358 -792 567 -1309 647 -133 20 -528 17 -665 -5 -787 -131 -1435 -583 -1911 -1332 -64 -100 -179 -313 -229 -426 l-39 -86 -101 201 c-55 111 -137 260 -182 332 -497 793 -1205 1275 -2008 1364 -105 12 -378 11 -485 -1z"/></g></svg>');
    background-size:calc(100% - 4px);
    background-position:center;
    background-repeat:no-repeat;
    content:"";
    color:var(--brand-green);
    display:inline-block;
    width:100%;
    height:100%;
}

.hidden{
    display:inline-block;
    font-size:12px;
    font-weight:800;
    max-width:0;
    overflow:hidden;
    padding:0 0 0 5px;
    pointer-events:none;
    position:relative;
    text-transform:uppercase;
    text-overflow:clip;
    top:18px;
    transform:translate(0, -50%);
    transition:max-width 0.5s ease;
    vertical-align:top;
    white-space:nowrap;
}

#hook{
    clip-path: polygon(0 0, 60% 0, 60% 100%, 0% 100%);
    color:var(--brand-green);
    font-size:12px;
    left:0;
    position:relative;
    top:0;
}

#how-it-looks-display{
    display:inline-block;
    width:100%;
}

#how-it-works-display{
    display:none;
    width:calc(100% - 84px);
}

html, body{
    background:var(--brand-off-white);
    font-size:0;
    font-family:"Inter", sans-serif;
    height:100%;
    margin:0;
    min-width:479px;
    padding:0;
    scroll-behavior:smooth;
    width:100%;
}

#introductory-animatic{
    display:none;
    height:100%;
    left:0;
    width:100%;
    position:absolute;
    top:0;
}

#introductory-title{
    font-size:64px;
    color:var(--brand-gray-);
    text-transform:uppercase;
}

#iru-charger{
    bottom:14px;
    color:var(--brand-green);
    font-size:24px;
    position:absolute;
    right:14px;
}

#iru-down-path{
    border:1px solid var(--brand-green);
    border-left:none;
    border-right:none;
    display:inline-block;
    height:calc(100% - 2px);
    left:0;
    position:relative;
    width:32px;
}

#iru-down-path::after{
    background:var(--brand-green);
    content:"";
    display:inline-block;
    right:0;
    height:calc(100% - 30px);
    position:absolute;
    top:0;
    width:1px;
}

#iru-down-path::before{
    background:var(--brand-green);
    content:"";
    display:inline-block;
    left:0;
    height:calc(100% - 30px);
    position:absolute;
    bottom:0;
    width:1px;
}

#iru-inputs{
    bottom:10px;
    left:50%;
    position:absolute;
    text-align:center;
    transform:translate(-50%, 0);
}

.iru-input{
    background:var(--brand-green);
    color:var(--brand-off-white);
    cursor:pointer;
    display:inline-block;
    font-size:16px;
    padding:5px;
}

.iru-input:first-child{
    margin:0 0 5px 0;
}

.iru-input:nth-child(4){
    margin:0 5px 0 5px;
}

#iru-left-path{
    border:1px solid var(--brand-green);
    border-right:none;
    display:inline-flex;
    height:30px;
    justify-content:space-evenly;
    vertical-align:bottom;
    width:calc((100% - 66px) / 3);
}

#iru-left-path .dot, #iru-right-path .dot{
    margin:13px 0 0 0;
}

.iru-marker{
    background:none;
    content:"";
    display:inline-block;
    height:24px;
    position:absolute;
    width:24px;
}

#iru-marker-a{
    top:77px;
    left:14px;
}

#iru-marker-b{
    top:77px;
    left:calc(((100% - 66px) / 3) + 7px);
}

#iru-marker-c{
    top:15px;
    left:calc(((100% - 66px) / 3) + 7px);
}

#iru-marker-d{
    top:15px;
    left:calc(((100% - 66px) / 3) * 2 + 32px);
}

#iru-marker-e{
    top:77px;
    left:calc(((100% - 66px) / 3) * 2 + 32px);
}

#iru-marker-f{
    top:77px;
    left:calc(((100% - 66px) / 3) * 3 + 0px);
}

#iru-right-path{
    border:1px solid var(--brand-green);
    border-left:none;
    display:inline-flex;
    height:30px;
    justify-content:space-between;
    vertical-align:bottom;
    width:calc((100% - 66px) / 3);;
}

#iru-top-path{
    border:1px solid var(--brand-green);
    border-left:none;
    border-right:none;
    display:inline-flex;
    height:30px;
    justify-content:space-between;
    vertical-align:top;
    width:calc((100% - 66px) / 3);
}

#iru-up-path{
    border:1px solid var(--brand-green);
    border-left:none;
    border-right:none;
    display:inline-block;
    height:calc(100% - 2px);
    left:0;
    position:relative;
    width:32px;
}

#iru-up-path .dot{
    margin:13px 0 0 13px;
}

#iru-up-path::after{
    background:var(--brand-green);
    content:"";
    display:inline-block;
    right:0;
    height:calc(100% - 30px);
    position:absolute;
    bottom:0;
    width:1px;
}

#iru-up-path::before{
    background:var(--brand-green);
    content:"";
    display:inline-block;
    left:0;
    height:calc(100% - 30px);
    position:absolute;
    top:0;
    width:1px;
}

#iru-paths{
    display:inline-block;
    height:96px;
    vertical-align:bottom;
    width:100%;
}

#iru-vaccuum{
    color:var(--brand-green);
    font-size:24px;
    left:14px;
    top:78px;
    position:absolute;
}

#iru-vaccuum::after{
    background:var(--brand-off-white);
    border-radius:100%;
    content:"";
    height:4px;
    position:absolute;
    right:0;
    top:50%;
    transform:translate(-50%, -50%);
    width:4px;
}

#konami-code-container{
    display:inline-block;
    margin:-5px 0 0 0;
    width:100%;
}

#konami-code-inputs{
    margin:0;
    width:100%;
}

.konami-code-input{
    background:var(--brand-green);
    border-radius:4px;
    cursor:pointer;
    display:inline-block;
    height:52px;
    left:0;
    margin:0 10px 10px 0;
    position:relative;
    top:0;
    width:52px;
}

.konami-code-input span{
    color:var(--brand-off-white);
    font-weight:800;
    left:50%;
    position:absolute;
    top:50%;
    transform:translate(-50%, -50%);
}

#konami-code-slots{
    margin:15px 0 0 0;
}

.konami-code-slot{
    border:2px dashed var(--brand-green);
    border-radius:4px;
    display:inline-block;
    height:48px;
    left:0;
    margin:0 10px 10px 0;
    position:relative;
    top:0;
    width:48px;
}

.konami-code-slot .konami-code-input{
    animation:scaleUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards 1;
    height:44px;
    left:2px;
    position:absolute;
    top:2px;
    width:44px;
    transform:scale(0);
}

#laser-gun{
    color:var(--brand-green);
    cursor:pointer;
    float:left;
    font-size:24px;
    padding:10px 0 0 0;
}

#laser-gun-container{
    display:inline-block;
    height:100%;
    vertical-align:middle;
    width:27px;
}

#laser-laser{
    background:var(--brand-green);
    border-radius:3px;
    display:inline-block;
    height:3px;
    left:36px;
    position:absolute;
    top:50%;
    transform:translate(0%, -50%);
    width:20px;
}

.laser-target{
    color:var(--brand-green);
    font-size:24px;
    opacity:0;
}

.laser-target.show{
    opacity:1;
}

#laser-targets-container{
    display:inline-block;
    text-align:right;
    vertical-align:middle;
    width:calc(100% - 27px);
}

.light-strike-bolt{
    animation:fall 0.5s linear forwards infinite;
    color:var(--brand-green);
    font-size:20px;
    left:50%;
    position:absolute;
    top:60%;
    transform:translate(-50%, -50%);
}

#light-strike-character{
    cursor:pointer;
    display:inline-block;
    position:relative;
    top:0;
}

.light-strike-cloud{
    color:var(--brand-green);
    font-size:24px;
    position:absolute;
    top:10px;
    transform:translate(-50%, 0);
}

.light-strike-cloud:nth-child(2) .light-strike-bolt{
    animation-delay:0.25s;
}

.light-strike-cloud:nth-child(1){
    left:25%;
}

.light-strike-cloud:nth-child(2){
    left:50%;
}

.light-strike-cloud:nth-child(3){
    left:75%;
}

#light-strike-gap{
    display:inline-block;
    height:24px;
    width:100%;
}

#light-strike-ground{
    display:inline-block;
    height:24px;
    width:100%;
    position:relative;
    top:0;
}

#light-strike-guy{
    color:var(--brand-green);
    display:inline-block;
    font-size:16px;
}

#light-strike-house{
    color:var(--brand-green);
    font-size:24px;
    position:absolute;
    right:0;
    top:0;
}

#light-strike-shop{
    color:var(--brand-green);
    font-size:24px;
    left:0;
    position:relative;
    top:0;
}

#light-strike-sky{
    display:inline-block;
    height:24px;
    width:100%;
}

#light-strike-umbrella{
    color:var(--brand-green);
    font-size:12px;
    position:absolute;
    right:-8px;
    top:-8px;
}

#line{
    background:var(--brand-green);
    display:block;
    height:0;
    margin:auto;
    width:1px;
    transition:height 0.5s linear;
}

#line.cast{
    animation:cast 0.5s linear 1;
}

#line.reel{
    animation:reel 0.5s linear 1;
}

.line{
    background:var(--brand-green);
    border:1px solid var(--brand-off-white);
    border-radius:3px;
    display:inline-block;
    width:3px;
    height:100%;
}

.line-burst{
    animation:lineBurstScale ease 0.5s 1 0s;
    bottom:0;
    display:inline-block;
    height:48px;
    padding:0 0 24px 0;
    position:absolute;
    transform-origin:bottom;
}

.line-burst:nth-child(2){
    transform:rotate(45deg);
}

.line-burst:nth-child(3){
    transform:rotate(90deg);
}

.line-burst:nth-child(4){
    transform:rotate(135deg);
}

.line-burst:nth-child(5){
    transform:rotate(180deg);
}

.line-burst:nth-child(6){
    transform:rotate(225deg);
}

.line-burst:nth-child(7){
    transform:rotate(270deg);
}

.line-burst:nth-child(8){
    transform:rotate(315deg);
}

.line-burst-container{
    display:inline-block;
    left:50%;
    position:absolute;
    top:50%;
    transform:translate(-50%, -50%);
    z-index: 98;
}

#line-and-hook{
    left:50%;
    pointer-events:none;
    position:absolute;
    top:20px;
    transform:translate(-50%, 0%);
}

#logo{
    display:inline-block;
    vertical-align:middle;
    white-space:nowrap;
}

#logo-image{
    display:inline-block;
    height:100px;
    position:relative;
    top:0;
    transform:rotate(0deg);
    transition:transform 0.5s ease;
    width:100px;
}

#logo-image #left-arrow{
    bottom:5px;
    left:5px;
    transform:rotate(225deg);
}

#logo-image #left-arrow, #logo-image #right-arrow{
    background:var(--brand-green);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    cursor:pointer;
    display:inline-block;
    height:25px;
    position:absolute;
    width:25px;
    z-index:2;
}

#logo-image #right-arrow{
    right:5px;
    transform:rotate(45deg);
    top:5px;
}

#logo-rectangle-full{
    background:var(--brand-gray);
    display:inline-block;
    height:56px;
    left:50%;
    overflow:hidden;
    position:absolute;
    top:50%;
    transform:translate(-50%, -50%) rotate(45deg);
    transform-origin:center;
    white-space:normal;
    width:25px;
    z-index:2;
}

#logo-rectangle-outline{
    background:var(--brand-off-white);
    border:2px solid var(--brand-gray);
    display:inline-block;
    height:106px;
    left:50%;
    position:absolute;
    top:50%;
    width:21px;
    transform:translate(-50%, -50%) rotate(315deg) ;
    transform-origin:center;
    z-index:1;
}

#logo-text{
    display:inline-block;
    height:100px;
    margin:0 0 0 10px;
    vertical-align:top;
}

#logo-text span{
    color:var(--brand-gray);
    font-size:40px;
    font-weight:800;
    line-height:34px;
    position:relative;
    text-transform:uppercase;
    top:-1px;
    vertical-align:top;
}

#logo-text span.logo-full-width{
    display:block;
}

#logo-text span.logo-initial{
    display:inline-block;
    pointer-events:none;
    /*vertical-align:text-bottom;*/
}

#logo-text span.logo-remainder{
    display:inline-block;
    max-width:0;
    overflow:hidden;
    pointer-events:none;
    top:0;
    /*vertical-align:text-bottom;*/
}

#logo-walk-icon{
    color:var(--brand-green) !important;
    cursor:grab;
    margin:0 0 0 5px;
    font-size:32px !important;
    position:relative;
    top:0;
}

#main-display{
    border:1px solid var(--brand-gray);
    display:inline-block;
    padding:20px;
    position:relative;
    vertical-align:middle;
    width:calc(100% - 42px);
}

#main-display-content{
    position:relative;
    top:0;
}

.maximized{
    overflow:hidden;
}

.menu-open{
    height:100%;
    overflow:hidden;
    width:100%;
}

#mine-icon{
    color:var(--brand-green);
    cursor:pointer;
    font-size:24px;
}

.minimize-button{
    background: var(--brand-off-white);
    bottom: 10px;
    color: var(--brand-gray);
    cursor: pointer;
    font-size: 16px;
    padding: 5px;
    position: absolute;
    pointer-events: all;
    right: 10px;
}

#mobile-menu{
    background:var(--brand-off-white);
    display:inline-block;
    height:100%;
    left:0;
    opacity:0;
    pointer-events:none;
    position:fixed;
    top:0;
    transition:opacity 0.5s ease;
    width:100%;
    z-index:96;
}

#mobile-menu.open{
    opacity:1;
    pointer-events:all;
}

#mobile-navigation{
    display:inline-block;
    height:calc(100% - 160px);
    padding:80px;
    text-align-last:center;
    width:calc(100% - 160px);
}

.mobile-navigation-link{
    font-size:24px !important;
    margin:0 0 20px 0 !important;
}

#navigation{
    display:inline-block;
    text-align:right;
    vertical-align:middle;
}

.navigation-link, .mobile-navigation-link{
    --b: 2px;   /* thickness of the border */
    --c: var(--brand-gray);   /* color of the border */
    --w: 4px;  /* width of border */
    border: var(--b) solid #0000; /* space for the border */
    --_g: #0000 90deg,var(--c) 0;
    --_p: var(--w) var(--w) border-box no-repeat;
    background:
    conic-gradient(from 90deg  at top    var(--b) left  var(--b),var(--_g)) 0    0    / var(--_p),
    conic-gradient(from 180deg at top    var(--b) right var(--b),var(--_g)) 100% 0    / var(--_p),
    conic-gradient(from 0deg   at bottom var(--b) left  var(--b),var(--_g)) 0    100% / var(--_p),
    conic-gradient(from -90deg at bottom var(--b) right var(--b),var(--_g)) 100% 100% / var(--_p);
    display:inline-block;
    font-size:16px;
    margin:0 10px 10px 0;
    padding:8px;
    transition:background 0.5s ease;
}

.navigation-link.current-page, .mobile-navigation-link.current-page{
    background:var(--brand-gray);
    border-width:0;
    color:var(--brand-off-white) !important;
    padding:10px;
}

.navigation-link:hover, .mobile-navigation-link:hover{
    --w: 100%;  /* width of border */
}

.navigation-link:last-child, .mobile-navigation-link:last-child{
    margin:0;
}

.navigation-link:link, .mobile-navigation-link:link{
    color:var(--brand-gray);
    text-decoration:none;
}

#no-fix{
    background:var(--brand-off-white);
    display:inline-block;
    height:4px;
    left:50%;
    position:absolute !important;
    top:calc(100% + 21px) !important;
    transform:translate(-50%, -50%);
    width:20px;
    z-index:1;
}

#ocean-div{
    animation:sway 2s ease infinite;
    background-image: url('data:image/svg+xml,<svg fill="%2300bc59" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M269.5 69.9c11.1-7.9 25.9-7.9 37 0C329 85.4 356.5 96 384 96c26.9 0 55.4-10.8 77.4-26.1c0 0 0 0 0 0c11.9-8.5 28.1-7.8 39.2 1.7c14.4 11.9 32.5 21 50.6 25.2c17.2 4 27.9 21.2 23.9 38.4s-21.2 27.9-38.4 23.9c-24.5-5.7-44.9-16.5-58.2-25C449.5 149.7 417 160 384 160c-31.9 0-60.6-9.9-80.4-18.9c-5.8-2.7-11.1-5.3-15.6-7.7c-4.5 2.4-9.7 5.1-15.6 7.7c-19.8 9-48.5 18.9-80.4 18.9c-33 0-65.5-10.3-94.5-25.8c-13.4 8.4-33.7 19.3-58.2 25c-17.2 4-34.4-6.7-38.4-23.9s6.7-34.4 23.9-38.4C42.8 92.6 61 83.5 75.3 71.6c11.1-9.5 27.3-10.1 39.2-1.7c0 0 0 0 0 0C136.7 85.2 165.1 96 192 96c27.5 0 55-10.6 77.5-26.1zm37 288C329 373.4 356.5 384 384 384c26.9 0 55.4-10.8 77.4-26.1c0 0 0 0 0 0c11.9-8.5 28.1-7.8 39.2 1.7c14.4 11.9 32.5 21 50.6 25.2c17.2 4 27.9 21.2 23.9 38.4s-21.2 27.9-38.4 23.9c-24.5-5.7-44.9-16.5-58.2-25C449.5 437.7 417 448 384 448c-31.9 0-60.6-9.9-80.4-18.9c-5.8-2.7-11.1-5.3-15.6-7.7c-4.5 2.4-9.7 5.1-15.6 7.7c-19.8 9-48.5 18.9-80.4 18.9c-33 0-65.5-10.3-94.5-25.8c-13.4 8.4-33.7 19.3-58.2 25c-17.2 4-34.4-6.7-38.4-23.9s6.7-34.4 23.9-38.4c18.1-4.2 36.2-13.3 50.6-25.2c11.1-9.4 27.3-10.1 39.2-1.7c0 0 0 0 0 0C136.7 373.2 165.1 384 192 384c27.5 0 55-10.6 77.5-26.1c11.1-7.9 25.9-7.9 37 0zm0-144C329 229.4 356.5 240 384 240c26.9 0 55.4-10.8 77.4-26.1c0 0 0 0 0 0c11.9-8.5 28.1-7.8 39.2 1.7c14.4 11.9 32.5 21 50.6 25.2c17.2 4 27.9 21.2 23.9 38.4s-21.2 27.9-38.4 23.9c-24.5-5.7-44.9-16.5-58.2-25C449.5 293.7 417 304 384 304c-31.9 0-60.6-9.9-80.4-18.9c-5.8-2.7-11.1-5.3-15.6-7.7c-4.5 2.4-9.7 5.1-15.6 7.7c-19.8 9-48.5 18.9-80.4 18.9c-33 0-65.5-10.3-94.5-25.8c-13.4 8.4-33.7 19.3-58.2 25c-17.2 4-34.4-6.7-38.4-23.9s6.7-34.4 23.9-38.4c18.1-4.2 36.2-13.3 50.6-25.2c11.1-9.5 27.3-10.1 39.2-1.7c0 0 0 0 0 0C136.7 229.2 165.1 240 192 240c27.5 0 55-10.6 77.5-26.1c11.1-7.9 25.9-7.9 37 0z"/></svg>');
    background-repeat: repeat-x;
    background-position:calc(50% - 12px) center;
    clip-path: polygon(0 0, 100% 0, 100% 10px, 0 10px);
    display:inline-block;
    height:24px;
    margin:0 0 48px 0;
    width:100%;
}

#ooh-left-hand, #ooh-right-hand{
    color:var(--brand-green);
    font-size:24px;
}

#ooh-left-hand{
    float:left;
    transform:scaleX(-1);
}

#ooh-right-hand{
    float:right;
}

#ooh-table{
    border:none;
    width:100%;
}

#ooh-table td{
    text-align:center;
    padding:0;
}

#ooh-table td:nth-child(2){
    width:100%;
}

.pen-icon{
    color:var(--brand-green);
    font-size:24px;
    opacity:0;
    position:absolute;
}

.pen-in{
    animation:pen-in 0.25s cubic-bezier(0.25, 1, 0.5, 1) forwards 1;
}

.pen-out{
    animation:pen-out 0.25s cubic-bezier(0.25, 1, 0.5, 1) forwards 1;
}

.plane-icon{
    color:var(--brand-green);
    cursor:default;
    filter:drop-shadow(1px 0 var(--brand-off-white)) drop-shadow(-1px 0 var(--brand-off-white)) 
        drop-shadow(0 1px var(--brand-off-white)) drop-shadow(0 -1px var(--brand-off-white));
    font-size:24px;
    left:50%;
    pointer-events:none;
    position:absolute;
    top:50%;
    transform:translate(-50%, -50%) scale(0);
    z-index:3;
}

#playing-cards{
    display:flex;
    height:24px;
    justify-content:space-between;
    margin:auto;
    width:120px;
}

.playing-card{
    background:var(--brand-green);
    border-radius:3px;
    cursor:pointer;
    display:inline-block;
    height:24px;
    width:16px;
}

.plus-or-minus-icon{
    color:var(--brand-green) !important;
    filter:drop-shadow(1px 0 var(--brand-green)) drop-shadow(-1px 0 var(--brand-green)) 
        drop-shadow(0 1px var(--brand-green)) drop-shadow(0 -1px var(--brand-green));
    font-size:12px !important;
    font-weight:800;
    position:absolute;
}

.plus-or-minus-icon.fa-plus{
    left:50%;
    top:calc(50% + 5px);
    transform:translate(-50%, -50%);
}

.plus-or-minus-icon.fa-minus{
    left:calc(50% - 0px);
    top:calc(50% + 7px);
    transform:translate(-50%, -50%);
}

.project{
    left:0;
    padding:59px 20px 20px 20px;
    position:relative;
    top:0;
}

.project-brief{
    color:var(--brand-gray);
    font-size:16px;
}

.project-container{
    border:1px solid var(--brand-gray);
    display:inline-block;
    margin:59px 0 0 0;
    width:calc(100% - 2px);
}

.project-container:nth-child(n+2){
    margin:58px 0 0 0;
}

.project-contents{
    margin:15px 0 0 0;
}

.project-details-list li{
    color:var(--brand-gray);
    list-style: square;
    font-size: 16px;
    font-weight: 400;
}

.project-details-list li::marker{
    color:var(--brand-gray);
}

.project-header{
    background:var(--brand-off-white);
    border:1px solid var(--brand-gray);
    color:var(--brand-gray);
    left:20px;
    padding:20px;
    position:absolute;
    top:0;
    transform:translateY(-50%);
}

.project-icon{
    background:var(--brand-gray);
    color:var(--brand-off-white);
    cursor:help;
    display:inline-block;
    font-size:16px;
    height:36px;
    margin:0 0 0 5px;
    position:relative;
    top:0;
    width:36px;
}

.project-icon-container:first-child .project-icon{
    margin:0;
}

.project-icon-container{
    display:inline-block;
    vertical-align:top;
}

/*.project-icon-container:hover .hidden{
    padding:0 0 0 5px;
    max-width:100%;
}*/

.project-icon::before{
    left:50%;
    position:absolute;
    top:50%;
    transform:translate(-50%, -50%);
}

.project-icon-container:first-child{
    margin:0;
}

.project-icons{
    display:inline-block;
    margin:0 0 0 10px;
    vertical-align:middle;
}

.project-main-medium{
    display:flex;
    justify-content:space-between;
}

.project-main-medium-video{
    left:0;
    position:relative;
    top:0;
    width:calc((100% - 20px)/2);
}

.project-main-medium video{
    width:100%;
}

.project-minigame{
    border:1px solid var(--brand-green);
    display:inline-block;
    left:0;
    margin:15px 0 0 0;
    overflow:hidden;
    padding:10px;
    position:relative;
    top:0;
    width:calc(100% - 22px);
}

.project-title{
    display:inline-block;
    font-size:24px;
    line-height:16px;
    margin:0;
    vertical-align:middle;
}

.resume-block{
    display:block;
}

.resume-bold{
    font-weight:600;
    margin:10px 0 0 0;
}

.resume-bold:first-child{
    margin:0;
}

#resume-brief{
    color:var(--brand-gray);
    display:inline-block;
    font-size:16px;
    margin:15px 0 0 0;
    width:100%;
}

#resume-brief a:link{
    text-decoration:underline dotted 2px;
}

#resume-brief a:active, #resume-brief a:link, #resume-brief a:hover, #resume-brief a:visited{
    color:var(--brand-gray);
    text-underline-offset:6px;
}

#resume-brief a:hover{
    text-decoration:underline solid 2px;
    text-underline-offset:5px;
}

#resume-table{
    border:none;
    color:var(--brand-gray);
    margin:15px 0 0 0;
}

.resume-table-left-icon{
    color:var(--brand-green);
    cursor:pointer;
    font-size:21px !important;
}

#resume-table h5{
    font-size:24px;
    font-weight:800;
    line-height:20px;
    margin:0;
    padding:0;
    text-transform:uppercase;
}

#resume-table span{
    font-size:16px;
}

#resume-table td:first-child{
    padding:0 10px 0 0;
    text-align:right;
    vertical-align:top;
    width:200px;
}

#resume-table td:last-child{
    border-left:2px solid var(--brand-gray);
    display:inline-block;
    margin:0 0 19px 0;
    padding:0 0 0 10px;
    vertical-align:top;
    width:calc(100% - 10px);
}

#resume-table tr:last-child td:last-child{
    margin:0;
}

.scale-up{
    transition:width .5s cubic-bezier(0.25, 1, 0.5, 1), height .5s cubic-bezier(0.25, 1, 0.5, 1), top .5s cubic-bezier(0.25, 1, 0.5, 1), left .5s cubic-bezier(0.25, 1, 0.5, 1);
}

.section-title{
    background:var(--brand-gray);
    color:var(--brand-off-white);
    display:block;
    font-size:32px;
    font-weight:800;
    margin:40px 0 0 0;
    overflow:hidden;
    padding:20px;
    text-transform:uppercase;
}

.select-button, .start-button{
    font-size:8px !important;
}

.shake{
    animation:shake 0.1s steps(1, start) forwards 4;
}

#showcase{
    display:none;
    margin:0 0 20px 0;
    text-align:center;
    width:100%;
}

.shrink{
    animation:shrink 0.25s cubic-bezier(0.22, 1, 0.36, 1) forwards 1;
}

.skill-card{
    border:1px solid var(--brand-gray);
    display:inline-block;
    left:0;
    margin:5px 10px 20px 0;
    padding:10px 15px 10px 20px;
    position:relative;
    top:0;
}

.skill-title{
    background:var(--brand-off-white);
    left:10px;
    position:absolute;
    top:0;
    transform:translate(0, calc(-50% - 1px));
}

.slide{
    animation:slide 0.5s ease-out forwards 1;
    position:absolute;
    left:50%;
    top:-6px;
    transform:translate(-50%, -50%);
}

.slide#geo-ball, .slide#geo-square, .slide#geo-tri{
    left:50%;
}

.spade, .heart, .club, .diamond{
    background:var(--brand-off-white);
    border:1px solid var(--brand-green);
    width:14px;
    height:22px;
}

.spade::before{
    background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="1137.000000pt" height="1280.000000pt" viewBox="0 0 1137.000000 1280.000000" preserveAspectRatio="xMidYMid meet"><metadata>Created by potrace 1.15, written by Peter Selinger 2001-2017</metadata><g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)" fill="%2300bc59" stroke="none"><path d="M5627 12712 c-315 -496 -846 -1081 -1469 -1618 -336 -290 -572 -477 -1253 -994 -481 -365 -783 -597 -945 -729 -1167 -948 -1699 -1689 -1870 -2604 -175 -934 -88 -1745 250 -2333 107 -186 181 -284 330 -437 486 -502 1192 -767 2115 -793 682 -20 1270 122 1723 416 252 163 499 410 662 661 l42 64 -7 -100 c-26 -416 -91 -1059 -140 -1383 -200 -1321 -628 -2032 -1497 -2486 -256 -134 -533 -236 -903 -331 l-170 -44 3185 0 3185 0 -185 49 c-345 91 -577 175 -840 307 -536 267 -911 642 -1160 1158 -247 514 -387 1169 -480 2245 -31 362 -47 575 -44 578 1 2 27 -34 57 -80 305 -460 762 -781 1342 -944 124 -35 303 -69 475 -91 199 -24 698 -24 915 1 760 88 1302 313 1718 715 630 609 838 1543 622 2790 -162 927 -690 1674 -1860 2627 -174 142 -441 348 -933 721 -890 676 -1206 933 -1653 1349 -422 393 -837 879 -1099 1286 l-57 89 -56 -89z"/></g></svg>');
    background-size:calc(100% - 4px);
    background-position:center;
    background-repeat:no-repeat;
    content:"";
    color:var(--brand-green);
    display:inline-block;
    width:100%;
    height:100%;
}

.spin{
    animation-play-state:running;
}

#typewriter-cursor{
    color:var(--brand-gray);
    font-size:16px;
}

.won{
    cursor:default !important;
}

.write{
    animation:write 0.5s cubic-bezier(0.5, 0, 0.75, 0) forwards 1;
}

@media only screen and (max-width: 1024px) {
    #hamburger{
        display:inline-block;
    }
    
    #navigation{
        display:none;
    }
}

@media only screen and (max-width: 768px) {
    .project-main-medium{
        display:inline-block;
    }
    
    .project-main-medium-video{
        width:100%;
    }
    
    .project-main-medium-video:nth-child(n+2){
        margin:20px 0 0 0;
    }
    
    .project-title{
        font-size:22px;
    }
}