@font-face {
    font-family: bold;
    src: url(Archivo-Black.ttf);
}

@font-face {
    font-family: light;
    src: url(Archivo-Light.ttf);
}
.pushable {
    position: relative;
    border: none;
    background: transparent;
    
    cursor: pointer;
    outline-offset: 4px;
    transition: filter 250ms;

}

.shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    background: hsl(0deg 0% 0% / 0.25);
    will-change: transform;
    transform: translateY(2px);
    transition:
        transform 600ms cubic-bezier(.3, .7, .4, 1);
}

.edge {
    position: absolute;
    top: 6px;
    left: 5px;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    background: linear-gradient(to left,
            hsl(0, 0%, 100%) 0%,
            hsl(0, 0%, 100%) 8%,
            hsl(0, 0%, 100%) 92%,
            hsl(0, 0%, 100%) 100%);
}


.front {
    border: 3px solid white;
    display: block;
    position: relative;
    padding: 12px 42px;

    font-size: 1.25rem;
    color: white;
    background: #1d1d1d;
    will-change: transform;
    transform: translateY(-4px);
    transition:
        transform 600ms cubic-bezier(.3, .7, .4, 1);
    border-radius: 30px;
}


.front1 {
    border: 3px solid white;
    display: block;
    position: relative;
    padding: 12px 42px;

    font-size: 1.25rem;
    color: white;
    background: #1d1d1d;
    will-change: transform;
    transform: translateY(-4px);
    transition:
        transform 600ms cubic-bezier(.3, .7, .4, 1);
    border-radius: 30px;
}

.pushable:hover .front1 {
    transform: translateY(-6px);
    transition:
        transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.pushable:active .front1 {
    transform: translateY(-100px);
    transform: translateX(5px);
    transition: transform 34ms;
    color: #e50050;
}



.pushable:hover {
    filter: brightness(110%);
}

.pushable:hover .front {
    transform: translateY(-6px);
    transition:
        transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.pushable:active .front {
    transform: translateY(-100px);
    transform: translateX(5px);
    transition: transform 34ms;
    color: #e50050;
}

.pushable:hover .shadow {
    transform: translateY(4px);
    transition:
        transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.pushable:active .shadow {
    transform: translateY(10px);
    transition: transform 34ms;
}

.pushable:focus:not(:focus-visible) {
    outline: none;
}

#potlo{
display: block;
position: static;
top:10%;
background: url('fekete_hatter90.png') no-repeat;
width: 100%;
    padding-top: 0%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    height: max-content;

}

#static{
position: fixed;
background: url('fekete_hatter90.png') no-repeat;
width: 100%;
padding-top: 0%;
        background-size: cover;
            background-position: center;
            background-repeat: no-repeat;

height: max-content;
z-index: 100;
}



#buttondiv {
    
    
    min-height: 100px;
    padding-right: 0px;
   
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 10px;
    align-content: center;
    width: 100%;
    text-align: center;
    border-bottom: 3px solid white;
    /* Center the buttons horizontally within the #buttondiv */
}
#counterdiv {
    padding: 1%;
    height: 70px;
    /* Set the desired height */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0px;
    width: 99%;
    text-align: center;
    padding-right: 0px;
    border-bottom: 3px solid white;
    /* Center the content horizontally within the #counterdiv */
}
.btn {
    
    margin: 0 auto;
    width: 100%;
    justify-content: center;
}

#countdown,#countdown1 {
position: relative;
    top: -15%;
    left:20%;
    text-align: center;
   
    text-transform: uppercase;
    background-color: #1d1d1d00;
    font-size: 4vw;
    font-weight: 700;
    color: #e50050;
    height: 10%;
    background: url(szamlalo.svg);
    background-repeat: no-repeat;
    background-position: 40%;
    min-width: 35%;
    min-height: 65%;
   



}


#logo {
    left: 20%;
    position: relative;
    top: 10%;
    cursor: pointer;



}
#content {
    display: block;
    top: 100%;
    margin-top: 0%;
    
    /* Adjust this value based on the height of the static div */
}

.content-section {
    margin:0;
    top: 10%;
    padding-top: 1%;
    color: rgb(255, 255, 255);
    font-size: 18vh;
    min-height:80vh;
    background: url('fekete_hatter90.png') no-repeat;
    background-size: cover;
        background-position: left;
        background-repeat: no-repeat;
    /* Adjusted to ensure full visibility */
   
    /* Adjust this value based on the height of the static div */
}



#lofasz {
background: url('voros.png') no-repeat;
min-height: 300vh;
height: 80%;
    width: 100%;
    padding-top: 0%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;  /* Adjust the height percentage as needed */
} 
#logo2{
    min-height: 100vh;
    position: static;
        width:75%;
    padding-top: 10%;
    top: 10%;


}
#voroslofasz{
    background: url('voros.png') no-repeat;
        height: 90%;
        
        margin-left: 10%;
        padding-bottom: 10%;
      top:0%;
      margin-top: 0%;
        width: 60%;
    z-index: 3;
    position: relative;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        text-align: center;
    float: left;
        /* Adjust the height percentage as needed */

}
#szovegdoboz{
   margin-top:0%;
   
left:100%;
display: inline-flexbox;

margin-left: 0%;
padding-left: 0%;

}
#szovegdoboz1{
display: grid;
    grid-template-columns: 1fr 1fr;


}

html,
body,
.grid {
    height: 100%;
    width: 100%;
    margin: 0;
}

