#mainBox {
  background-color: cadetblue;
  border: 1px solid black;
  background-size: auto;
  }
#headerBox {
  background-color: lightblue;
  border: 1px solid black;
  height: 100px;
  width: 650px;
  margin-left:155px;
  }
#box {
  background-color: darkred;
  border: 1px solid black;
  height: 1200px;
  width: 650px;
  margin-left:155px;
  } 

#boxKezdolap {
  background-color: darkred;
  border: 1px solid black;
  height: 810px;
  width: 650px;
  margin-left:155px;
  } 


.headerBox1{
    background-color: lightblue;
    margin-top: 28px;
    margin-left:10px;
    height: 50px;
    width: 140px;
    float: left;
    font-size: 2.8rem !important;
    color: darkslategray;
    text-align:  center;
}


.headerBox2{
    background-color: lightblue;
    margin-top: 25px;
    margin-left:20px;
    height: 50px;
    width: 270px;
    float: left;
    font-size: 1.2rem !important;
    color: darkslategray;
    text-align:  center;
} 


.headerBox3{
    background-color: white;
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom:0px;
    margin-left:40px;
    height: 80px;
    width: 130px;
    float: left;
    font-size: 3.12rem !important;
    color: black;
    text-align:  center;
    background: url('szimbolum.png');
    background-size: cover; 
}

.maintext {
  color: lightblue;
  text-align: center;
  font-size: 0.7rem;
  word-wrap: break-word;
  padding: 10px;
  margin: 0;
}


.maintext2 {
  color: lightblue;
  text-align: center;
  font-size: 0.85rem;
  word-wrap: break-word;
  padding: 10px;
  margin: 0;
}

    .button1 {
  background-color: darkred;
  color: white;
  font-weight: bold;
  padding: 6px;
  font-size: 1.2rem;
  border: none;     
  }
    
 .button1:hover {
  background-color: lightblue;
  color: black;
  text-decoration: underline;     
  }    

.headerBoxCommon1{
    background-color: saddlebrown;
    height: 35px;
    width: 650px;
    float: left;
    font-size: 1.75rem !important;
    color: rgb(0,58,128);
}


.headerBoxCommon2{
    background-color: sienna;
    margin-top: -4px;
    height: 28px;
    width: 650px;
    float: left;
    font-size: 1.35rem !important;
    color: beige;
    text-align:  center;
}


@media screen and (max-width: 700px) {
  .headerBox1, .headerBox2, .headerBox3 {
    width: 100%;
    font-size: 1.3rem !important;
    float: none;
    text-align: center;
  }

  p {
    font-size: 1rem !important;
  }

  .button1 {
    font-size: 1rem;
    margin: 2px;
  }

  #boxKezdolap div {
    width: 100% !important;
    float: none !important;
    margin: 5px 0 !important;
  }
}