@font-face {
  font-family: "Grandstander";
  src: url("font/Grandstander-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Grandstander";
  src: url("font/Grandstander-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
::selection{background:#FFD100;color:black;}
*{box-sizing: border-box;}
body{font-family:"Grandstander";margin:0;background:#111;}

#logo{position:fixed;top:2rem;left:2rem;width:15rem;transition: all 0.5s;cursor:pointer;}
#logo:hover{transform:scale(0.97);}

#hero-bride{background:#0075FF;border-radius: 25px;display:flex;justify-content: center;align-items: center;margin:1rem;min-height:calc(100dvh - 2rem);width:calc(100% - 2rem);flex-flow:column nowrap;gap:2rem;text-align: center;padding:1rem;}
#bride{height:60vh;cursor:pointer;max-width:70vw;}
#hero-bride h1{font-size:3rem;margin:0;text-transform:uppercase;}


#hero-history{background:#0075FF;border-radius: 25px;display:flex;justify-content: flex-end;align-items: center;margin:1rem;min-height:calc(100dvh - 2rem);width:calc(100% - 2rem);flex-flow:row nowrap;gap:2rem;text-align: center;}
#hero-history div{width:50%;padding:2rem;color:white;font-size:1.3rem;}
#hero-history div p{display:inline;background:#111;line-height:0.5em;}
#hero-history div h1 span{background:black;font-size:4rem;display:inline;}


#hero-oktoberfest{background:#FFD100;border-radius: 25px;display:flex;justify-content: center;align-items: center;margin:1rem;min-height:calc(100dvh - 2rem);width:calc(100% - 2rem);flex-flow:column nowrap;gap:2rem;text-align: center;text-transform:uppercase;}
#hero-oktoberfest h1,h2,h3,p,hr{margin:0;}
#hero-oktoberfest h1{font-size:3em;}
#hero-oktoberfest h2{font-size:2em;}
#hero-oktoberfest p{font-size:1.5em;font-weight:bold;}
#hero-oktoberfest hr{width:4rem;height:0.4rem;background:black;display:block;margin:1em;border:0;}
#hero-oktoberfest img{width:6rem;}

#reservation{background:black;color:white;border-radius: 25px;display:flex;justify-content: center;align-items: center;margin:1rem;min-height:calc(100dvh - 2rem);width:calc(100% - 2rem);flex-flow:row wrap;gap:2rem;text-align: center;text-transform:uppercase;padding:2rem;}
#reservation h2{font-size:3em;text-transform:uppercase;}
#reservation div{display:flex;align-items: center;flex-flow:column nowrap;max-width:100%;}

        label{display:block;margin-top:.8rem}
        input[type=text]{width:500px;padding:.6rem;border:1px solid #ddd;border-radius:6px;margin-top:.8rem;font-family:'Grandstander';font-size:1.5rem;text-transform:uppercase;padding-bottom:.3rem;max-width:100%;}
        .actions{margin-top:1rem}
        .msg{margin-top:1rem;padding:.6rem;border-radius:6px;color:black;max-width:100%;width:500px;}
        .success{background:#e6ffed;border:1px solid #b7f0c9}
        .error{background:#fff0f0;border:1px solid #f0b7b7}
        button{font-family:'Grandstander';font-size:2rem;background:#FFD100;border-radius:15px;border:0;cursor:pointer;text-transform:uppercase;padding:1rem;font-weight:bold;transition:transform 0.2s;padding-bottom:0.6rem;margin-top:0.5rem;}
        button:hover{transform:scale(0.95);}
        .day-row{width:100%;margin:.5rem 0;}
        .date-title input{width:25px;}
        .date-title{font-size:1.5rem;margin:0;margin:0;display:flex;justify-content:space-between;gap:1rem;}
        .time-guest{width:100%;flex-flow:row nowrap!important;align-items:center;justify-content: center;font-size:1.5rem;gap:1rem;padding:0;margin:.5rem;}
        .time-guest select{font-family:'Grandstander';font-size:1.5rem;margin-left:.5rem;}
        select option{font-family:'Grandstander';}
        .time-guest label{margin:0;padding:0;display:flex;justify-content: center;align-items: center;}

#reservation .socials{display:block;margin-top:1rem;}
#reservation .socials p{display:block;margin:1rem 0;font-size:1.5em;}
#reservation .socials img{width:50px;height:50px;transition:transform 0.2s;margin:.5rem;}
#reservation .socials img:hover{transform:scale(0.90);}


#program{background:#83c141;color:black;border-radius: 25px;margin:1rem;min-height:calc(100dvh - 2rem);width:calc(100% - 2rem);text-transform:uppercase;padding:2rem;display:block;}
#program h2{font-size:3em;text-transform:uppercase;text-align:center;width:100%;margin-bottom:1em;margin-top:0.5em;}
#program h3{font-size:2em;margin-top:2.5em;margin-bottom:1em;}
#program h3:first-of-type{margin-top:0;}
#program p{margin-top:1rem;font-size:1.5em;  break-inside: avoid-column;-webkit-column-break-inside: avoid;page-break-inside: avoid;}
#program .col{width:100%;  column-count: 2;   column-gap: 2rem;}



img{transition: transform 0.5s;  -webkit-tap-highlight-color: transparent; /* removes mobile blue highlight */
  user-select: none; /* prevents text selection */}
img:hover{transform:scale(0.95);}


@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

img.spin {
  animation: spin 1s linear;
}


@media screen and (max-width: 1200px) {
  #logo{width:35dvw;}
  #hero-bride h1{font-size:2rem;}
  #hero-oktoberfest{padding:1rem;gap:1rem;}
  .msg,input[type=text]{width:unset;}
  #reservation h2{font-size:2rem;}
  #reservation .socials{display:block;margin-top:1rem;}
  #reservation .socials p{display:block;margin:1rem 0;font-size:1em;}
  #program .col{width:100%;  column-count: 1;   column-gap: 2rem;}
  #program p{font-size:1em;}
  #program{padding:1rem;}
  #program h2{margin:0.5em 0;margin-bottom:0.75em;}
  #program h3{font-size:1.5em;margin-top:2em;margin-bottom:0.5em;}
  .date-title{font-size:1.3rem;}
  .time-guest select,.time-guest{font-size:1.3rem;}
}


#eletkor-popup{width:100dvw;height:100dvh;background:black;color:white;display:flex;justify-content: center;align-items:center;z-index:999;position:fixed;top:0;left:0;font-size:1.5rem;padding:1rem;text-align:center;text-transform:uppercase;}
#eletkor-popup-inner{display:flex;flex-flow:column wrap;align-items: center;}
#eletkor-popup-karika{display:flex;border:20px solid red;justify-content: center;align-items: center;font-size:4rem;border-radius:100%;text-align:center;padding:2rem;aspect-ratio: 1/1;padding-bottom:1.7rem;padding-right:1.7rem;font-weight:bold;}
#eletkor-popup p{margin:1.5rem 0;}
.eletkor-popup-buttons{width:100%;display:flex;gap:1.5rem;flex-flow:row nowrap;align-items: center;justify-content: center;}
.eletkor-popup-button{padding:1rem;border-radius:15px;color:white;padding-bottom:0.6rem;display:inline-block;width:auto;}
#igen{background:green;}  
#nem{background:red;}