:root {    
    --inline-padding: 15vw;
    --inline-padding: 15svw;
    --block-padding: 6svh;

    --primary: rgb(146, 114, 95);
    --secondary: rgb(255, 255, 255);
    --tertiary: rgb(78, 64, 55);

    --font-main: 1.25rem;
    --font-large: 2rem;
}


/* COLOR */

.section1 {    
    background-color: var(--secondary);
}
.section1 * {
    color: var(--primary); 
}
.section2 {
    background-color: var(--primary);
}
.section2 * {
    color: var(--secondary);
}
h1 {
    color: var(--secondary);
}
a {
    color: var(--primary);
}
.cardMerch button, #buttonsFeedback button  {
    background-color: var(--primary);
    color: var(--secondary);
}
svg {
    fill: var(--primary);
}
.headerDark a {
    color: var(--secondary);
    background-color: var(--primary);
    border-radius: 1rem;
}
#homeIcon {
    background: none;
}
.headerLight a, .headerLight a b {
    color: var(--secondary);
}
.concert {
    border: 1px solid var(--primary);
}
#carouselAbout img {
    background-color: var(--primary);
}
.cardMerch {
    background-color: var(--secondary);   
    border: 1px solid var(--primary);
    border-radius: 10px;
}
.modalImg img {
    border: 1px solid var(--secondary);
}
.modalImg button {
    border: transparent;
    background-color: var(--secondary);
    color: var(--primary);
}
input, textarea {
    border-color: var(--primary);
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    color: var(--primary);
}
input:focus , textarea:focus {
    outline-color: var(--primary);
}
input::placeholder, textarea::placeholder {
    color: var(--primary);
}




/* ANIMATION */

* {
    transition-duration: 300ms;
}
a:hover, button:hover, svg:hover {
    color: var(--tertiary);
    fill: var(--tertiary);
}
.headerDark a:hover, .headerLight a:hover {
    color: var(--secondary);
}
button:hover, svg:hover, header a:hover, .concert:hover, .cardMerch:hover {
    scale: 1.05;
    cursor: pointer;
}
.concert {
    transition-duration: 100ms;
}
.concert * {
    transition-duration: 0ms;
}
.concert:hover {   
    background-color: var(--primary);
    border-color: transparent;
}
.concert:hover * {
    color: var(--secondary);
}
img:hover {
    cursor: pointer;
}
.cardMerch button:hover, #buttonsFeedback button:hover {
    background-color: var(--tertiary);
    color: var(--secondary);
}
.modalImg button:hover {
    scale: 1;
}



/* FONT */

html {
    font-size: 100%; /* 1rem = 16px */
}
* {
    font-family: "Truculenta", Times, serif;
    font-size: var(--font-main);
}
header a, header a b {
    font-size: 1.5rem;
}
h1 {
    
    font-size: 12.5rem;
}
h2 {
    font-size: 3.75rem;
}
.arrowButton {
    font-size: 12.5rem;
}
#buttonPrevAbout, #buttonNextAbout {
    font-size: 6.25rem;
}
#sectionBooking th, .modalImg button {
    font-size: var(--font-large);
}



/* BOXES */

/* global */

* {
    margin: 0;    
}
#jumpToContent {
    position: absolute;
    top: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    color: transparent;
}
#jumpToContent:focus {
    position: static;
    width: auto;
    height: auto;
    color: initial;
}
section, article {
    padding-inline: var(--inline-padding);
    padding-block: var(--block-padding);
}
.sectionLanding {
    height: 100vh;
    height: 100svh;
    padding: 0px;
    overflow: hidden; 
    background-size: cover; 
    background-repeat: no-repeat;
    background-position: center;
}
header {
    display: flex;
    position: absolute;
    align-items: center;
    top: 0px;
    padding: 40px; 
}
header a img {
    height: 50px;
}
header nav {
    display: flex;
    align-items: center;
    padding-left: 20px;
}
header nav a {   
    text-decoration: none;
    padding-inline: 10px;
}
footer {
    padding-block: 10vh;
    padding-block: 10svh;
    text-align: center;
}
h1 {
    position: absolute;
    left: var(--inline-padding);
    bottom: 0px;
}
h2 {
    padding-bottom: 20px;
}
ul {
    list-style-type: none;
    padding-inline-start: 0px;
}





/* page index */

#sectionLandingIndex {
    background-image: url(./media/backgrounds/4b1_2x1_thumbnail.png);
}
iframe {
    border: none;
}
.arrowButton {
    background-color: transparent;
    border: none;
    padding: 0;
}

/* sectionConcerts */

.concert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block: 10px;
    border-radius: 50px;
}
.concertEvent, .concertTicket {
    padding: 10px 20px;
}
.concertEvent {
    width: 100%;
}

/* sectionReleases */

#sectionReleases h2 {
    text-align: center;
}
#carouselReleases {
    display: flex;
    align-items: center;
}
#currIframeReleases {
    width: 100%;
    border-radius: 12px;
}

/* sectionAbout */

#sectionAbout {
    padding-inline: var(--inline-padding);
    text-align: left;
}
#layoutAbout {
    display: grid;
    grid-template-columns: 50% 50%;
}
#layoutAbout p {
    display: inline;
    text-align: justify;
    padding-right: var(--block-padding);
    width: 100%;
}
#carouselAbout {
    display: flex;
    align-items: center;
    justify-content: center;
}
#carouselAbout img {
    width: 20svw;
    height: 20svw;  
    border-radius: 20px;
    object-fit: contain;
}

