@import url('https://fonts.googleapis.com/css?family=Baloo+Bhai|Gorditas|Passero+One');
@import url('https://fonts.googleapis.com/css?family=Alex+Brush|Bad+Script|Great+Vibes|Henny+Penny|Rammetto+One|Rock+Salt');
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');		
td {
    border: 1px solid black;
    background-color: blue;
    color: white;
    font-size: 40pt;
}
body {
    background-image: url("Ramadhan_Challenge_Hintergrund.png");
    /*background-size: cover;
    background-position: 0 0 center;
    background-repeat: no-repeat;
    background-color: black;
    height: 100vh;*/
    background-size: cover;
    height: 100vh;
    background-repeat: no-repeat;
    background-position: 0 0, center;

    
}

main {
    text-align: center;
    margin: 0 auto;
    color: rgb(255, 255, 255);
    font-size: 20pt;	
    max-width: 40em;

}

.box {
    float: left;	
    position: center;;
    width: 150px;
    height: 150px;
    margin: 10px;
    text-align: center;
    text-indent: 10px;
    line-height: 150px;
    border-color: rgb(144, 150, 68);
    border-width: 0.8px;
    border-style: solid;
    font-family:'Montserrat', sans-serif;;
    font-size: 30pt;
    color: lightyellow;	
}

.light-box_gesperrt {
    float: left;	
    position: center;;
    width: 150px;
    height: 150px;
    margin: 10px;
    text-align: center;
    text-indent: 10px;
    line-height: 150px;
    border-color: rgb(144, 150, 68);
    border-width: 0.8px;
    box-shadow: 15px 8px 30px lightyellow;
    border-style: solid;
    font-family:'Montserrat', sans-serif;;
    font-size: 30pt;
    color: lightyellow;
    background-image: url(lock.png);	
    background-position: 50% 30%;
    background-size: 250px;

}

.light-box_gesperrt:hover{
    cursor: not-allowed;
}

.light-box{
    float: left;	
    position: center;;
    width: 150px;
    height: 150px;
    margin: 10px;
    text-align: center;
    text-indent: 10px;
    line-height: 150px;
    border-color: rgb(144, 150, 68);
    border-width: 0.8px;
    box-shadow: 15px 8px 30px lightyellow;
    border-style: solid;
    font-family:'Montserrat', sans-serif;;
    font-size: 30pt;
    color: lightyellow;
    cursor: pointer;
    transition: background-color 0.20s;
}

.light-box:hover {
background-color: rgb(243, 215, 121);	
opacity: 70%;
}

.light-box:active{
    background-color: rgb(72, 89, 104);
}

.gesamt {
    margin-top: 1em;
    position: center;
    margin-left: 80px;
}
#einsende {

    color: red;
}

.headings {
    position: center;
    font-family: 'Montserrat', sans-serif;
    color: rgb(255, 243, 211);

}

.texts {
    position: center;
    color: rgb(255, 243, 211);
    margin-top: 50px;
    margin-bottom: 50px;
}
/*h1 {
    position: center;
    font-family: 'Montserrat', sans-serif;
    color: black;
    
}*/
a:link {
    color: white;
    background-color: transparent;
    text-decoration: none;
  }

h2 {
    position: center;
    font-family: 'Montserrat', sans-serif;
    color: rgb(255, 243, 211);
    font-size: 30px;
    padding-top: 15px;
}
h3 {
    position: center;
    font-family: 'Montserrat', sans-serif;
    color: rgb(255, 243, 211);
    font-size: 20px;
}

p{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size: 40px;
}

.links-style{
    color: rgb(255, 243, 211); 
    font-size: 16px; 
}


/* img {
    float:right;
    width: 225px;
    margin: 100em;
}*/

.links {

    color: white;
}

.font-red {
    color: red;
}

i.font-yellow {
    color: yellow;
}

.font-green {
    color: limegreen;
}

.font-blue {
    color: deepskyblue;
}

.font-pink {
    color: hotpink;
}

.font-white {
    color: goldbraun;
}
.font-pink:hover {
    color: hotpink;
}

.font-gold {
    color: rgb(255, 243, 211);
}