body {
    overflow: hidden;
    background-color: rgb(59, 59, 59);
    user-select: none;
}

.class1 {
    display: flex;
    position: absolute;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    top: 54.68%;
    width: 16.64%;
    height: 37.77%;
    z-index: 9;
    color: rgb(0, 0, 0);
    overflow: hidden;
    background-color: rgb(177, 177, 177);
    border: solid rgb(0, 0, 0) 2px;
    border-radius: 8px;
    box-shadow: 10px 10px 10px #3d3d3d;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.83vw;
    padding: 0px;
    margin: 0px;
    user-select: none;
}

.ltaste {
    display: flex;
    position: absolute;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    height: 18.38%;
    z-index: 9;
    color: rgb(233, 233, 233);
    overflow: hidden;
    background-color: rgb(75, 75, 75);
    border: solid rgb(241, 241, 241) 2px;
    border-radius: 9px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.83vw;
    padding: 0px;
    margin: 0px;
    user-select: none;
}

.rtaste {
    display: flex;
    position: absolute;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    height: 18.38%;
    z-index: 9;
    color: rgb(233, 233, 233);
    overflow: hidden;
    background-color: rgb(75, 75, 75);
    border: solid rgb(241, 241, 241) 2px;
    border-radius: 9px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.83vw;
    padding: 0px;
    margin: 0px;
    user-select: none;
}

.display {
    display: flex;
    position: absolute;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    top: 54.93%;
    width: 14.79%;
    height: 13.60%;
    z-index: 9;
    color: rgb(0, 0, 0);
    overflow: hidden;
    background-color: #cdddcf;
    border: solid rgb(0, 0, 0) 3px;
    border-radius: 9px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 5.52vw;
    padding: 0px;
    margin: 0px;
    user-select: none;
}

.class27 {
    display: block;
    position: absolute;
    width: 12.77%;
    height: 21.47%;
    z-index: 9;
    color: rgb(0, 0, 0);
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0);
    border: solid rgb(0, 0, 0) 0px;
    margin: 0px;
}

.mname {
    display: block;
    position: absolute;
    top: -1%;
    width: 46.5%;
    height: 5.2%;
    z-index: 9;
    color: rgb(0, 0, 0);
    overflow: hidden;
    background-color: transparent;
    border: solid rgb(0, 0, 0) 2px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.69vw;
    padding: 0.5%;
    padding-left: 1%;
    margin: 0px;
    text-align: center;
    user-select: none;
}

.class33 {
    display: flex;
    position: absolute;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    width: 6.61%;
    height: 6.49%;
    z-index: 9;
    color: rgb(0, 0, 0);
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.26);
    border: solid rgb(0, 0, 0) 2px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.83vw;
    padding: 0px;
    margin: 0px;
    user-select: none;
}

#rahmen1 {
    left: 2.33%;
}

#div2 {
    top: 10.03%;
    left: 11.57%;
    width: 23.97%;
}

#div4 {
    top: 10.02%;
    left: 38.85%;
    width: 23.97%;
}

#div5 {
    top: 10.02%;
    left: 66.12%;
    width: 23.97%;
}

#div6 {
    top: 29.87%;
    left: 11.82%;
    width: 23.97%;
}

#div7 {
    top: 29.87%;
    left: 39.12%;
    width: 23.97%;
}

#div8 {
    top: 29.87%;
    left: 66.39%;
    width: 23.97%;
}

#div9 {
    top: 50.12%;
    left: 11.82%;
    width: 23.97%;
}

#div10 {
    top: 50.12%;
    left: 39.10%;
    width: 23.97%;
}

#div11 {
    top: 50.12%;
    left: 66.39%;
    width: 23.97%;
}

#div12 {
    top: 71.56%;
    left: 11.82%;
    width: 78.89%;
}

#rahmen2 {
    left: 81.04%;
}

#div14 {
    top: 10.03%;
    left: 11.57%;
    width: 23.97%;
}

#div15 {
    top: 10.02%;
    left: 38.85%;
    width: 23.97%;
}

#div16 {
    top: 10.02%;
    left: 66.12%;
    width: 23.97%;
}

#div17 {
    top: 29.87%;
    left: 11.82%;
    width: 23.97%;
}

#div18 {
    top: 29.87%;
    left: 39.12%;
    width: 23.97%;
}

#div19 {
    top: 29.87%;
    left: 66.39%;
    width: 23.97%;
}

#div20 {
    top: 50.52%;
    left: 11.82%;
    width: 23.97%;
}

