body{
    background-color : black;
    padding: 0px;
    margin:auto;
    overflow: scroll;
    color:white;
    background-color:white;
    background-size:cover;
    transition: all 0.3s ease-in-out;
}

@font-face{
    font-family: firamonoregular;
    src: url(firamonoregular.ttf);
  } 
@font-face{
    font-family: teszt2;
    src: url(moonb.ttf);
  } 

@font-face{
    font-family: teszt3;
    src: url(cutivemono.ttf);
  } 

@font-face{
    font-family: tryout;
    src: url(rob.ttf);
  }   

@font-face{
    font-family: title;
    src: url(cramaten.ttf);
  } 



@font-face{
    font-family: readexproregular;
    src: url(readexproregular.ttf);
  } 

a{
    color:orangered;
    text-decoration: none;  
    font-family: teszt3;
    font-size: medium;
}
a:hover{
    color:orangered;
    text-decoration: underline;
    
  }
p{
    text-align: center;
}
h1{
    font-size: medium;
    font-family: teszt3;
    color:black;
    clear:none;
    margin:auto;
 
}
#uk_lang{
    background-image: url('svg/united-kingdom.svg');
    background-repeat: no-repeat;
    background-position: center;
     background-size: contain;
    width:2em;
    height:1em;
}
#eng_lang{
    background-image: url('svg/united-states.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width:2em;
    height:1em;
}
#ger_lang{
    background-image: url('svg/germany.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width:2em;
    height:1em;
}
#hun_lang{
    background-image: url('svg/hungary.svg');
    background-repeat: no-repeat;
    background-position: center;
     background-size: contain;
    width:2em;
    height:1em;
}
#esp_lang{
    background-image: url('svg/spain.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width:2em;
    height:1em;
}
#fr_lang{
    background-image: url('svg/french.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width:2em;
    height:1em;
}

#ru_lang{
    background-image: url('svg/russia.svg');
    background-repeat: no-repeat;
    background-position: center;
     background-size: contain;
    width:2em;
    height:1em;
    
}

#fil_lang{
    background-image: url('svg/philippines.svg');
    background-repeat: no-repeat;
    background-position: center;
    width:2em;
    height:1em;
}
#flags{
 width:12em;
 display: flex;
 flex-wrap: nowrap;
 flex-direction: row;
 align-content: center;
 align-items: center;
 text-align: center;
 margin:auto;
 margin-bottom:0.3em;
 background-color: rgba(255, 255, 255, 0.2);
 flex-basis: 2em 1em;
}
#reel{
    width:100%;
    height:50vh;
    padding: auto;
    display: flex;
    margin:auto;
    align-content: center;
}
#lightning{
    width:95%;
    height:calc(100% - 3px);
    padding: 0px;
    margin:auto;
    font-family: firamonoregular;
    background-color: rgba(255,255,255,1);
    border-style: solid;
    border-color: black;
    border-width: 0px 0px 4px 0px;
    opacity: 1;
    z-index: 95;
}

#crib{
    width: 99vw;
    min-height: 100vh;
    margin:auto;
    text-align: center;
    padding-top:2em;
    padding-bottom:1em;
    padding-left: 0.1em;
    padding-right: 0.1em;
    border-style: double;
    border-radius: 0px;
    border-color: black;
    border-width: 4px;;
    position: fixed;
    top:0px;
    left:0px;
    z-index: 100;
    transition: all 0.3s ease-in-out;
    background-color: rgba(255,255,255,0.7);
    box-sizing: border-box;
   
}

#crib_alt{
    width: 80%;
    min-height: 11vh;
    margin:auto;
    text-align: center;
    padding-top:2em;
    padding-bottom:1em;
    padding-left: 0.1em;
    padding-right: 0.1em;
    border-style: double;
    border-radius: 0px;
    border-color: black;
    border-width: 4px;;
    transition: all 0.3s ease-in-out;
    background-color: rgba(255,255,255,0.1);
    box-sizing: border-box;
   
}