/* sectionVideos */

#sectionVideos {
    text-align: center;
}
#layoutVideos {
    display: flex;
    justify-content: center;
    align-items: center;
}
#layoutVideos iframe {
    --iframe-width: 50svw;
    --iframe-height: calc(var(--iframe-width)*0.5625);
    width: var(--iframe-width);
    height: var(--iframe-height);    
}

/* sectionLinks */

#sectionLinks {
    text-align: center;
    padding-bottom: 0px;
}
.iconLinks {
    display: flex;
    justify-content: center;
}
#sectionLinks h2 {
    padding-bottom: 0;
}
#sectionLinks .iconLinks li {
    padding-inline: 20px;
}
#sectionLinks ul {
    padding-block: 20px;
}
#sectionLinks .contacts li {
    padding-block: 5px;
}



/* page merch */

#sectionLandingMerch {
    background-image: url("./media/backgrounds/merch_lab.PNG"); 
}
#sectionMerchVideo video {
    width: 100vw;
    width: 100svw;
    display: block;
    margin: auto;
}
#containerMerch {
    display: grid;
    grid-template-columns: auto auto auto;
    width: 100%;
}
.cardMerch {
    min-height: 0;
    min-width: 0;
    padding: 20px;
    margin: 10px;
}
.cardMerch img {
    width: 100%;
}
.cardMerch h3, .cardMerch p {
    text-align: left;   
}
.cardMerch div {
    display: flex;
    width: 100%;
    margin-top: 10px;
    gap: 10px;
}
.cardMerch input {
    width: 100%;
}
.cardMerch button {
    width: 100%;
    border: 0px;
    border-radius: 5px;
}
.modalImg {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 80svh;
    scale: 0.95;
}
.modalImg img {
    width: 100%;
}
.modalImg button {
    position: absolute;
    right: 0;
}


/* page contact */

#sectionLandingContact {   
    background-image: url("./media/backgrounds/kapcsolat.jpg");
}
#sectionBooking table {
    text-align: left;
    border-spacing: 0px 5px;
}
#sectionBooking table * {
    text-align: left;
    padding: 0 60px 0 0;    
}
#sectionBooking table details {
    padding-bottom: 20px;
}
#sectionFeedback h2 {
    text-align: left;
}
#name, #email {
    display: block;
    margin-bottom: 10px;
}
#feedback {
    display: block;
    width: 100%;
    height: 200px;
    margin-inline: auto;
}
#buttonsFeedback {
    text-align: left;
}
#submitButtons {
    margin-top: 20px;
}
#submitButtons button {
    border: 0px;
    border-radius: 5px;    
}



@media screen and (max-width: 1000px) {
    :root {
        --font-h1: 10rem;
    }
    h1 {
        font-size: 10rem;
    }
    h2 {
        text-align: center;
    }
    #containerMerch {
        grid-template-columns: auto auto;
    }
    #layoutAbout {
        grid-template-columns: auto;
        gap: 2rem;
    }
    #layoutAbout p {
        padding: 0;
    }
    #layoutAbout img {
        width: 50svw;
        height: 50svw;
    }
    #layoutVideos iframe {
        --iframe-width: 80svw;
        --iframe-height: calc(var(--iframe-width)*0.5625);
        width: var(--iframe-width);
        height: var(--iframe-height);    
    }
    .leftArrow, .rightArrow {
        position: absolute;
        font-size: 6.25rem;
    }
    .leftArrow {       
        left: 1rem;
    }
    .rightArrow {
        right: 1rem;
    }    
}
@media screen and (max-width: 700px) {
    :root {
        --inline-padding: 10vw;
        --inline-padding: 10svw;
        --font-main: 1rem;
    }
    .sectionLanding {
        height: 70svh;
        display: flex;
        justify-content: center;
        align-items: end;
    }
    h1 {
        font-size: 5rem;
        position: static;
    }
    h2 {
        font-size: 2rem;
    }
    #sectionBooking table * {
        word-break: break-word;
    }
    #sectionBooking table th {
        font-size: 1.2rem;
    }
    header {
        display: block;
        position: static;
        padding: 0;
        margin: auto;
        height: 30svh;
    }
    .headerLight {
        background-color: var(--primary);
    }
    header nav, header nav a {
        display: block;
        padding: 0;
    }
    header nav a {
        padding: 0.2rem;
        text-align: center;
    }
    header a img {
        display: block;
        margin: auto;
        padding-top: 1rem;
    }
    #sectionLinks .iconLinks li {
        padding-inline: 0.5rem;
    }
    #sectionBooking table * {
        padding: 0 5svw 0 0;
    }
}
@media screen and (max-width: 500px) {
    #containerMerch {
        grid-template-columns: auto;
    }
}
@media screen and (max-height: 800px) and (max-width: 700px) {
    #sectionLandingIndex, #sectionLandingMerch, #sectionLandingContact {
        position: static;
        background-image: none;
        background-color: var(--primary);
    }
    .headerDark {
        background-color: var(--primary);
    }
    .headerDark a {
        color: var(--secondary);
    }
    .headerDark #homeIcon img {
        filter: brightness(100);
    }
}