* {
    padding: 0;
    margin: 0;
    box-sizing: border-box; /* Ensures padding/borders don't affect width */
    overflow-x: hidden;
}

html, body {

    scroll-behavior: smooth;
    
    background-color: white;
    cursor: default;
    width: 100vw;

    font-family: Helvetica, Arial, sans-serif;
    font-weight: 400;
    color: black;
    padding-bottom: 8vh;
}

canvas {
    cursor: default;
}

h2 {
    font-family: Helvetica;
    font-weight: 700;
    font-size: clamp(12pt, 5vw, 24pt);
}

p {

    font-family: Helvetica;
    font-size: clamp(4pt, 2vw, 12pt);
    line-height: 1.6;
    
}

span {
    font-weight: 700;
    font-size: 15px;
}

footer {
    position: absolute;
    width: auto;
    bottom: 0;
    /* background-color: white; */

    cursor: none;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2vw;
    left: 50%;
    /* right: 50%; */
    transform: translateX(-50%);
    /* transform: translateY(50%); */

    padding-left: 5%;
    padding-right: 5%;
}

.email, .phone {

    font-family: Helvetica, Arial, sans-serif;
    font-size: 1rem;
    text-decoration: underline;
    padding-top: 10%;
    padding-bottom: 10%;
    /* padding-left: 5%; */
    /* padding-right: 5%; */
}

.email > a {
    cursor: none;
}

.clipboard {
    position: relative;
    display: inline-block;
}

.copied-message {
    z-index: 1006;
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    /* background-color: #333; */
    color: black;
    padding: 2.5px 5px;
    font-size: 12px;
    /* border-radius: 5px; */
    border: 1px solid;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.show {
    opacity: 1;
}

.book {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(20px,4.5vw,300px); 
    /* padding-left: clamp(16px, 15vw, 120px); */
    /* padding-right: clamp(16px, 15vw, 120px); */
    padding-top: clamp(16px, 15vh, 150px);
}



.spread {
    width: clamp(425px, 45vw, 1000px);
    min-width: 425px;
    /* padding-bottom: clamp(20px, 1vw, 40px); */
    
    
    
}

.fade-in {
    opacity: 0;
    animation: fadeIn 0.5s ease-in-out forwards;
}

.fade-out {
    opacity: 0;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.text > h2 {
    /* width: clamp(250px, 40vw, 700px); */
    font-size: clamp(28px, 2vw, 64px);
}

/* .sub-text {
    width: clamp(250px, 30vw, 500px);
    min-width: 250px;
    
} */

.info {
    padding-top: 2vh;
    display: flex;
    justify-content: space-between;
    line-height: 1.4;
}

#body {
    padding-top: 5vh;
    line-height: 1.6;
    font-size: clamp(16px, 2vw, 12pt);
    width: clamp(250px, 30vw, 500px);
    min-width: 250px;
}

.book-function {
    display: block;
    /* width: clamp(250px, 40vw, 700px); */
    min-width: 350px;
}

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

.nav-l, .nav-r {
    width: 35px;
    height: 35px;
    margin: 8px;
    border: 0.5px solid rgb(192, 192, 192);
    border-radius: 12px;

    background-color: white;
}

.nav-l:hover, .nav-r:hover {
    background-color: rgb(201, 201, 201);
}

.scroll-container {
    display: flex;
    align-items: center;
    justify-content: center;

    padding-top: 4vh;
}

#scroll {
    z-index: 99; /* Make sure it does not overlap */
    border: 30px; 
    background-color: #ffffff;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    color: black; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 10px; /* Some padding */
    transition: all 0.2s ease-in-out;
    font-size: clamp(12px, 1vw, 16px); /* Increase font size */
    text-decoration: underline;
  }
  
  #scroll:hover {
    background-color: #ffffff; /* Add a dark-grey background on hover */
    border-color: black;
  }

.opening {
    width: clamp(325px, 60vw, 700px);
    min-width: 325px;
    /* padding-bottom: clamp(20px, 1vw, 40px); */

    
}

.alt-info {
    padding-top: 2vh;
    display: flex;
    justify-content: flex-start;
    gap: clamp(16px, 4vw, 64px);
    line-height: 1.4;
    
}

.content {
    padding-top: 9vh;
    display: flex;
    justify-content: center;
    align-items: first baseline;

    gap: clamp(16px, 4vw, 64px);
}

.content-text {

    width: clamp(250px, 60vw, 900px);
    min-width: 250px;
}

.all-chapters {
    display: flex;
    gap: clamp(16px, 4vw, 64px);
    
    align-items: center;
    justify-content: center;
    padding: clamp(64px, 8vw, 200px);
    padding-bottom: 0;
}

.chapter {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 1vw, 64px);
    align-items: center;

}

.chap-spread {
    width: clamp(150px, 30vw, 1920px);
    min-width: 300px;
    padding-bottom: 2vh;
}