.button2{
    text-decoration-style: none;
    padding-left: 10px;
    padding-right: 10px;
    
    background:none;
    background-color: #49ACC2;
    border-style: solid;
    border-radius: 0px;
    border-color: white;
    box-shadow: 5px 10px 50px white inset;


}

.button1{
    text-decoration-style: none;
    padding-left: 20px;
    padding-right: 20px;
    
    background:none;
    background-color: #CB7792;
    border-style: solid;
    border-radius: 0px;
    border-color: white;
    box-shadow: 5px 10px 50px white inset;


}

#tools{
    width:75%;
    height:5vw;
    display: flex;
    margin:auto;
    background-color: rgba(255, 255, 255, 0);
    
}
.buttons{
    width:10vw;
    height:4vw;
    text-decoration-style: none;   
    background-color: white;
    border-style: double;
    border-bottom-left-radius: 20%;
    border-bottom-right-radius: 20%;
    border-color: rgb(15, 14, 14);
    border-width: 0px 4px 4px 4px;
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: bottom;
    opacity: 0.9;
    transition: all 0.3s ease-in-out;
}


.singleButtons{
    width:10vw;
    height:8vw;
    color:#1cbce0;
    text-decoration-style: none;   
    background-color: white;
    border-style: double;
    border-bottom-left-radius: 10%;
    border-bottom-right-radius: 10%;
    border-color: rgb(15, 14, 14);
    border-width: 0px 4px 4px 4px;
    border-top: 0px double black;
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: bottom;
    opacity: 0.9;
    transition: all 0.3s ease-in-out;
    font-size: x-large;
    font-family: teszt3;
}

.cancelButtons{
    width:4vw;
    height:4vw;
    text-decoration-style: none;   
    background-color: white;
    border:none;
    border-style: double;
    border-color: rgb(15, 14, 14);
    border-bottom-left-radius: 10%;
    border-bottom-right-radius: 10%;
    border-width: 0px 4px 4px 4px;
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.9;
    transition: all 0.3s ease-in-out;
    position:absolute;
    top:0px;
    right:0px;
    background-image: url('svg/cancel.svg');
}
.hiddenButtons{
    width:4vw;
    height:4vw;
    text-decoration-style: none;   
    background-color: black;
    border:none;
    border-style: double;
    border-color: rgb(15, 14, 14);
    border-bottom-left-radius: 10%;
    border-bottom-right-radius: 10%;
    border-width: 0px 4px 4px 4px;
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.9;
    transition: all 0.3s ease-in-out;
    position:absolute;
    top:0px;
    right:0px;
    background-image: url('svg/cancel.svg');
}
.reversebuttons{
    width:5vw;
    height:4vw;
    text-decoration-style: none;   
    background-color: white;
    border-style: double;
    border-top-left-radius: 20%;
    border-top-right-radius: 20%;
    border-color: rgb(15, 14, 14);
    border-width: 4px;
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: bottom;
    opacity: 0.9;
    transition: all 0.3s ease-in-out;
}


.sidebuttons{
    width:5%;
    height:100%;
    text-decoration-style: none;   
    background-color: #1cbce0;
    border-style: solid;
    border-color: black;
    border-width: 4px 0px 4px 0px;
    font-family: teszt2;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.3s ease-out;
    text-align: end;
    font-size: xx-large;
    opacity: 0.4;
    display:none;
}

#searchTextarea{
    width:15vw;
    height:3vw;
    text-decoration-style: none;   
    background:none;
    resize: none;
    border:none;
    float: right;
    text-align: center;
    outline: none;
}
#searchFor{
    width:20vw;
    height:4vw;
    padding: 0.5vw;
    text-decoration-style: none;   
    background-color: white;
    border-style: double;
    border-bottom-left-radius: 40%;
    border-bottom-right-radius: 20%;
    border-color: rgb(15, 14, 14);
    border-width: 0px 4px 4px 4px;
    display: flex 0 1;
    text-align: center;
    display:none;
}

#buttonReverseSide{
    border-top-right-radius: 20px;
   
    transform: scaleX(-1);
    background-image: url('svg/chevron-triple-right.svg');
    background-repeat: space;
}

