html {
    scroll-behavior: smooth;
}
h1{
    font-size: 140%;
}
h2{
    font-size: 130%;
    font-weight: 100;
}
#balfentlogo{
    margin-top: 8%;
    margin: 5%  ;
    width: 80%;
    height: auto;
}
header{
    width: 100%;
    display: grid;
    grid-template-columns:  6% 34% 60%;
    background-color: #D6EFD8;
    color: #1A5319;
    font-weight: 1000;
    text-align: left;
    position: fixed;
    top: 0;
    padding: 0;
    z-index: 1000;
    border-bottom-style: solid ;
    border-bottom-color: #1A5319;
    border-bottom-width: 100%;

}
#cim{
    font-size: 200%;
}
nav{
    font-size:90%;
    margin-top: 3%;
    padding-top: 1%;
    width: 100%;
    text-align: left;
    border-radius: 10px;
}
nav a{
    font-size: 180%;
    text-decoration: none;
    padding: 1% 2% 1% 2%;
}
nav a:hover{
    background-color: #1A5319;
}
#visszagomb{
    position: fixed;
    top: 15%;
    right: 5%;
    background-color: #1A5319;
    color: #D6EFD8;
    font-size: 200%;
    z-index: 1002;
    padding: 1%;
    border-radius: 10px;
    text-decoration: none;
}
body{
    background-color: #D6EFD8;
    color: #1A5319;
}
#visszagomb:hover{
    background-color: #1A5319;
}
iframe{
    width: 98%;
    height: 75%;
    border-width:  0;
}
.osztas{
    font-size: 200%;
    display: block;
    block-size: 80% auto;
    padding: 12% auto 5% auto;
    margin: auto 20% auto 20%;
}
.lufi{
    
    border-top-style: solid ;
    border-top-color: #1A5319;
    border-top-width: 100%;
    background-color: #D6EFD8;
    color: #1A5319;
    margin: auto;
    margin-top: 5%;
    margin-bottom: 5%;
    border-radius: 10px;
}
a{
    color: #1A5319;
}
a:hover{
    color: #D6EFD8;
}
#nyitvatartas{
    margin-top: 12%;
    scroll-margin-top: 35vh;
    padding: 2% 30% 0 30%;
}
th{
    padding: 5px;
}
#kapcsolat{
    scroll-margin-top: 20vh;
    display: grid;
    grid-template-columns: 40% 60%;
    grid-template-rows: 20% 60%;
    font-size: 80%;
    font-weight: 100;
    margin-top: 8%;
    margin-bottom: 10%;
}
#k1{

    grid-column: 1 / 3;
    text-align: center;
}
#k2{
    padding: 0 2% 0 2%;
    text-align: center;
}
#k3{
    text-align: center;
}
#Fb{
    font-weight: 600;
    text-decoration: none;
    padding: 10px 100px 10px 100px;
    transition: transform 0.5s ease;
}
#Fb:hover{
    background-color: blue;
    border-radius: 20px;
}
#terkep{
    width: 300px;
    height: auto;
    transition: transform 0.3s ease;
}
#terkep:hover{
    transform: scale(3);
}
#email{
    padding: 3px 5px 3px 5px;
    text-decoration: none;
    font-weight: 500;
}
#email:hover{
    background-color: white;
    color: red;
    border-radius: 20px;
}
#robot{
    scroll-margin-top: 15vh;
    text-align: center;
    font-size: 80%;
    font-weight: 100;
    margin-bottom: 5%;

}
#video{
    width: 80%;
    height: auto;
    padding: 0px;
    border-radius: 10px;
}
#webshop{
    scroll-margin-top: 15vh;
    margin-top: 10%;
    margin-bottom: 10%;
    padding-bottom: 20px;
    font-size: 80%;
    font-weight: 100;
    text-align: center;

}
#ws2{
    display: grid;
    grid-template-columns: 50% 50%;
}
#webshop img{
    width: 60%;
    height: auto;
    padding: 3%;
}
#webshop img:hover{
    background-color: #1A5319;
    border-radius: 10px;
}

#bolt{
    padding: 10px;
    font-weight: 600;
    text-decoration: none;
}
#bolt:hover{
    background-color: #1A5319;
    border-radius: 10px;
}
#akcio{
    display: block;
    text-align: center;
    scroll-margin-top: 20vh;
    margin-top: 20px;
    grid-column: 2 / 4;
    padding-bottom: 20px;
}
#akcio img{
    width: 20%;
    height: auto;
}
#akcio img:hover{
    transform: scale(2);
}
#header2{
    width: 100%;
    display: grid;
    grid-template-columns:  6% 88% 6%;
    background-color: #1A5319;
    color: #D6EFD8;
    font-weight: 1000;
    text-align: center;
    padding: 0;
    z-index: 1000;
}
@media (max-width: 768px) {
    header {
        grid-template-columns: 20% 80%;
    }
    nav a {
        font-size: 120%;
    }
    #balfentlogo {
        width: 60%;
    }
    h1, h2 {
        font-size: 120%;
    }
    iframe, .osztas {
        width: 100%;
    }
    #video {
        width: 100%;
    }
    #terkep {
        width: 100%;
    }
    #webshop img {
        width: 80%;
    }
}
/*<?php foreach ($nyitvatartas as $nap => $ido): ?>
                    <tr>
                        <td><?php echo $nap; ?></td>
                        <td><?php echo $ido["Nyitás"]; ?></td>
                        <td><?php echo $ido["Zárás"]; ?></td>
                    </tr>
                <?php endforeach; ?>
<?php
    session_start();

    $nyitvatartas = array(
        "Hétfő" => array("Nyitás" => "08:00", "Zárás" => "20:00"),
        "Kedd" => array("Nyitás" => "08:00", "Zárás" => "20:00"),
        "Szerda" => array("Nyitás" => "08:00", "Zárás" => "20:00"),
        "Csütörtök" => array("Nyitás" => "08:00", "Zárás" => "20:00"),
        "Péntek" => array("Nyitás" => "08:00", "Zárás" => "20:00"),
        "Szombat" => array("Nyitás" => "08:00", "Zárás" => "20:00"),
        "Vasárnap" => array("Nyitás" => "10:00", "Zárás" => "18:00")
    );
?>
                */