@charset "utf-8";
body{font-family:'Titillium Web',sans-serif;font-size:18x;margin:0;padding:0;text-align:center;background-color:#F5F5F5;color:#333333;width:96%;margin-left:auto;margin-right:auto;max-width:1200px;}
 
a:link, a:visited{color:black;}
a:hover,a:active{position: relative;top:1px;left:1px;}  

h1{font-size:24px;color:lightgray;text-transform:uppercase;}
h2,h3{font-size:22px;color:lightgray;text-transform:uppercase;}
.image-container {display:none;}

.kis{font-size:14px;}

/* Szárítás navigáció asztali */    
#top-navi {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    margin-bottom: 25px;    
}

#bot-navi {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    margin-bottom: 30px;
}

.row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    text-align: center;
}

.column {
    padding: 10px;
    margin: 5px;
    background-color: gray;
    color: white;
    box-sizing: border-box;
}

.navi-feher:link, .navi-feher:visited {
    color: white;
    text-decoration: none;
    text-transform: uppercase;
}

img {max-width: 100%;height: auto;}
.nagy-kep {text-align: center;}
.kiskep{margin-left:auto;margin-right:auto;border-collapse:separate;max-width:200px;text-align:center;border-radius:10px;padding-left:5px;padding-right:5px;padding-bottom:5px;cursor: pointer;}	
.kiskep:hover,kiskep:active{position: relative;top:1px;left:1px;}    
.telefon, .telefon:link, .telefon:visited{font-size:24px;text-decoration:none;color:#2C3D73;}
.szin-uvzold{color: chartreuse}    
    
*,
::before, ::after {box-sizing: border-box;}
    
li {  text-align:left;width:800px;max-width:94%;margin-left:auto;margin-right:auto;}

details {margin: 1rem auto;padding: 0 1rem;width: 35em;max-width: calc(100% - 2rem);position: relative;border: 1px solid #78909C;border-radius: 6px;
  background-color: white;color: black;transition: background-color .15s;text-align:left; 
  
  > :last-child {
    margin-bottom: 1rem;
  }
  
  &::before {width: 100%;height: 100%;content: '';position: absolute;top: 0;left: 0;border-radius: inherit;opacity: .15;box-shadow: 0 .25em .5em #263238;pointer-events: none;transition: opacity .2s;z-index: -1;}
  
  &[open] {
    background-color: #FFF;
    &::before {opacity: .6;}
  }
}

summary {padding: 1rem 2em 1rem 0;display: block;position: relative;font-size: 18px;font-weight: bold;cursor: pointer;text-align: left;letter-spacing: -0.3px;text-transform:uppercase;   
  
  &::before,
  &::after {
    width: .75em;height: 2px;position: absolute;top: 50%;right: 0;content: '';background-color: currentColor;text-align: right;    transform: translateY(-50%);transition: transform .2s ease-in-out;
  }
  
  &::after {transform: translateY(-50%) rotate(90deg);
    
    [open] & {
      transform: translateY(-50%) rotate(180deg);
    }
  }
  
  &::-webkit-details-marker {
    display: none;
  }
}

p {margin: 0 0 1em;line-height: 1.5;text-align: justify;}
ul {margin: 0 0 1em;padding: 0 0 0 1em;}
li:not(:last-child) {margin-bottom: 0.5em;}

code {padding: 0.2em;border-radius: 3px;background-color: #E0E0E0;  
  pre > & {display: block;padding: 1em;margin: 0;text-align: center;  }
}
p code {letter-spacing:-0.2px;word-spacing:-2px;font-size:16px;font-weight: bold;}            
summary code {letter-spacing:-1px;word-spacing:-5px;font-size:18px;}            

/* Kapcsolat adatlap */        
        .form-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 500px;
            margin: auto; /* Középre igazítás */
        }
        .form-container h2 {
            margin-bottom: 20px;
        }
        .form-container label {
            display: block;
            margin-bottom: 5px;
        }
        .form-container input,
        .form-container textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .form-container button {
            padding: 10px 20px;
            background-color: #333;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .form-container button:hover {
            background-color: #555;
        }
        .form-container .result {
            margin-top: 10px;
            font-weight: bold;
            display: none;
        }
        .info {
            font-size: 0.9rem;
            color: #555;
            margin-bottom: 10px;
        }

/* Szárítás aloldal táblázat  */    
.szaritas-tablazat{margin-left:auto;margin-right:auto;border-spacing:3px;border-collapse:separate;}
.szaritas-tablazat th, td{padding:10px;vertical-align:top;text-align:left;}

/* Forgó karakter  */   
.forgo-karakter {display: inline-block;margin: -5px 0 0;font-size: 20px;animation: forgas 2s linear infinite;}
@keyframes forgas {from {transform: rotate(0deg);} to {transform: rotate(360deg);}}

@media (min-width: 801px) {
.image-container.large {display:block;}
}
    
@media (max-width: 800px) {
body {font-size:24x;letter-spacing:-0.3px;}
hr {margin-bottom: -5px;}
.image-container.small {display:block;padding-top:10px;}    
#top-navi{display:none;}    
.kiskep {max-width: 30%;}
summary code {letter-spacing:-1px;word-spacing:-5px;font-size:16px;}  
.szaritas-tablazat{font-size:12px;}    

/* Szárítás navigáció mobil */    
/* 
#top-navi{display:flex;align-items:center;justify-content:center;margin-top:15px;}    
#top-navi .column {padding:8px;margin:5px;background-color:#2C3D73;flex-grow:0;flex-basis:0;}
#top-navi .row {display:flex;justify-content: center;flex-wrap:wrap;}
#top-navi .row:after {content: "";display:table;clear:both;}    
#bot-navi .column {padding:8px;background-color:gray;flex: 0 0 40%;box-sizing:border-box;margin-right:5px;margin-bottom:5px;}            
*/        
#bot-navi {width:100%;display:flex;align-items:center;justify-content:center;margin-top:30px; margin-left: 0; margin-right: 0; margin-bottom:30px;padding:0;} 
#bot-navi .column { padding: 8px; background-color: gray; flex: 0 1 auto; box-sizing: border-box; margin-right: 5px; margin-bottom: 5px; padding-left: 20px;padding-right: 20px;} 
#bot-navi .row { display: flex; flex-direction: column; justify-content: center; flex-wrap: nowrap; margin: 0; padding: 0; text-align: center; } 
#bot-navi .row:after { content: ""; display: table; }

    
}
@media (prefers-color-scheme: dark) {
    body {background-color: #222;color: lightgray;/* #023d93; */}
    a:link, a:visited  {color:white;}
    h1,h3,.telefon,.telefon:link, .telefon:visited {color: lightgray;}
    h2{color: gray;}    
    details{ background-color:lightgray;&[open] {background-color: lightgray;}}    
    hr.atmenetes {width:90%;border:0;height:1px;background: #333;background-image: linear-gradient(to right, black, white, black);}       
}
@media (prefers-color-scheme: light) {
    body {background-color: #F5F5F5;}      
    hr.atmenetes {width:90%;border:0;height:1px;background: #333;background-image: linear-gradient(to right, white, black, white);}   
}
@font-face {
    font-family: Titillium Web;
    src: url("TitilliumWeb-SemiBold.ttf");
	font-weight: 400;
 	font-display: swap;	
}
@font-face {
    font-family: Titillium Web;
    src: url("TitilliumWeb-Bold.ttf");
	font-weight: 700;
 	font-display: swap;	
}