#buttonForwardSide{
    border-top-right-radius: 20px;
   
    background-image: url('svg/chevron-triple-right.svg');
    background-repeat: round;

}
#buttonKa{
}


#buttonShowCrb{
    width: fit-content;
    background-color:#1cbce0;;
    color:black;
    font-family: title;
    font-size: x-large;
    border:none;
    margin:auto;
}

#buttonShowCrb:hover{
    text-decoration: underline;
    background-color:#7fff94;
  
}
#buttonSu{
    width:10vw;
    background-image: url('svg/chevron-triple-right.svg');
    margin-right:1em;
 }

 #buttonSd{
    width:10vw;
    transform: scaleX(-1);
    background-image: url('svg/chevron-triple-right.svg');
 }

 #buttonShowTemp{
    background-image: url('svg/text-insert.svg');
 }

 #buttonInsert{
    background-image: url('svg/clipboard-paste.svg');
  
 }
 #buttonTextSize{
    background-image: url('svg/text-size.svg');
 }

 #buttonCleanScreen{
    background-image: url('svg/television-clean.svg');
 }

 #buttonFixedWordWidth{
    background-image: url('svg/text-width.svg');
 }

 #buttonLoadSaved{ 
    background-image: url('svg/folder-open.svg');
 }
 #buttonBossMode{ 
    background-image: url('svg/user-boss-male.svg');
    background-color: none;
 }

 #buttonSave{
    background-image: url('svg/bookmark.svg');
    margin:auto;
 }

 #buttonDelete{
    background-image: url('svg/document-blank.svg');
 }

 #buttonDeleteAll{
    background-image: url('svg/x-circle-close-delete.svg');
 }

 #buttonApplyCode{
    background-image: url('svg/source-commit-end-local.svg');
 }

 #buttonApplyCodeOnline{
    background-image: url('svg/source-commit-end-local.svg');
    color:rgba(0,0,0,0);
}

 #buttonResoruces{
    background-image: url('svg/info-large.svg');
 }

 #buttonBrownNoise{
    background-image: url('svg/edit-noise.svg');
 }

.playable{
    background-image: url('svg/arrow-right-drop-circle.svg');
}

.pausable{
    background-image: url('svg/timer-sand.svg');
}

#buttonForward{
    background-image: url('svg/skip-forward.svg');
}
#buttonForForward{
    width:10vw;
    height:5vw;
    background-image: url('svg/chevron-triple-right.svg');
    background-repeat: repeat-x;  
    display: none;
}

#buttonReverse{
    background-image: url('svg/skip-forward.svg');
    transform: scaleX(-1);
    background-size: 70%;
}

#buttonReReverse{
    width:10vw;
    height:5vw;
    background-image: url('svg/chevron-triple-right.svg');
    transform: scaleX(-1);
    background-repeat: repeat-x;
    display: none;
}

#buttonSettings{
    background-image: url('svg/robot.svg');
    display: none;  
}
#buttonDarkmode{
    background-image: url('svg/dark-mode.svg');
}

#buttonSaveLocal{
    background-image: url('svg/desktop-computer.svg');
}

#buttonSaveOnline{
    background-image: url('svg/cloud-upload.svg');
    color:rgba(0,0,0,0);
    border-top-style: solid;
    border-top-color: black;
    border-top-width: 4px;
}

#buttonKeres{
    width:4vw;
    height:4vw;
    text-decoration-style: none;   
    background-color: #216c7c;
    border-style: solid;
    border-radius: 100px;
    border-color: white;
    background-size: 50%;
}
.buttons:hover{
    opacity: 1;
    height:7.5vw;
    background-color: chartreuse;
}

.buttons:active{
    opacity: 1;
    height:9.5vw;
    background-color: yellow;
}

.singleButtons:hover{
    opacity: 1;
    background-color: chartreuse;
}

.reversebuttons:hover{
    opacity: 1;
    height:5.5vw;
    background-color: chartreuse;
}

.sidebuttons:hover{
    opacity: 1;
    background-color: chartreuse;
}

