html {
    /* make sure we use up the whole viewport */
    /*min-height: 100vh;*/
    scroll-behavior: smooth;
    color-scheme:light; /* dark; */
}

* {
    /* personal preference */
    margin: 0;
    padding: 0;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}




.btn-subwork {
    transform: skewY(var(--default-text-rotate));
    padding: 10px;
    padding-inline: 16px;
    border: none;
    border-radius: 5px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}


#allContent {
    width: 100%;
    padding-bottom: 40px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    /*height: 100Vh;*/
    /*justify-content: center;*/
    /*
    Single bg color*/
    background-color: var(--bg-all-content);
    /* 
    Background specific (Fullsize image) in case you want to use bg image */
    /*background-image: url('/assets/img/background.jpg');
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover; */
}

.bodyContainer {
    background-color: var(--bg-body-container);
    /*height: 100Vh;*/
    width: 100%;
    max-width: var(--body-container-max-width);
    padding-inline: 0;
}

#contentContainer {
    background-color: var(--bg-body-container);
    justify-items: center;
    justify-content: center;
    /*height: 100Vh;*/
    /*width: 100%;
    max-width: var(--body-container-max-width);*/
    
}


body {
    font-family: "Barlow", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.25rem;
    line-height:1.5;

    /*min-height: 100vh;*/
    
    border: 0;
    padding: 0;

    display: grid;
    grid-template-rows: min-content 1fr;
    overflow-x: hidden;

    /*z-index: -100;*/

    /* Background specific (Fullsize image) */
    /* background-image: url('background.jpg');
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover; */
 }

#bodyContainer {
    margin-top: calc(var(--navigationContainer-min-height) * -1);
}


.topSpacer{
    margin-top:100px;

}

.DirectLinkSpacer {
    margin-top: 70px;
}



.image-overlay {
    border-image: linear-gradient(hsl(240 100% 50% / .3), hsl(0 100% 50% /.3)) fill 1; 
}


 /* This is to center a image in the container where it's placed */
 .image-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    min-width: 100%;
    /*min-height: 100%;*/
}




/* HTML: <div class="ribbon">Your text content</div> */
.ribbon {
    font-size: 1.2rem;
    font-family: "Barlow", sans-serif;
    font-weight: 500;
    font-style: normal;
    color: #fff;
}
.ribbon {
    --f: .7em; /* control the folded part*/
    --r: .8em; /* control the ribbon shape */

    position: absolute;
    top: 14px;
    left: calc(-1*var(--f));
    padding-inline: .25em;
    line-height: 1.7;
    background: var(--bg-ribbon);
    border-bottom: var(--f) solid #0005;
    border-right: var(--r) solid #0000;
    clip-path: polygon(0 0,0 calc(100% - var(--f)),var(--f) 100%, var(--f) calc(100% - var(--f)),100% calc(100% - var(--f)), calc(100% - var(--r)) calc(50% - var(--f)/2),100% 0);
}

.discoball {
    display: flex;
    background: rgb(0,0,0,0.5);
    margin-bottom: 100px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    aspect-ratio: auto;
    /* border-radius: var(--border-radius-default); */
    /*box-shadow: rgb(38, 57, 77) 0px 6px 20px 10px*/;
    box-shadow: rgb(38, 57, 77) 0px 0px 30px 0px;
}

.discoball-plaque {
    position: sticky;
    display: flex;
    text-align: center;
    background-color: hsla(206 72% 74.7% / 0.74);
    margin-top: -200px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
    z-index: 4 !important;
    max-width: 70%;
    min-width: 60%;
    border-radius: var(--border-radius-default);
}

.video-centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    /*min-width: 100vh;
    min-height: 100vh;*/
}


/* MEDIA QUERIES  */

@media  only screen and (min-width: 280px) and (max-width: 767px)  {
    html { font-size: 80%; }
    .discoball {
        min-height: 18vH;
    }

    #karaoke-vendor-image {
        margin-right: 0px;
    }
    .figureimage {
        width: 45%;
    }


    .section-container {
        padding: 30px;
    }

}
  
@media  only screen and  (min-width: 768px) and (max-width: 991px) {
    html { font-size: 90%; }
    .discoball {
        min-height: 25vH;
    }
    #karaoke-vendor-image {
        margin-right: 0px;
    }
    .figureimage {
        width: 60%;
    }

    .section-container {
        padding: 45px;
    }


}
  
@media  only screen and  (min-width: 992px) and (max-width: 1024px) {
    html { font-size: 100%; }
    .discoball {
        min-height: 30%;
    }
    #karaoke-vendor-image {
        margin-right: 30px;
    }

    .figureimage {
        width: 75%;
    }

    .section-container {
        padding: 60px;
    }

}
  
@media  only screen and  (min-width: 1025px) {
    html { font-size: 100%; }
    .discoball {
        min-height: 35vH;
    }
    #karaoke-vendor-image {
        margin-right: 40px;
    }
    .figureimage {
        width: 90%;
    }

    .section-container {
        padding: 85px;
    }

}
    
@media  only screen and  (min-width: 1824px){
    html { font-size: 100%; }
    .discoball {
        min-height: 40vH;
    }
    
    #karaoke-vendor-image {
        margin-right: 50px;
    }
    .figureimage{
        width:100%;
    }

    .section-container {
        padding: 85px;
    }

}



/*https://css-generators.com/custom-borders/*/
.left-right-zikzak {
    mask: conic-gradient(from 27.5deg at left,#0000,#000 1deg 124deg,#0000 125deg) left/51% 15.37px repeat-y, conic-gradient(from -152.5deg at right,#0000,#000 1deg 124deg,#0000 125deg) 100% calc(50% + 7.68px)/51% 15.37px repeat-y;
}



.image img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    text-align: center;
    background-color: var(--logo-img-bg);
}


.left-image img,
.right-image img {
    z-index: 1;
    border-radius: var( --border-radius-default);
}


.swissFlag {
    width: 16px;
    aspect-ratio: 1;
    margin-top: -2px;
}

.noto-music-regular {
    font-family: "Noto Music", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.notecharacter {
    color: var(--section-headlinetext);
    font-size: 1.6rem;
    font-weight: 400;
    margin-right: 10px;
}

.pitchTextMain {
    font-family: "Black Han Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 4rem;
    color: white; /*var(--clr-light-blue);*/
    text-shadow: 2px 2px 2px var(--clr-light-blue);
}

.pitchTextSub {
    font-size: 2rem;
    color: var(--clr-light);
    text-shadow: 1px 1px 1px var(--bg-ribbon);
}