a {
color:#3b3b3d;
}
.question {
   border:2px dotted #3b3b3d;
   text-align: center;
   padding: 5px;
   max-width: 250px;
   margin-bottom: 20px;
   align-self: center;
}

.logo, #logo {
   width:150px;
   height: 150px;
   align-self: center;
   margin-top: 20px;
}
#koden {
   display: flex;
   flex-direction: column;
   text-align: center;
}

button {
   font-family: "permanent marker", helvetica, sans-serif;
   background-color: rgba(255, 255, 255, 0);
   border-radius: 5px;
   border: 2.5px solid  #3b3b3d;
   color: #3b3b3d;
}

input {
   background-color: #ffffff00;
   border: 3px solid #3b3b3d;
   border-radius: 5px;
}
p {
   font-size: calc(0,5rem + 0,5vw);
   color: #3b3b3d;
   text-decoration: none;
} 
.mainSection{
   text-align: center;
   max-width: 400px;
   align-self: center;
   padding:10px;
   display:flex;
   flex-direction: column;
   
}


body {
   font-family: "permanent marker", verdana, sans-serif;
   flex-direction: column;
   display:flex;
   background-image: radial-gradient( circle 999px at 50.6% 40%,  rgb(250, 232, 217) 6.2%, rgb(149, 125, 104) 100.2% );
   background-size: cover;
   min-height: 100vh;
   color:#3b3b3d;
   padding:10px;
   align-items: center;

}
   h1 {
   font-size: calc(1rem + 1.2vw);
   text-align: center;
   margin-bottom: 20px;
}

span {
   cursor:pointer;
}

.gif {
   align-self: center;
   opacity: 0.6;
   width:150px;
}

.gifs {
   align-self: center;
   opacity: 0.7;
   width:240px;
   margin-bottom: 0;
}

#status {
   color: rgba(178, 54, 54, 0.924);
   margin:0;
   font-size: 10px;
}

#hintet {
   font-size: 13px;
   align-self: center;
}

.hint {
   text-align: center;
}

.opg9 {
   width: 160px;
   align-self: center;
   padding: 10px;
}