.cancelButtons:hover{
    opacity: 1;
    background-color: chartreuse;
}
#buttonKa:hover{
    background-color: #e5f31c;
}

#buttonKeres:hover{
    background-color: #e5f31c;
}



.active{
    height:6vw;
    background-color: rgb(161,0,16);
}

.inactive{
    background-color: none;
}

.disabled{
    height:3vw;
    background-color: gray;
}
.disabled:hover{
    height:4vw;
    background-color: gray;
}

#exampler{
    width:95%;
    min-height: 50vh;
    resize:none;
    background-color: none;
    opacity: 0.95;
    border-width:4px 1px 1px 1px;
    border-style: solid;
    border-color:black;
}

#exampler_alt{
    width:95%;
    min-height: 10vh;
    resize:none;
    background-color: none;
    opacity: 0.95;
    border-width:4px 1px 1px 1px;
    border-style: solid;
    border-color:black;
    margin:auto;
}
#stats{
    width:15vw;
    min-height: 10px;
    padding: 0.3em;
    resize:none;
    text-decoration-style: none;
    text-align: center;
    vertical-align: middle;
    align-content: center;
    color:black;
    background-color: none;
    font-family: readexproregular;
    font-size: x-large;
    border-bottom-left-radius: 2%;
    border-bottom-right-radius: 2%;
    border-style: double;
    border-width: 0px 4px 4px 4px;
    user-select:none;
}

#popUpForm{
    width:50%;
    min-height:50%;
    border-style:double;
    border-width: 4px;
    border-color: black;
    margin:auto;
    z-index:102;
    background-color: white;
    opacity: 0.9;
    font-family: teszt2;
    color:black;
    text-align: center;
}

#popUpMessage{
    width:50%;
    min-height:50%;
    border-style:double;
    border-width: 4px;
    border-color: black;
    margin:auto;
    z-index:102;
    background-color: white;
    opacity: 0.9;;
    text-align: center;
    font-family: teszt2;
    font-size: x-large;
    color:black;
}

.fixedOut{
    position:fixed;
    bottom:160%;
    left:25%;
    transition: all 0.3s ease-out;
    opacity:0;
}

.fixedIn{
    position:absolute;
    top:5%;
    left:25%;
    transition: all 0.3s ease-out;
    opacity:1;
}

#codeInput{
    text-decoration: none;
    margin:auto;
    width:80%;
    height:60%;
    font-size: xx-large;
    font-family: teszt2;
    border:none;
    outline:none;
    border-color: black;
    border-style: solid;
    border-width: 0px 0px 4px 0px;
}

#codeInputOnline{
    text-decoration: none;
    margin:auto;
    width:80%;
    height:60%;
    font-size: xx-large;
    font-family: teszt2;
    border:none;
    outline:none;
    border-color: black;
    border-style: solid;
    border-width: 0px 0px 4px 0px;
}

#codeOutPut{
    text-decoration: none;
    margin:auto;
    width:80%;
    height:60%;
    font-size: xx-large;
    font-family: teszt2;
    border:none;
    outline:none;
    border-color: black;
    border-style: solid;
    border-width: 0px 0px 4px 0px;
    
}
#infoBar{
    width:90%;
    text-align: center;
    font-family: readexproregular;
    font-size: x-large;
    color:black;
    margin:auto;
    transition: all 0.3s ease-in-out;
}

#infoBar2{
    width:60%;
    text-align: center;
    font-family: readexproregular;
    font-size: x-large;
    color:black;
    margin:auto;
    transition: all 0.3s ease-in-out;
}

#resourceBar{
    width:50%;
    text-align: center;
    font-family: readexproregular;
    font-size: x-large;
    color:black;
    margin:auto;
    transition: all 0.3s ease-in-out;
}

#langueBar{
    width:60%;
    text-align: center;
    font-family: teszt2;
    font-size: medium;
    color:black;
    margin:auto;
    transition: all 0.3s ease-in-out;
    user-select: none;;
}

