* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;

}
.card {
   display: block;
   margin: 0px auto;

   text-align: center;
   width: 320px;
   height: 200px;
   overflow: hidden;
   position: relative;
   background: white;
   background-size: 300px 1000px;
   background-blend-mode: color-burn;
   box-shadow: 0px 20px 20px rgba(45, 53, 105, 0.723);
   border-radius: 50px;
   border: 3px solid black;
   border-top: 3px solid rgb(102, 76, 76);
  
   
}

span {
   display: block;
   position: absolute;
   width: 40px;
   height: 40px;
   border-radius: 20%;
   pointer-events: none;
   background: url(../uzenetek/Üzenetek\ Tünde14.jpg);
   background-size: 280px;
 background-position-x: center;
 background-position-y: center;
   background-attachment: fixed;
   


}
#szepElet{
   padding-top: 15%;
   color: gray;
}



#keszGo{
   text-decoration: none !important;
}



.startContainer{
   display: block;
   margin: 0 auto;
   padding-top: 20px;
   width: 95%;
   height: 80vh;
   background: rgb(241, 206, 206);
   border-radius: 50px;
   border: 2px solid rgba(109,65,65,1);
   text-align: center;
  


}

.feladatSzam{
   margin-bottom: 20px;
   text-shadow: 2px 2px 2px black;
}
.startBox{
   display: block;
   margin: 10px auto;
   text-align: center;
   width: 95%;
   height: 70vh;
   background: rgba(45, 53, 105, 0.323);
   border-radius: 50px;
   box-shadow: 0px 20px 30px rgba(81, 91, 153, 0.723);;
  
   border-bottom: 1px solid white ;


} 
.haviPontokR{
   float: left;
   margin: 30px 20px;
   
} 
.maiPontokR{
   float: right;
   margin: 30px 20px;
} 
  
   
.stjq{
   border-top: .1px solid white 
}

#leckekG{
   text-decoration: none;
   border: 1px solid rgba(109,65,65,1);
   background: rgb(241, 206, 206);
   padding: 10px;
   float: left;
   margin: 100px 50px;
   width: 30%;
   text-align: center;
   color: black;
   border-radius: 50px;
   box-shadow: 20px 20px 20px rgba(45, 53, 105, 0.723);
  
  
}
#hang1{
   height: 20px;
}
#indexG{
   text-decoration: none;
   border: 1px solid rgba(109,65,65,1);
   background: rgb(241, 206, 206);
   padding: 10px;
   float: right;
   margin: 100px 50px;
   width: 30%;
   text-align: center;
   color: black;
   border-radius: 50px;
   box-shadow: 20px 20px 20px rgba(45, 53, 105, 0.723);
}
#nagyProG{
   text-decoration: none;
   border: 1px solid rgba(109,65,65,1);
      background: rgb(241, 206, 206);
   padding: 10px;
   display: block;
   margin: 220px auto;
   width: 30%;
   text-align: center;
   color: black;
   border-radius: 50px;
   box-shadow: 20px 20px 20px rgba(45, 53, 105, 0.723);

}
.btn{
   
   width: 30%;
   display: block;
   margin: 0px auto;
   margin-bottom: 50px;
   border: 2px solid brown;
   padding:20px;
   color: black;
   border-radius: 50px;
   box-shadow: 20px 20px 20px rgba(45, 53, 105, 0.723);
  

}
.btn:hover{
   padding: 25px;
   color: rgb(200, 195, 200) !important;
   background: rgb(128, 103, 128);
   border: 2px dotted green !important;
   border-radius: 5px;
   box-shadow: 45px 45px 45px black;
   transition: .5s;
}
#btnLecke{
   
   margin-bottom: 100px;
}
#btnFeladat{

   padding-top: 5px;
   text-decoration: none;
   background: blanchedalmond;

}
#leckeH2{
   margin-bottom: 10px;
   color: black;
}
#btnSzavak{
  transition: .5s;
   margin-left: 10px;
}
.otpercesBox{
   padding-top: 50px;
}
.lecGo{
   transition: 2s;
}
.lecGo:hover{
   color: rgb(194, 8, 194) !important;
   background: rgb(128, 103, 128);
   border: 2px dotted green !important;
   border-radius: 5px;
   box-shadow: 45px 45px 45px black;
   transition: .5s;

}
.megoldBox{
   display: block;
   text-align: center;

}
.megoldP{
   display: none;
   text-align: center;
   margin: 10px;
}
.megoldP1{
   display: none;
   text-align: center;
   margin: 10px;
   
  

}