.chap-text {
    padding-top: 2vh;
    font-size: clamp(16px, 2vw, 12pt);
    /* width: clamp(250px, 25vw, 500px);
    min-width: 250px; */
}


.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 9vh;
    /* gap: 20px; */
}

.logo-b {
    /* width: 250px; */
    padding: clamp(5px, 5vw, 50px);
    
}

.element-font-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    gap: clamp(16px, 4vw, 1200px);
}

.element-container {
    padding-top: 9vh;
    padding-left: 4vw;
    display: flex;
    flex-direction: column;
    padding-bottom: 9vh;
    /* gap: 20px; */
}

.elements-y, .elements-b {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 4vh, 100px);
}

.element {
    width: 40vw;
    
}

.font {
    height: 30vh;
}

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

    padding-top: clamp(12px, 5vw, 50px);
}

.label {
    width: 80vw;
}

.content-text > h4 {
    padding-top: 4vh;
    padding-bottom: 1vh;
}

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

    padding-top: 9vh;
}

.box {
    width: 55vw;
}

.render-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.babel-carousel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* width: clamp(250px, 40vw, 700px); */
    /* min-width: 350px; */
    padding-top: 10vh;
}

.babel-spread {
    width: 80vw;
}

.video-sub {
    display: flex;
    flex-direction: column;
}