.grid {
   
   
   
    background-image:
        repeating-linear-gradient(#ccc 0 1px, transparent 1px 100%),
        repeating-linear-gradient(90deg, #ccc 0 1px, transparent 1px 100%);
    background-size: 71px 71px;
}

#lang{

font-size: 2.5vw;
    font-weight: 700;
    color: #e50050;
left: 20%;
    position: relative;
}


#signupline {
   height:10vh;
    overflow: hidden;
    position: relative;
    background: rgb(255, 255, 255);
    color: #e50050;
   
}
.halo{
top:0%;
background:url(halo.svg);
min-height: 30vh;
background-repeat: repeat-y;
display: none;
width:50%;
z-index:1;
position: relative;
float:left;



}
#signup, #signup1{


    background: linear-gradient(to right,
                #e50050 0%,
                #e50050 50%,
               
                #1d1d1d 50%,
                #1d1d1d 100%);





}
#disclaimer{

background: #1d1d1d;
border-top: white 1px solid;

    
}
#ticket, #ticket1{

border-top: white 1px solid;
background: linear-gradient(to right,
            #e50050 0%,
            #e50050 50%,
    
            #1d1d1d 50%,
            #1d1d1d 100%);
            z-index: 0 !important; 


}
#lineup , #lineup1{

    min-height: 100vh;
    background:#e50050;
     

}



.scroller {
    height: 100%;
    padding:0%;
    position: relative;
   
    width: 100%;
  
            position: relative;
            background: rgb(255, 255, 255);
            color: #e50050;
           
            text-align: left;
            align-content: center;
}

.scroller>span {
    position: absolute;
    top: 20%;
    
   white-space: nowrap;
    animation: slide 180s infinite;
    font-weight: 900;
   text-align: center;
    font-size: 3vw;
    height: max-content;
    min-height: 7vh;
    width: 200%;
    text-align: left;
    border-top: #e50050 2px solid;
    border-bottom: #e50050 2px solid;
}

@keyframes slide {
0% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(-70%, 0, 0);
    }
0%{
        transform: translate3d(0, 0, 0);
    }
}
* {

    padding: 0%;
    margin: 0%;
    font-family: bold;
}
#ticket , #ticket1 {
    display: grid;
    grid-template-columns:  1fr  1fr;
    height:  100vh; /* Adjust as needed */
}

#ticketbutton {
    grid-column:  1;
    position: relative;
    top: 8%;
    left: -25%; 
    margin: -1%;
    scale: 0.65;
    display: block;
    cursor: pointer;
    padding: 0%;

 
    transition: left  600ms ease-in-out ;
}

#ticketbutton:hover{

    
    left: -10%;
    transition:  600ms ease-in-out ;
}

#ticketbutton:active{
    transition:   100ms ease-out ;
    left: -12%;
    


}
 .berlet {

     font-size: 100vw;
    fill: #fcfcfc;
 }
#ticketlabel, #ticketlabel2 {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    /* Set flex-direction to column */
    padding: 0%;
    width: 50%;
    margin: 0%;
    
    height: 50%;
    position: relative;
    top: 6vw;
 
    /* To prevent clicking through the label */
    
    border-radius: 25px;
    
    list-style-type: none;
    left: 30%;
    padding: 0;
}

#ticketlabel li , #ticketlabel2 li{
    background-color: white;
    color: #e50050;
    font-size: 2vw;
    border-radius: 25px;
    padding: 3%;
    margin: 3%;
    /* Adjust padding for better spacing */
    display: block;
}
#hatarido{


    margin-left: 30%;

}
#statikus {

    display:none

}
#desktop{

    display:block
}
#mobile{


        display:none
}
@media only screen and (max-width: 600px) {
    #lofasz{

        min-height: 100vh;
    }
    
    #mobile{

        display: block;

    }
  #desktop{

    display:none

  }
    #static {
        display: none;
    }
    .scroller {
        height: 100%;
        padding:0%;
     
        min-height: fit-content;
        width: 100%;
         overflow: hidden;
     
           
                position: relative;
                background: rgb(255, 255, 255);
                color: #e50050;
               
                text-align: left;
                align-content: center;
    }
    
    .scroller>span {
        position: absolute;
        top: 20%;
        animation: slide 180s infinite;
        font-weight: 900;
       text-align: center;
        font-size: 3vw;
        height: 5vh;
        width: 100%;
        text-align: left;
        border-top: #e50050 2px solid;
        border-bottom: #e50050 2px solid;
        min-height: 0;
    }
    #voroslofasz{

        display: none;


    }
    #jelentkezem{
        padding: 10%;
        font-size: 10vw;
        margin: 0%;

    }
    #hatarido{
        margin-left: 2%;


    }
    .halo{

        display: none;
    }
    #signupline {
       display: none;
    
    }
   
    .content-section{


        min-height: 120vw;
       

    }
    #statikus {

        display: block;
        position: fixed;
        min-height: 10vh;
        min-width: 10vw;
        
        right:3%;
        z-index: 10;
        cursor: pointer;
        
    }
        #statikus div{

            background-color: #ffffff;
            border-radius: 40px;
            min-height: 1vh;
            min-width: 1vw;
            padding: 1%;
            margin: 5%;
        }

    #szovegdoboz{
        display:none

    }
    #kepes{
        display:none

    }
    #ticketbutton{

        scale:170%;
        margin: 15%;

    }
    #ticketlabel, #ticketlabel2{

        margin-top: 40%;

    }

}