.sul{

  display:block;




}
.sul1{
   display:block;
}
#indexG{
   padding: 20px;
}


#rovFelKerd{
   padding-top: 100px;
   padding-bottom: 20px;
   text-align: center;
   color: rgb(248, 127, 184);
   width: 70%;
   display: block;
   margin: 0 auto;
   
}
.rovFelForm{
   padding-top: 15px;
   text-shadow: 3px 3px 3px black;
}
.inputRovFel{
   width: 98%;
   display: block;
   border-radius: 50px;
   margin: 20px auto;
   border-bottom: 1px solid white;
  
}
.keszGo{
   background: rgb(191, 177, 245);
   width: 40%;
   padding: 20px;
   margin: 10px;
   border: 1px solid rgb(214, 143, 143);
   border-radius: 50px;
   box-shadow: 20px 20px 20px rgba(0, 1, 5, 0.723);
   color: black;
   font-size: 20px;
}
#keszGo{
   background: rgb(191, 177, 245);
   width: 40%;
   padding: 20px;
   margin: 30px;
   border: 1px solid rgb(214, 143, 143);
   border-radius: 50px;
   box-shadow: 20px 20px 20px rgba(0, 1, 5, 0.723);
   color: black;
   font-size: 20px;
}
.hiba{
   padding-top: 150px;
   font-size: 30px;
   color: yellowgreen;
  
}
.pontok{
   padding-top: 15px;
   margin-bottom: 20px;
   text-shadow: 3px 3px 3px black;
   
}

.hiba2{
   margin: 0 ;
   color: red;
   font-size: 25px;
}
.hiba3{
   padding: 15px;
   color: rgb(246, 175, 175);

}
.hiba4{
   padding-top: 15px;
   text-shadow: 3px 3px 3px black;
}
.leckeveg{
   margin-top: 20px;
   padding-top: 20px !important;
}

.rovTovabb{
   text-decoration: none;
   display: block;
   background: rgb(191, 177, 245);
   width: 40%;
   padding: 20px;
   margin: 30px auto;
   text-align: center;
   border: 1px solid rgb(214, 143, 143);
   border-radius: 50px;
   box-shadow: 20px 20px 20px rgba(0, 1, 5, 0.723);
   color: black;
   font-size: 20px;
}
#rovHang{
   display: block;
   margin: 10px auto;
   height: 20px;

}
.imgRovid{
   display: block;
   margin: 5px auto;
   box-shadow: 0px 2px 10px 2px black;
   border-radius: 50px;
   border-bottom: 2px solid white;
   border-top: 2px solid white;
   width: 60%;
   height: 250px;
}
.valasztoTabla{
   width: 95%;
}
.valasztoTd{
   width: 12px !important;
   height: 60px;
}
.valasztoGomb{
   background: rgb(255, 0, 81);
   padding: 5% 10%;
   border-radius: 50%;
   cursor: pointer;
   border-left: 1px solid white;
   border-right: 1px solid white;
}
.mezo1{
   color: yellow;
 
}
#td5{
   background: green;
}