#title{
    width:30%;
    text-align:center;
    vertical-align: baseline;
    font-family: title;
    font-size: x-large;
    margin-left:6em;
    color:black;
    margin-top:1%;
    user-select: none;
    transition: all 0.3s ease-in-out;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    float:left;
   
   }
   #descriptionBox{
    width:40%;
    text-align:center;
    vertical-align: baseline;
    font-family: readexproregular;
    font-size: x-large;
    color:black;
    margin-top:5%;
    user-select: none;
    transition: all 0.3s ease-in-out;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    float:left;
   
   }
   
#titleImg{
    width: 100%;
}
.just{
    user-select: none;
    color:lightseagreen;
}
.just:hover{
  
   text-decoration: underline;
    transition: all 0.3s ease-in-out;
}

.just:active{
    font-size: x-large;
    transition: all 0.3s ease-in-out;
}

.hidden{
    opacity: 0;
    visibility: hidden;
}
.showed{
    opacity: 1;
    visibility: visible;
}

#whatsDis{
    padding-left:1em;
    font-family: teszt2;
    font-size: small;
    color:black;
    text-align: center;
    margin:auto;
    transition: all 0.3s ease-in-out;
    user-select: none;;
}

#pleaseUseLandscape {
    width:100%;
    height:100%;
    position:fixed;
    top:0px;
    left:0px;
    font-family: teszt2;
    font-size: xx-large;
    color:black;
    text-align: center;
    background-color: white;
    background-image: url('svg/phone-rotate-landscape.svg');
    background-size: 50%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1000;
    display:none;
   }












  hr{
    width:80%;
    height:60%;
    font-size: xx-large;
    font-family: teszt2;
    border:none;
    outline:none;
    border-color: black;
    border-style: solid;
    border-width: 0px 0px 4px 0px;
  }

  #savedName{
    font-size: xx-large;
    font-family: teszt2;
    color:black;
    margin:auto;
    text-align: center;
  }

  .mini{
    user-select: none;
    color:black;
    font-size: small;
    float: right;
}

#responsibility{
    margin:auto;
    text-align: center;
    color:black;
}


#linksOfSources{
    margin:auto;
    text-align: center;
    color:black;
}

#adBar{
    width:90%;
    min-height:5em;
    background-color: antiquewhite;
    margin:auto;
  
}

#donateBox{
    margin:auto;
    margin-top:2em;
    width:auto;
    text-align: center;
}


#InformationBox{
    color:black;
    align-items: center;
    text-align: center;
    font-family: readexproregular;
    font-size: large;
    padding: 1em;
    width:95%;
}
.lefties{
    text-align: left;
    align-items: left;
    padding-left:25%;
    padding-right:10%;
    font-family: teszt3;
    margin-top:1em;
}

.underlinestrong{
    text-decoration: underline;
    font-weight: bold;
}

.underlinestrongcolored{
    text-decoration: underline;
    font-weight: bold;
    color:#1cbce0;
}

h2{
    background-color: #1cbce0;
    color:black;
    text-align: center;
    font-family: readexproregular;
    padding-left:15%;
    padding-right:15%;
    padding-top:0.5em;
    padding-bottom:0.5em;
    margin-bottom:0px;
    font-size: x-large;
    
}

h3{
    background-color: brown;
    color:white;
    text-align: center;
    font-family: readexproregular;
    padding-left:20%;
    padding-right:20%;
    margin-bottom:0px;
    padding-top:0.5em;
    padding-bottom:0.5em;
}

h4{
    background-color: white;
    color:black;
    text-align: center;
    margin:none;
    padding:none;
    font-family: readexproregular;
    padding-left:15%;
    padding-right:15%;
    margin-left:15%;
    margin-right:15%;
    border-left:2px solid brown;
    border-right:2px solid #1cbce0;
  
    font-size: large;
}
#regularStyle{
    background-image: url('https://gyorsolvasok.hu/hagyomanyos.jpg');
    background-size: 20%;
    background-position-x: left;
    background-repeat: no-repeat;
    
}


#monitorStyle{
    background-image: url('https://gyorsolvasok.hu/gyors.jpg');
    background-size: 20%;
    background-position-x: left;
    background-repeat: no-repeat;
}

#illusztracioKep{
    width:90%;
}