#div21 {
    top: 50.12%;
    left: 39.10%;
    width: 23.97%;
}

#div22 {
    top: 50.12%;
    left: 66.39%;
    width: 23.97%;
}

#div23 {
    top: 71.56%;
    left: 11.82%;
    width: 78.89%;
}

#display1 {
    left: 3.4%;
    top: 42%;
    z-index: 5;
}

#display2 {
    left: 82.0%;
    top: 42%;
    z-index: 5;
}

#gbtn1 {
    top: 70.81%;
    left: 22.86%;
    width: 12.5%;
    height: auto;
}

#gbtn2 {
    top: 70.54%;
    left: 64.57%;
    width: 12.5%;
    height: auto;
}

#bglinks {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 48%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    background-color: #EEE;
    padding: 0px;
    margin: 0px;
}

#bgrechts {
    display: block;
    position: absolute;
    top: 0;
    left: 52%;
    width: 48%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    background-color: #EEE;
    padding: 0px;
    margin: 0px;
}

#name1 {
    left: 0%;
}

#name2 {
    left: 51.9%;
}

#aufgabe {
    display: flex;
    position: absolute;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    top: 12%;
    left: 30.33%;
    width: 38.23%;
    height: 29.24%;
    z-index: 9;
    color: rgb(17, 15, 15);
    overflow: hidden;
    background-color: rgb(238, 238, 238);
    border: solid rgb(0, 0, 0) 2px;
    border-radius: 21px;
    box-shadow: 27px 27px 27px rgba(0, 0, 0, 0.5);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 8.35vw;
    font-weight: bold;
    padding: 0px;
    margin: 0px;
    user-select: none;
}

#timeline {
    display: block;
    position: absolute;
    top: 14%;
    left: 30.34%;
    width: 38.1%;
    height: 1%;
    z-index: 10;
    background-color: chocolate;
    padding: 0px;
    margin: 0px;
}

#loesung {
    display: flex;
    position: absolute;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    top: 39%;
    left: 35%;
    width: 30%;
    height: 15%;
    z-index: 10;
    color: rgb(17, 15, 15);
    overflow: hidden;
    background-color: rgb(199, 199, 199);
    border: solid rgb(0, 0, 0) 2px;
    border-radius: 21px;
    box-shadow: 27px 27px 27px rgba(0, 0, 0, 0.5);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 7vw;
    font-weight: bold;
    padding: 0px;
    margin: 0px;
}

#punkte1 {
    top: -2px;
    left: -0.36%;
    border-bottom: none;
}

#punkte2 {
    top: -2px;
    left: 93.39%;
    border-bottom: none;
}

.o_name {
    display: block;
    position: absolute;
    left: 25.98%;
    width: 67.83%;
    height: 7.24%;
    z-index: 9;
    color: rgb(0, 0, 0);
    overflow: hidden;
    background-color: rgb(255, 255, 255);
    border: solid rgb(0, 0, 0) 1px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.83vw;
    padding: 0.5%;
    padding-left: 1%;
    margin: 0px;
}

.o_label {
    display: flex;
    position: absolute;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    height: 4.05%;
    z-index: 9;
    color: rgb(0, 0, 0);
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0);
    border: solid rgb(0, 0, 0) 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.98vw;
    padding: 0px;
    margin: 0px;
    user-select: none;
}

.or {
    display: flex;
    position: absolute;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    width: 2.98%;
    height: 5.43%;
    z-index: 9;
    color: rgb(0, 0, 0);
    overflow: hidden;
    background-color: rgb(255, 255, 255);
    border: solid rgb(0, 0, 0) 2px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.83vw;
    padding: 0px;
    margin: 0px;
    user-select: none;
}

.o_punkte {
    display: block;
    position: absolute;
    top: 68.62%;
    left: 24.99%;
    width: 6.56%;
    height: 5.53%;
    z-index: 9;
    color: rgb(0, 0, 0);
    overflow: hidden;
    background-color: rgb(255, 255, 255);
    border: solid rgb(0, 0, 0) 1px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.27vw;
    padding: 0.5%;
    padding-left: 1%;
    margin: 0px;
}

.o_zeit {
    display: block;
    position: absolute;
    top: 68.62%;
    left: 59.02%;
    width: 6.56%;
    height: 5.53%;
    z-index: 9;
    color: rgb(0, 0, 0);
    overflow: hidden;
    background-color: rgb(255, 255, 255);
    border: solid rgb(0, 0, 0) 1px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.27vw;
    padding: 0.5%;
    padding-left: 1%;
    margin: 0px;
}