#but1,#but2,#but3,#but4,#but5,#but6,#but7,#but8,#but9,#but10,#but11{
   padding: 5% 11%;
}
.valasztoTd{
   background: rgb(185, 170, 246);
}
.box{
   width: 100px;
   height: 100px;
}
.h3puska{
   cursor: pointer;
}
#inpMegPuska{
   display: non;
}
.rovFordAng{
   
   margin-bottom: 30px !important;
}
.leckeId{
   color: grey;
   margin-top: -20px;
   margin-bottom:20px;
}
.aLeckeValaszto{
   text-decoration: none;
   color: red !important;
}

.valaszto{
   background: rgba(90, 86, 143, 0.219);
   

}
.belsoBoxValaszto{
 padding: 0;
 height: 100px;
 background: rgba(221, 221, 221, 0.157);
 border-radius: 50px;
 border-bottom: 1px solid white;
 transition: .5s;


 

}

.belsoBoxValaszto:hover{
   padding: 0;
   height: 10px;
   background: rgba(221, 221, 221, 0.157);
   border-radius: 50px;
   border-bottom: 1px solid red;
   transition: .5s;
   
  
   
  
  }
  .megtanultam{
    
     display: block !important;
     text-align: center;
     margin: 15px auto !important;
    height: 30px;
     background:rgb(204, 180, 204);
     border-bottom-left-radius: 30px;
     border-radius: 30px;
     margin-top: 5px;
     border: 1px solid white;
     border-left: 1px solid white;
     width: 90%;
     cursor: pointer;
  }
  .vegFel{
     padding: 5px 20px;
     font-size: 20px;
  }
  .keszVan{
     background: green !important;
     border-radius: 20px;
     color: white;
    
    
    
  }
.valasztoDoboz{
   background:rgba(152, 158, 172, 0.075);
   padding-bottom: 25px;

   
}
.valVissza{
   text-decoration: none;
   color: white;
   text-shadow: 3px 1px 3px black;
  
   
}










@media (max-width: 1200px) {

  

  
   #leckekG{
     
       display: block;
       float: none;
       margin: 20px auto;
       width: 90%;
       
   }
   #indexG{
       display: block;
       float: none;
       margin: 20px auto;
       width: 90%;
       
   }
   #nagyProG{
       display: block;
       float: none;
       margin: 20px auto;
       width: 90%;
   }
   .inputRovFel{
       width: 90%;
       display: block;
   
       margin: 0px auto;
       
   }
   .megtanultam{
    
      width: 90%;
   }
   .rovTovabb{
      width: 90%;
   }
  

   .btn{
   
       width: 90%;
       display: block;
       margin: 50px auto;
       margin-bottom: 20px;
       border: 2px solid brown;
       padding:30px;
       color: black;
       font-size: 20px !important;
   
   }
   .startBox{
       display: block;
       margin: 0 auto;
       text-align: center;
       width: 100%;
       height: 70vh;
       background: rgba(45, 53, 105, 0.323);
       border-radius: 50px;
       box-shadow: 0px 20px 30px rgba(45, 53, 105, 0.723);
   }

   .imgRovid{
      display: block;
      margin: 5px auto;
      box-shadow: 0px 2px 10px 2px black;
      border-radius: 50px;
      border-bottom: 2px solid white;
      border-top: 2px solid white;
      width: 90% !important;
      height: 250px;
   }
   .belsoBoxValaszto:hover{
      padding: 20;
      height: 100px;
      background: rgba(39, 59, 238, 0.157);
      border-radius: 50px;
      border-bottom: 1px solid red;
      transition: .5s;
      
     
      
     
     }
     .hiba2{
        margin-top: -200px;

      
     }
     .hiba{
       display: block;
     }
     .hiba5{
        margin-top: 0px;
        color: red;
     }

     .haviPontokR{
      display: none;
 
   } 
   .maiPontokR{
      float: none;
      margin: 20px auto;
      
      
      
   } 
   #rovFelKerd{
     width: 90%;
     padding-top: 20px;
      
   }
}

@media (max-width: 600px)
{

     
      
   }