#summarizerCell{
    color:#1cbce0;
    margin:auto;
    font-family: teszt3;
    margin-top:1em;
    display: none;
}

thead{
    color:brown;

}

#sAndlBox{
    margin:auto;
    widtH:60%;
    text-align: center;
}

#savedLocalCodes{
    color:#1cbce0;
}

#bossModeBox{
    width:99vw;
    height:99vh;
    background-color:black;
    position: fixed;
    top:0px;
    left:0px;
    z-index: 99;
    display: none;
}
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
@media only screen and (orientation: portrait) {
    #pleaseUseLandscape {
     display: none;
    }
  
    #tools{
        width:95%;
        height:30vw;
        display: flex;
        flex-wrap: wrap;
        margin:auto;
        align-content: space-evenly;
        background-color: rgba(255, 255, 255, 0);
    }

    .buttons{
        width:20vw;
        height:10vw;
        text-decoration-style: none;   
        background-color: white;
        border-style: double;
        border-bottom-left-radius: 20%;
        border-bottom-right-radius: 20%;
        border-color: rgb(15, 14, 14);
        border-width: 0px 4px 4px 4px;
        border-top: 4px solid black;
        background-size: 50%;
        background-repeat: no-repeat;
        background-position: bottom;
        opacity: 0.9;
        transition: all 0.3s ease-in-out;
        margin:auto;
        box-sizing: border-box;
    }
    #title{
        width:90%;
        text-align:center;
        vertical-align: baseline;
        font-family: title;
        font-size: x-large;
        margin:auto;
        color:black;
        margin-top:1%;
      
        user-select: none;
        transition: all 0.3s ease-in-out;
       }

       #descriptionBox{
        width:100%;
        text-align:center;
        vertical-align: baseline;
        font-family: readexproregular;
        font-size: x-large;
        color:black;
        margin-top:5%;
        user-select: none;
        transition: all 0.3s ease-in-out;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        float:left;
       
       }
       #adBar{
        width:100%;
        min-height:5em;
        background-color: rgba(255, 145, 0,0);
        margin:auto;
    }

    .buttons:hover{
        opacity: 1;
        height:10vw;
        background-color: chartreuse;
    }
    
    .buttons:active{
        opacity: 1;
        background-color: yellow;
    }

    .active{
        background-color: #1dd5ff;
    }
    
    .inactive{
        background-color: none;
    }
    
    .disabled{
        background-color: gray;
    }
    .disabled:hover{
      
        background-color: gray;
    }
    #donateBox{
        margin:auto;
        margin-top:2em;
        width:auto;
    }

    #buttonInsert{
        display: none;
    }
    #buttonDelete{
        width:10vw;
        height:10vw;
    }
    #buttonHideCrib{
        width:10vw;
        height:10vw;
    }

    #InformationBox{
        color:black;
        align-items: left;
        text-align: left;
        font-family: readexproregular;
        font-size: large;
        color:black;
        align-items: left;
        width: auto;
    }

    #reguralStyle{
        background-image: url('https://gyorsolvasok.hu/hagyomanyos.jpg');
        background-size: 20%;
        background-position-x: left;
        background-repeat: no-repeat;
    }

    .lefties{
        text-align: left;
        align-items: left;
        padding-left:25%;
        padding-right:5%;
    }
    h2{
        background-color: #1cbce0;
        text-align: center;
        font-size: large;
    }

    #illusztracioKep{
        width:95%;
    }

    #buttonBossMode{ 
       width:10vw;
       height:10vh;

     }

     #sAndlBox{
        margin:auto;
        widtH:95%;
        text-align: center;
    }

    h4{
        background-color: white;
        color:black;
        text-align: center;
        margin:none;
        padding:none;
        font-family: readexproregular;
        padding-left:5%;
        padding-right:5%;
        margin-left:5%;
        margin-right:5%;
        border-left:1vw solid brown;
        border-right:1vw solid #1cbce0;
      
        font-size: large;
    }
}


#adSpace{
    width:80%;
    display: block;
    align-items: center;
    clear: both;
    margin:auto;
}