@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

*{
    padding: 0;
    margin: 0;
    scroll-behavior: smooth;
    font-family: 'Roboto';
    box-sizing: border-box;
}

a{
    text-decoration: none;
    color: white;
    &:visited{
        color: white;
    }
}

.navbar{
    position: fixed;
    width: 100%;
    height: 10dvh;
    z-index: 1000000;
    text-align: center;
    font-size: 5dvh;
    backdrop-filter: blur(10px);
    color: white;

    .navbarText{
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        font-weight: bold;
    }

    .navbarIcons{
        display: none;
        width: 100%;
        height: 100%;
        align-items: stretch;
        a{
            top: 5%;
        }
        svg{
            position: relative;
            height: 75%;
            width: auto;
            top: 10%;
        }
    }

    .navbarText, .navbarIcons{
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-evenly;
    }

    @media (max-width: 100vh) {
        .navbarText {
            display: none;
        }
        .navbarIcons{
            display: flex;
        }
    }
}

.scrollPanels {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100dvh;
    scrollbar-width: none;
    overscroll-behavior-y: contain;

    .panel {
        width: 100%;
        height: 100dvh;
        scroll-snap-align: start;
        scroll-snap-stop: always;

        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        background-color: rgba(0, 0, 0, 0.85);
        background-blend-mode: overlay;
        background-attachment: scroll;

        @media (max-width: 100vh) {
            & {
                background-size: auto 100dvh;
            }
        }

        .panelContent {
            width: 100%;
            height: 90dvh;
            position: relative;
            top: 10dvh;


            .content {
                position: absolute;
                width: 98%;
                height: 98%;
                top: 1%;
                left: 1%;
            }

            h1 {
                text-align: center;
                font-size: 5dvh;
                color: white;
            }
        }
    }
}

#hero{
    color: white;
    .content{
        display: flex; 
        flex-direction: column;
        justify-content: space-evenly;
    }
    h1{
        color: white;
        font-size: 10vh;
    }
    p{
        color: white;
        font-size: clamp(5rem, 1.6vw, 10rem);
        text-align: center;
        align-self:flex-end;
    }
}

#program{
    table{
        height: 90%;
        width: 90%;
        border-collapse: collapse;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 1dvh;
        overflow: hidden;
        font-size: clamp(1.7rem, 1.5vw, 10rem);
        backdrop-filter: blur(6px);
    }
    th, td{
        padding: 1dvh;
        text-align: left;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    th{
        background-color: rgba(60,60,60,0.5);
        color: #fff;
        font-weight: 680;
        text-transform: uppercase;
    }
    td{
        color: #000;
    }

    .content{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}

table{
    background-color: rgba(255, 255, 255, 0.501);
    width: 100%;
    font-size:120%;

    @media (max-width: 100vh) {
        & {
            background-size: auto 100dvh;
        }
    }
}



#venueAndTickets{
    color: white;

    .content{
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;

        @media (max-width: 100vh){
            &{
                flex-direction: column;
            }
        }
    }
}

.tickets {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    color: white;
    text-align: center;

    


    form {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1.5vh;
        width: 100%;
        aspect-ratio: 1/1;
        
        @media (max-width: 100vh){
            aspect-ratio: unset;
        }
    }

    form > div {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 96%;
    }

    label {
        flex: 1;
        text-align: left;
        font-size: clamp(1.2rem, 2vw, 1.8rem);
        padding-right: 1dvh;
    }


    input {
        height: 4dvh;
        border: none;
        border-radius: 1dvh;
        padding: 0 1dvh;
        font-size: 1rem;
        outline: none;
        background-color: rgba(255, 255, 255, 0.9);
        transition: all 0.3s ease;
    }

    input:focus {
        background: white;
        box-shadow: 0 0 0.5dvh rgba(255, 255, 255, 0.8);
    }

    progress {
        width: 96%;
        height: 2dvh;
        appearance: none;
    }

    .cprogress{
        display: block;
    }

    .csubmit{
        width: 96%;
        height: 4dvh;
    }
}


.venue{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;

    gap: 2dvh;
    color: white;
    text-align: center;

    width: 100%;

    .ciframe{
    width: 96%;
    aspect-ratio: 1/1;

        @media (max-width: 100vh) {
            & {
                width: 100%;
                aspect-ratio: 4/1;
            }
        }
    }
}

#speakers{
    .content{
        display: flex;
        flex-direction: column;

        .sliders{
            display: flex;
            position: relative;
            justify-content: space-around;
            align-items: center;
            left: 35%;
            width: 30%;

            @media (max-width: 100vh){
                &{
                    width: 40%;
                    left: 30%;
                }
            }

            svg{
                aspect-ratio: 1/1;
                height: 2.2dvh;

                @media (max-width: 100vh){
                    &{
                        height: 3dvh;
                    }
                }
            }
        }

        .carousel{  
            flex: 1;
            min-height: 0;
        }

        h1{
            flex-shrink: 0;
        }

        .speakersCarousel{
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: row;
            overflow-x: auto;
            overflow-y: hidden;
            scroll-snap-type: x mandatory;
            position: relative;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-x: contain;
            scrollbar-width: none;
            touch-action: pan-x, pan-y;

            .speakerArticle{
                flex-shrink: 0;
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-around;
                scroll-snap-align: start;
                scroll-snap-stop: always;
                
                @media (max-width: 100vh){
                    &{
                        flex-direction: column;
                    }
                }

                figure{
                    img{
                        height: 45vh;
                        aspect-ratio: 1/1;

                        @media (max-width: 100vh){
                            &{
                                height: 30dvh;
                            }
                        }
                    }

                    figcaption{
                        text-align: center;
                        color: white;
                    }
                }

                p{
                    color: white;
                    font-size: clamp(1.5rem, 3vh, 6rem);
                    max-width: 50%;

                    @media (max-width: 100vh){
                        max-width: 100%;
                        overflow: hidden;
                        text-align: center;
                    }
                }
            }
        }
    }
}

#hero{
    background-image: url(https://a.storyblok.com/f/188325/1920x1280/41e681c422/alexandre-pellaes-6vajp0pscx0-unsplash-1-1.jpg);
}

#program{
    background-image: url(https://cdn.mos.cms.futurecdn.net/UvXw6vrarRhxi4eAyfnscT.jpg);
}

#speakers{
    background-image: url(https://quixy.com/wp-content/uploads/2021/04/IDC-Directions.jpg);
}

#venueAndTickets{
    background-image: url(https://press-start.com.au/wp-content/uploads/2014/06/20130611-E3-SHOW-FLOOR-0241.jpg);
}