.video-container {
    position: relative;
    width: clamp(325px, 60vw, 700px);
    min-width: 325px;
    padding-bottom: 26.25%;
    height: auto;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



.alt-content {
    padding-top: 9vh;
    padding-bottom: 9vh;
    display: flex;
    justify-content: center;
    align-items: first baseline;

    gap: clamp(16px, 4vw, 64px);;
}



.patches {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: clamp(20px, 3.5vw, 300px);
}

.patches-1, .patches-2 {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(20px, 4.5vw, 300px);
}

.pvid {
    width: clamp(300px, 40vw, 1920px);
    height: auto;
}

.pvid-w-text {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: clamp(20px, 2vh, 200px);
}

.ptext {
    width: clamp(300px, 30vw, 1920px);
    height: auto;
    text-align: center;
}

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

.photos {
    width: 80vw;
}

.intro-img {
    width: clamp(325px, 60vw, 700px);
    min-width: 325px;
    /* border-width: 20px; */
}

.alt-patches-1 {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* gap: clamp(20px, 4.5vw, 300px); */
}

.alt-patches-2 {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: row;
    gap: clamp(10px, 2vw, 300px);
}

.system-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.system {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* justify-content: center; */
}

.vowel {
    text-decoration: underline;
    font-weight: 700;
}

.sounds {
    padding-top: 5vh;
}

.letter {
    padding-top: 0.5vh;
}


@font-face {
    font-family: 'Le';
    src: url('../data/arvena/LeMoFontNew_291124.otf') format('otf'),
         url('../data/arvena/LeMoFontNew_291124.ttf') format('truetype');
    font-display: swap;
}

.about-block {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.me-info {
    padding-top: 15vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(24px, 3vw, 84px);
}

.me {
    width: clamp(150px, 30vw, 800px);
}

.hello {
    font-size: 3rem;
    
}

.about-me {
    width: clamp(64px, 40vw, 1200px);
    line-height: 1.4rem;
    padding-top: 2vh;

}

.me-all-logos {
    display: flex;
    gap: clamp(5px, 1vw, 20px);
}

.me-logo {
    width: clamp(28px, 1.7vw, 64px);
    height: auto;
}

.cv {
    display: flex;
    align-items: flex-start;
    justify-content: center;

    gap: clamp(20px, 7vw, 200px);
}

.col {
    padding-top: 10vh;
    display: flex;
    flex-direction: column;
    gap: 10vh;
}

.sub-head {
    padding-bottom: 0.7vh;
    padding-top: 2.5vh;
    width: clamp(32px, 30vw, 500px);
}

.cv-text {
    width: clamp(32px, 30vw, 500px);
}

.cv-year {
    color: rgb(86, 86, 86);
    width: clamp(32px, 30vw, 500px);
    padding-top: 0.6vh;
}

.websites {
    display: flex;
    gap: 16px;
    padding-top: 2vh;
}

header {
    position: absolute;
    width: 100vw;
    height: auto;
    background-color: white;
    padding: 0.5%;
    padding-left: 2.35%;
    padding-top: 1%;
    padding-right: 3%;
    cursor: default;

    display: flex;
    align-items: center;
    justify-content: space-between;

    
}

.logo {
    width: clamp(28px, 1.7vw, 64px); /* Maintain your existing size */
    /* height: 1%; */
    cursor: pointer;
}


.name {

    font-family: Helvetica;
    letter-spacing: -0.2rem;
    font-size: clamp(42px, 3vw, 150px);
    
    text-align: center;

    position: absolute;
    
    left: 50%;
    transform: translateX(-50%);
}

.links {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: clamp(8px, 3vw, 64px);
    
}


.about {
    font-family: Helvetica;
    font-size: 1.3rem;
    text-align: right;
    text-decoration: underline;
    
}

.style-link {
    /* text-decoration: none; */
    color: black;
    padding: 0 10px;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    transition: all 0.3s ease-in-out;
}

.style-link:hover {
    border-color: black;
}

a {
    color: black;
}



.link {
    width: 30px;
    height: 30px;
    position: absolute;
    margin: 12px;

    
}

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

.table-container {
    max-width: 80%;
    overflow-x: scroll;
    border: 2px solid #000000;
    padding: 10px;
    height: 40vh;

    /* position: absolute;
    left: 50%;
    bottom: 8%;
    transform: translateX(-50%); */
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #000000;
    padding: 8px;
    text-align: center;
    min-width: 100px;
    font-size: clamp(8px, 2vw, 16px);
}

tr:hover {
    background-color: #f1f1f1;
}

.components {
    width: clamp(100px, 25vw, 1000px);
    padding: 2%;
}

.component-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.vid-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.full-vid {
    width: clamp(500px, 80vw, 1200px);
    min-width: 500px;
}

.download-btn {
    
    width: auto;
    
    font-size: 16px;
    font-weight: 400;
    padding: 8px 16px;
    
    background-color: #ffffff;
    
    text-decoration: underline;
    
    /* border-left: 2px solid transparent;
    border-right: 2px solid transparent; */

    border: 0.5px solid rgb(192, 192, 192);
    border-radius: 12px;
}

.download-btn:hover {
    background-color: rgb(201, 201, 201);;
}

@media (max-width: 1250px) {
    .book {
        display: flex; /* Switch to block when screen is small */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
    }

    /* .sub-text {
        width: clamp(250px, 85vw, 700px);
        min-width: 250px;
    } */

    #body {
        width: clamp(250px, 85vw, 1200px);
        min-width: 250px;
        font-size: clamp(16px, 2vw, 18px);

    }

    p {
        width: clamp(250px, 85vw, 1200px);
        min-width: 250px;
        font-size: clamp(16px, 2vw, 18px);
    }

    .text > h2 {
        font-size: clamp(28px, 4vw, 64px);
    }

    h3 {
        padding-top: 4vh;
    }

    .spread {
        width: clamp(450px, 55vw, 700px);
        min-width: 450px;
    }

    .babel-spread {
        width: clamp(500px, 80vw, 1200px);
        min-width: 500px;
        /* padding-bottom: clamp(20px, 1vw, 40px); */
    
        
    }

    .center-wrapper {
        padding-top: 5vh;
    }

    .alt-content {
        padding-top: 4vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    
        gap: clamp(16px, 4vw, 64px);
        padding-bottom: 0;
    }

    .content {
        padding-top: 1vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    
        gap: clamp(16px, 4vw, 64px);
    }

    .content-text {

        width: clamp(250px, 85vw, 1200px);
        min-width: 250px;
        padding-bottom: 0;
    }

    .element-container {
        padding-top: 9vh;
        padding-left: 4vw;
        display: flex;
        flex-direction: column;
        padding-bottom: 4vh;
        /* gap: 20px; */
    }

    .photos {
        width: clamp(500px, 60vw, 700px);
        min-width: 500px;
        /* padding-bottom: clamp(20px, 1vw, 40px); */
    
        
    }

    .me {
        width: clamp(150px, 50vw, 800px);
    }

    .me-info {
        padding-top: 15vh;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: clamp(24px, 3vw, 84px);
        flex-direction: column;

        padding-left: clamp(16px, 4vw, 64px);
        padding-right: clamp(16px, 4vw, 64px);
    }

    .about-me {
        width: clamp(64px, 85vw, 1200px);
        min-width: 250px;
        line-height: 1.4rem;
        padding-top: 2vh;
        
    }

    video {
        padding-top: 4vh;
    }

    .sound-carousel {
        padding-top: 4vh;
    }

    .patches-1, .patches-2 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: clamp(20px, 4.5vw, 300px);
    }

    .alt-patches-2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 4vh;
    }

    .pvid {
        width: clamp(300px, 80vw, 1920px);
        height: auto;
    }

    .ptext {
        width: clamp(300px, 70vw, 1920px);
        height: auto;
        text-align: center;
    }

    .system {
        padding-top: 4vh;
    }

    .all-chapters {
        display: flex;
        gap: clamp(64px, 8vw, 200px);
        flex-direction: column;
        
        align-items: center;
        justify-content: center;
        padding: clamp(64px, 8vw, 200px);
        padding-bottom: 0;
    }
    
    .chapter {
        display: flex;
        flex-direction: column;
        gap: clamp(16px, 1vw, 64px);
        align-items: flex-start;
    
    }
    
    .chap-spread {
        width: clamp(150px, 40vw, 1920px);
        min-width: 300px;
    }
    
    .chap-text {
        padding-top: 2vh;
        font-size: clamp(16px, 2vw, 12pt);
        /* width: clamp(250px, 25vw, 500px);
        min-width: 250px; */
    }
}