.detHele1 {
position: absolute;
display: grid;
width: 98%;
height: 550px;
grid-template-columns: auto auto auto auto auto;
padding: 0px;
}
.grid-item {
position: absolute;
border: 1px solid rgba(0, 0, 0, 0.8);
border-radius: 20px;
padding: 0px;
font-size: 20px;
text-align: center;
display: grid;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
font-family: verdana;
font-size: 11px;
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
.close-btn1 {
position: absolute;
border: .6px solid black;
background: white;
padding: 10px;
top: 1rem;
right: 1rem;
font-size: 2rem;
cursor: pointer;
visibility: hidden;
}
.close-btn1:hover {
border: .6px solid white;
background: magenta;
}
.close-btn1:checked + .show1{
visibility: hidden;
}
.show1 {
position: absolute;
height: 450px;
width: 50%;
background-color: aqua;
z-index: 9;
transform: translateX(50%);
margin-top: 5%;
display: grid;
visibility: hidden;
border-radius: 20px;
}
.popup1 {
background-color: rgba(0, 0, 0, 0.575);
height: 590px;
width: 100%;
position: absolute;
z-index: 3;
visibility: hidden;
}
.total {
height: 50px;
text-align:center;
font-size:20px;
}
.item-1 {
margin-left: 30px;
margin-top: 20px;
/*align-self: center;*/
font-family: verdana;
}
.checkbox1, .checkbox2, .checkbox3, .checkbox4, .checkbox5 {
position: auto;
height: 30px;
width: 30px;
font-size: 20px;
margin-left: 20px;
text-transform: uppercase;
}
.checkbox6, .checkbox7, .checkbox8, .checkbox9, .checkbox10, .checkbox11, .checkbox12, .checkbox13, .checkbox14, .checkbox15, .checkbox16, .checkbox17, .checkbox18, .checkbox19, .checkbox20, .checkbox21, .checkbox22, .checkbox23, .checkbox24, .checkbox25, .checkbox26, .checkbox27, .checkbox28 {
position: auto;
height: 30px;
width: 30px;
font-size: 20px;
margin-left: 20px;
text-transform: uppercase;
}
.decode1 {
background-color: purple;
border-radius: 10px;
border: 0;
color: white;
padding: 5px;
height: 30px;
width: 40px;
cursor: pointer;
box-shadow: 0 5px #999;
margin-left: 10px;
}
.decode1:hover {
background-color: black;
}
.decode1:active {
background-color: black;
box-shadow: 0 3px #666;
transform: translateY(2px);
}
.decode0 {
background-color: purple;
border-radius: 10px;
border: 0;
color: white;
padding: 5px;
cursor: pointer;
box-shadow: 0 5px #999;
}
.decode0:hover {
background-color: black;
padding: 5px;
}
.decode0:active {
background-color: black;
box-shadow: 0 3px #666;
transform: translateY(2px);
}
.svar1 {
text-align:center;
height: 30px;
width: 30px;
font-size: 20px;
border-radius: 50%;
margin-left: 10px;
}
.resultat1, .resultat2, .resultat3, .resultat4, .resultat5, .resultat6, .resultat7, .resultat8, .resultat9, .resultat10, .resultat11, .resultat12, .resultat13, .resultat14, .resultat15 {
text-align: center;
font-size: 20px;
}
.ord1 {
margin-top: 10px;
margin-right: 20px;
}
.bogstaver1, .bogstaver2, .bogstaver3, .bogstaver4, .bogstaver5, .bogstaver6, .bogstaver7, .bogstaver8, .bogstaver9, .bogstaver10, .bogstaver11, .bogstaver12, .bogstaver13, .bogstaver14, .bogstaver15, .bogstaver16, .bogstaver17, .bogstaver18, .bogstaver19, .bogstaver20, .bogstaver21, .bogstaver22, .bogstaver23, .bogstaver24, .bogstaver25, .bogstaver26, .bogstaver27, .bogstaver28{
width: 80%;
grid-template-columns: auto auto auto auto auto auto auto auto;
row-gap: 100px;
display: grid;
}
.dyr1, .dyr2, .dyr3, .dyr4, .dyr5, .dyr6, .dyr7, .dyr8, .dyr9, .dyr10, .dyr11, .dyr12, .dyr13, .dyr14, .dyr15, .dyr16, .dyr17, .dyr18, .dyr19, .dyr20, .dyr21, .dyr22, .dyr23, .dyr24, .dyr25, .dyr26, .dyr27, .dyr28{
visibility: ;
}
.cirkel1 {
height: 50px;
width: 50px;
border-radius: 50%;
border: 3px solid magenta;
}
.door {
height: 100px;
width: 50px;
background-color: brown;
}
.doorNob {
position: absolute;
margin-left: 40px;
margin-top: 40px;
height: 20px;
width: 20px;
border-radius: 50%;
background-color: yellow;
}
.flagR {
height: 70px;
width: 80px;
background-color: red;
}
.flagL {
position:absolute;
margin-left: 0px;
margin-top: 30px;
height: 10px;
width: 70px;
background-color: white;
transform: rotate(90deg);
}
.flagV {
position:absolute;
margin-left: 0px;
margin-top: 30px;
height: 10px;
width: 80px;
background-color: white;
}
.firkant {
height: 80px;
width: 80px;
border: 3px solid magenta;
}
.trekant1 {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid magenta;
}
.zig1 {
height: 5px;
width: 80px;
background-color: magenta;
transform: rotate(10deg);
}
.zig2 {
margin-top: 10px;
height: 5px;
width: 80px;
background-color: magenta;
transform: rotate(-10deg);
}
.zig3 {
margin-top: 10px;
height: 5px;
width: 80px;
background-color: magenta;
transform: rotate(10deg);
}
.zig4 {
margin-top: 10px;
height: 5px;
width: 80px;
background-color: magenta;
transform: rotate(-10deg);
}
/*knap*/
.button3 {
position: auto;
width: 100%;
/*height: ;*/
background-color: lightblue;
/*text-transform: uppercase;*/
/*padding: 1rem 2.5rem;*/
cursor: pointer;
display: grid;
}
.button3:hover {
cursor: pointer;
background-color: #4D94DB;
}
.buttonTxt {
font-family: verdana;
justify-self: center;
align-self: center;
font-size: 20px;
/*letter-spacing: 2px;*/
font-weight: 900;
}
#letterA {
display: none;
}
#letterA:checked ~ #overlayA {
visibility: visible;
}
#letterA:checked ~ #letterAbutton {
background-color: magenta;
color: white;
}
#letterA:checked ~ #letterAbox {
visibility: visible;
animation: slide-in1 0.5s ease;
}
#letterB {
display: none;
}
#letterB:checked ~ #overlayB {
visibility: visible;
}
#letterB:checked ~ #letterBbutton {
background-color: #4D94DB;
}
#letterB:checked ~ #letterBbox {
visibility: visible;
animation: slide-in1 0.5s ease;
}
#letterC {
display: none;
}
#letterC:checked ~ #overlayC {
visibility: visible;
}
#letterC:checked ~ #letterCbutton {
background-color: #4D94DB;
}
#letterC:checked ~ #letterCbox {
visibility: visible;
animation: slide-in1 0.5s ease;
}
#letterD {
display: none;
}
#letterD:checked ~ #overlayD {
visibility: visible;
}
#letterD:checked ~ #letterDbutton {
background-color: #4D94DB;
}
#letterD:checked ~ #letterDbox {
visibility: visible;
animation: slide-in1 0.5s ease;
}
#letterE {
display: none;
}
#letterE:checked ~ #overlayE {
visibility: visible;
}
#letterE:checked ~ #letterEbutton {
background-color: magenta;
color: white;
}
#letterE:checked ~ #letterEbox {
visibility: visible;
animation: slide-in1 0.5s ease;
}
#letterF {
display: none;
}
#letterF:checked ~ #overlayF {
visibility: visible;
}
#letterF:checked ~ #letterFbutton {
background-color: #4D94DB;
}
#letterF:checked ~ #letterFbox {
visibility: visible;
animation: slide-in1 0.5s ease;
}
#letterG {
display: none;
}
#letterG:checked ~ #overlayG {
visibility: visible;
}
#letterG:checked ~ #letterGbutton {
background-color: #4D94DB;
}
#letterG:checked ~ #letterGbox {
visibility: visible;
animation: slide-in1 0.5s ease;
}
#letterH {
display: none;
}
#letterH:checked ~ #overlayH {
visibility: visible;
}
#letterH:checked ~ #letterHbutton {
background-color: #4D94DB;
}
#letterH:checked ~ #letterHbox {
visibility: visible;
animation: slide-in1 0.5s ease;
}
#letterI {
display: none;
}
#letterI:checked ~ #overlayI {
visibility: visible;
}
#letterI:checked ~ #letterIbutton {
background-color: magenta;
color: white;
}
#letterI:checked ~ #letterIbox {
visibility: visible;
animation: slide-in1 0.5s ease;
}
#letterJ {
display: none;
}
#letterJ:checked ~ #overlayJ {
visibility: visible;
}
#letterJ:checked ~ #letterJbutton {
background-color: #4D94DB;
}
#letterJ:checked ~ #letterJbox {
visibility: visible;
animation: slide-in1 0.5s ease;
}
#letterK {
display: none;
}
#letterK:checked ~ #overlayK {
visibility: visible;
}
#letterK:checked ~ #letterKbutton {
background-color: #4D94DB;
}
#letterK:checked ~ #letterKbox {
visibility: visible;
animation: slide-in1 0.5s ease;
}
#letterL {
display: none;
}
#letterL:checked ~ #overlayL {
visibility: visible;
}
#letterL:checked ~ #letterLbutton {
background-color: #4D94DB;
}
#letterL:checked ~ #letterLbox {
visibility: visible;
animation: slide-in1 0.5s ease;
}
#letterM {
display: none;
}
#letterM:checked ~ #overlayM {
visibility: visible;
}
#letterM:checked ~ #letterMbutton {
background-color: #4D94DB;
}
#letterM:checked ~ #letterMbox {
visibility: visible;
animation: slide-in1 0.5s ease;
}
#letterN {
display: none;
}
#letterN:checked ~ #overlayN {
visibility: visible;
}
#letterN:checked ~ #letterNbutton {
background-color: #4D94DB;
}
#letterN:checked ~ #letterNbox {
visibility: visible;
animation: slide-in1 0.5s ease;
}
#letterO {
display: none;
}
#letterO:checked ~ #overlayO {
visibility: visible;
}
#letterO:checked ~ #letterObutton {
background-color: magenta;
color: white;
}
#letterO:checked ~ #letterObox {
visibility: visible;
animation: slide-in1 0.5s ease;
}
#letterP {
display: none;
}
#letterP:checked ~ #overlayP {
visibility: visible;
}
#letterP:checked ~ #letterPbutton {
background-color: #4D94DB;
}
#letterP:checked ~ #letterPbox {
visibility: visible;
animation: slide-in1 0.5s ease;
}
#letterQ {
display: none;
}
#letterQ:checked ~ #overlayQ {
visibility: visible;
}
#letterQ:checked ~ #letterQbutton {
background-color: #4D94DB;
}
#letterQ:checked ~ #letterQbox {
visibility: visible;
animation: slide-in1 0.5s ease;
}
#letterR {
display: none;
}
#letterR:checked ~ #overlayR {
visibility: visible;
}
#letterR:checked ~ #letterRbutton {
background-color: #4D94DB;
}
#letterR:checked ~ #letterRbox {
visibility: visible;
animation: slide-in1 0.5s ease;
}
#letterS {
display: none;
}
#letterS:checked ~ #overlayS {
visibility: visible;
}
#letterS:checked ~ #letterSbutton {
background-color: #4D94DB;
}
#letterS:checked ~ #letterSbox {
visibility: visible;
animation: slide-in1 0.5s ease;
}
#letterT {
display: none;
}
#letterT:checked ~ #overlayT {
visibility: visible;
}
#letterT:checked ~ #letterTbutton {
background-color: #4D94DB;
}
#letterT:checked ~ #letterTbox {
visibility: visible;
animation: slide-in1 0.5s ease;
}
#letterU {
display: none;
}
#letterU:checked ~ #overlayU {
visibility: visible;
}
#letterU:checked ~ #letterUbutton {
background-color: magenta;
color: white;
}
#letterU:checked ~ #letterUbox {
visibility: visible;
animation: slide-in1 0.5s ease;
}
#letterV {
display: none;
}
#letterV:checked ~ #overlayV {
visibility: visible;
}
#letterV:checked ~ #letterVbutton {
background-color: #4D94DB;
}
#letterV:checked ~ #letterVbox {
visibility: visible;
animation: slide-in1 0.5s ease;
}
#letterX {
display: none;
}
#letterX:checked ~ #overlayX {
visibility: visible;
}
#letterX:checked ~ #letterXbutton {
background-color: #4D94DB;
}
#letterX:checked ~ #letterXbox {
visibility: visible;
animation: slide-in1 0.5s ease;
}
#letterY {
display: none;
}
#letterY:checked ~ #overlayY {
visibility: visible;
}
#letterY:checked ~ #letterYbutton {
background-color: magenta;
color: white;
}
#letterY:checked ~ #letterYbox {
visibility: visible;
animation: slide-in1 0.5s ease;
}
#letterZ {
display: none;
}
#letterZ:checked ~ #overlayZ {
visibility: visible;
}
#letterZ:checked ~ #letterZbutton {
background-color: #4D94DB;
}
#letterZ:checked ~ #letterZbox {
visibility: visible;
animation: slide-in1 0.5s ease;
}
#letterAE {
display: none;
}
#letterAE:checked ~ #overlayAE {
visibility: visible;
}
#letterAE:checked ~ #letterAEbutton {
background-color: magenta;
color: white;
}
#letterAE:checked ~ #letterAEbox {
visibility: visible;
animation: slide-in1 0.5s ease;
}
#letterOE {
display: none;
}
#letterOE:checked ~ #overlayOE {
visibility: visible;
}
#letterOE:checked ~ #letterOEbutton {
background-color: magenta;
color: white;
}
#letterOE:checked ~ #letterOEbox {
visibility: visible;
animation: slide-in1 0.5s ease;
}
#letterAA {
display: none;
}
#letterAA:checked ~ #overlayAA {
visibility: visible;
}
#letterAA:checked ~ #letterAAbutton {
background-color: magenta;
color: white;
}
#letterAA:checked ~ #letterAAbox {
visibility: visible;
animation: slide-in1 0.5s ease;
}
@keyframes slide-in1 {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(50%);
}
}
@keyframes slide-out1 {
0% {
transform: translateX(50%);
}
100% {
transform: translateX(-100%);
}
}
@media only screen and (max-width: 1200px) {
.show1 {width: 98%; transform: translateX(0%);}
}
@media only screen and (max-width: 1200px) {
#letterAbox, #letterBbox, #letterCbox, #letterDbox, #letterEbox, #letterFbox, #letterGbox, #letterHbox, #letterIbox, #letterJbox, #letterKbox, #letterLbox, #letterMbox, #letterNbox, #letterObox, #letterPbox, #letterQbox, #letterRbox, #letterSbox, #letterTbox, #letterUbox, #letterVbox, #letterXbox, #letterYbox, #letterZbox, #letterAEbox, #letterOEbox, #letterAAbox {animation: slide-in1 0s;}
}
.popup2 {
top: 0;
background-color: rgba(0, 0, 0, 0.575);
height: 100%;
width: 100%;
position: absolute;
z-index: 3;
visibility: hidden;
}
.notyet {
position: absolute;
margin-top: 50px;
margin-left: 20%;
color: white;
font-family: verdana;
font-size: 60px;
font-weight: 900;
}
.goBack1 {
position: relative;
margin-top: 300px;
margin-left: 40%;
width: 200px;
height: 50px;
border-radius: 20px;
background-color: purple;
color: white;
font-size: 20px;
}
.goBack1:hover {
background-color: black;
}
.winner {
position: absolute;
margin-top: 50px;
margin-left: 20%;
color: white;
font-family: verdana;
font-size: 60px;
font-weight: 900;
}
.trophy {
position: absolute;
width: 200px;
margin-top: 150px;
margin-left: 300px;
opacity: 0;
}
.div1 {
position: absolute;
width: 200px;
height: 200px;
opacity: 0;
}
#ball1 {
position: absolute;
margin-top: 200px;
margin-left: 100px;
width: 200px;
height: 200px;
border-radius: 50%;
/*transform-origin: bottom;*/
transform-style: preserve-3d;
background-image: radial-gradient(circle at top, hsl(var(--hue, 0), 100%, 75%), hsl(var(--hue, 0), 100%, 0%));
animation: dot1 2s linear infinite;
}
@keyframes dot1 {
0% {filter: hue-rotate(360deg); height: 160px; margin-top: 250px;}
5% {margin-top: 200px; height: 200px;}
50% {margin-top: 0px; height: 200px;}
90% {margin-top: 200px; height: 200px;}
100% {margin-top: 250px; height: 160px;}
}
.resultatALL {
position: absolute;
margin-top: 560px;
left: 10px;
visibility: hidden;
}
.tjek1 {
margin-top: 535px;
width: 99%;
border-radius: 20px;
background-color: purple;
color: white;
font-size: 20px;
}
.tjek1:hover {
background-color: black;
}
!