#o_rahmen {
    display: flex;
    position: absolute;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    top: 5.68%;
    left: 5.18%;
    width: 89.94%;
    height: 88.80%;
    z-index: 20;
    color: rgb(0, 0, 0);
    overflow: hidden;
    background-color: rgb(164, 180, 233);
    border: solid rgb(0, 0, 0) 2px;
    border-radius: 31px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.83vw;
    padding: 0px;
    margin: 0px;
}

#o_titel {
    display: flex;
    position: absolute;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    top: 3.06%;
    left: 5.25%;
    width: 88.66%;
    height: 8.41%;
    z-index: 9;
    color: rgb(0, 0, 0);
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.365);
    border: solid rgb(0, 0, 0) 0px;
    box-shadow: 9px 9px 9px rgba(0, 0, 0, 0.3);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.83vw;
    padding: 0px;
    margin: 0px;
}

#o_name1 {
    top: 17.09%;
}

#o_name2 {
    top: 30.13%;
}

#o_l1 {
    top: 18.79%;
    left: 6.23%;
    width: 18.35%;
}

#o_l2 {
    top: 31.53%;
    left: 6.23%;
    width: 18.35%;
}

#o_l3 {
    top: 46.71%;
    left: 40.97%;
    width: 18.35%;
    font-weight: bold;
}

#or1 {
    top: 55.28%;
    left: 6.79%;
}

#ol11 {
    top: 55.91%;
    left: 9.77%;
    width: 2.99%;
}

#or2 {
    top: 55.28%;
    left: 15.79%;
}

#ol12 {
    top: 55.91%;
    left: 19.05%;
    width: 2.99%;
}

#or3 {
    top: 55.28%;
    left: 25.05%;
}

#ol13 {
    top: 55.91%;
    left: 28.35%;
    width: 2.99%;
}

#or4 {
    top: 55.28%;
    left: 34.35%;
}

#ol14 {
    top: 55.91%;
    left: 37.75%;
    width: 2.99%;
}

#or5 {
    top: 55.28%;
    left: 42.98%;
}

#ol15 {
    top: 55.91%;
    left: 46.24%;
    width: 2.99%;
}

#or6 {
    top: 55.28%;
    left: 52.52%;
}

#ol16 {
    top: 55.91%;
    left: 55.77%;
    width: 2.99%;
}

#or7 {
    top: 55.28%;
    left: 62.40%;
}

#ol17 {
    top: 55.91%;
    left: 65.62%;
    width: 2.99%;
}

#or8 {
    top: 55.28%;
    left: 70.70%;
}

#ol18 {
    top: 55.91%;
    left: 74.00%;
    width: 2.99%;
}

#or9 {
    top: 55.28%;
    left: 79.83%;
}

#ol19 {
    top: 55.91%;
    left: 83.13%;
    width: 2.99%;
}

#or10 {
    top: 55.23%;
    left: 88.29%;
}

#ol20 {
    top: 55.91%;
    left: 91.67%;
    width: 2.99%;
}

#opl1 {
    top: 69.40%;
    left: 6.64%;
    width: 18.35%;
    height: 6%;
}

#opl2 {
    top: 69.40%;
    left: 37.43%;
    width: 22.91%;
    height: 6%;
}

#opz1 {}

#o_start {
    display: flex;
    position: absolute;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    top: 83.93%;
    left: 6.37%;
    width: 88.89%;
    height: 9.80%;
    z-index: 9;
    color: rgb(243, 243, 243);
    overflow: hidden;
    background-color: rgb(30, 87, 178);
    border: solid rgb(0, 0, 0) 5px;
    border-radius: 36px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.83vw;
    padding: 0px;
    margin: 0px;
    user-select: none;
}

#pokal1 {
    display: none;
    position: absolute;
    left: 5%;
    top: 11%;
    width: 12%;
    height: auto;
    z-index: 10;
}

#pokal2 {
    display: none;
    position: absolute;
    right: 5%;
    top: 11%;
    width: 12%;
    height: auto;
    z-index: 10;
}

#neuspiel {
    display: flex;
    position: absolute;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    top: 87.76%;
    left: 40%;
    width: 20%;
    height: 7.5%;
    z-index: 9;
    color: rgb(0, 0, 0);
    overflow: hidden;
    background-color: rgb(215, 215, 215);
    border: solid rgb(0, 0, 0) 2px;
    border-radius: 26px;
    box-shadow: 9px 9px 9px rgba(0, 0, 0, 0.3);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.83vw;
    padding: 0px;
    margin: 0px;
    user-select: none;
}