@import "./roots.css";
@import "./header.css";
@import "./footer.css";
@import "./collections.css";
@import "./buttons.css";
@import "./lookup_contact.css";
@import "./flickity_carousel.css";

@viewport {
    orientation: portrait;
}

@font-face {
    font-family: "Cresta-Bold";
    src: url('../fonts/cresta/bold/cresta.woff2') format('woff2'), url('../fonts/cresta/bold/cresta.woff') format('woff');
}

@font-face {
    font-family: "Cresta-Regular";
    src: url('../fonts/cresta/regular/cresta.woff2') format('woff2'), url('../fonts/cresta/regular/cresta.woff') format('woff');
}

html {
    height: 100%;
}

body {
    font-family: 'Cresta-Regular', sans-serif;
    /* background-color: var(--color-scheme-background-current); */
}

body {
    height: 100%;
    overflow: hidden;
    margin: 0;
    background: var(--color-scheme-bg);
}

a, a:visited{
    color: white;
    text-decoration-color: white;
    text-decoration-style: solid;
}

.main {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    height: 100%;
    max-width: var(--app-width);
    position: relative;
    margin: 0 auto;
}

.pagesubtitle {
    color: var(--color-scheme-font-current);
    font-size: 28px;
}

.content, .landingpage-content {
    position: relative;
    top: 0;
    width: 100%;
    padding: 15px;
    padding-top: 0;
    overflow: auto;
    flex: 1;

    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.content::-webkit-scrollbar {
    display: none;
}

.landingpage-content {
    padding: 0;
    min-height: 10rem;
}

.collections_container {
    display: flex;
    flex-direction: row;
    overflow: hidden;
    width: 100%;
    margin-top: 15px;
}
.collections_container > div {
    flex-shrink: 0;
}
.carousel_collection_name {
    margin-left: 8px;
    margin-right: 8px;
    text-decoration: none;
    color: white;
    opacity: 0.5;
    line-height: 2rem;
}
.collection_active {
    font-size: 1.5rem;
    font-weight: 800;
    opacity: 1;
}

.collections_list {
    display: flex;
    flex-direction: column;
    width: 80%;
    margin: 0 auto;
}

.pagetitle {
    color: white;
    font-size: 1.5rem;
    padding: 15px;
}

.toast-header > img {
    display: flex;
    width: auto;
    height: 40px;
}

.dev {
    display: flex;
    margin: 0 auto;
    width: auto;
    height: 50%;
    margin-bottom: 25px;
}

.qr > img {
    width: 100%;
    height: 100%;
}

.btn {
    color: white;
    border: 1px solid white;
    border-color: white;
    min-width: 50px;
}
.btn:hover {
    color: white;
    border: 1px solid white;
    border-color: white;
    min-width: 50px;
}
.btn:first-child:active {
    background-color: rgba(255, 255, 255, 0.4);
    border-color: white;
    color: white;
}

.url-display {
    white-space: nowrap;
    padding: 0;
}
.url-display > span {
    color: white;
    font-size: smaller;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.qr-container {
    padding: var(--qr-code-border-size);
    position: relative;
}
.qr-container > svg {
    border-radius: 16px;
    position: relative;
}
@property --qr-code-animated-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
@keyframes border-spin {
    from{
        --qr-code-animated-angle: 0deg;
    }
    to{
        --qr-code-animated-angle: 360deg;
    }
}
.qr-container::before {
    content: "";
    position: absolute;
    border-radius: calc(var(--qr-code-border-radius) + var(--qr-code-border-size));
    width: 100%;
    height: 100%;
    margin-top: calc( -1 * var(--qr-code-border-size));
    margin-left: calc( -1 * var(--qr-code-border-size));
    background-image: conic-gradient(from var(--qr-code-animated-angle), var(--color-scheme-first), var(--color-scheme-second), var(--color-scheme-first));
    animation: 3s border-spin linear infinite;
    opacity: 0.8;
}
.qr-container-Whatsapp::before {
    background-image: conic-gradient(from var(--qr-code-animated-angle), lightgreen, green, darkgreen, green, lightgreen);
}
.qr-container-Instagram::before {
    background-image: conic-gradient(from var(--qr-code-animated-angle), gold, purple, red, purple, gold);
}
.qr-container-Collection::before {
    background-image: conic-gradient(from var(--qr-code-animated-angle), 
        #FF6700, #FF6700, #3A6EA5, #3A6EA5, #3A6EA5, #FFD23F, #FFD23F, #FFD23F, #FF6700);
}

.no-border {
    border: none;
}

div:has(> .accordion-item) {
    border-radius: var(--bs-accordion-border-radius);
}
.accordion-item, .accordion-header, .accordion-button {
    border-radius: var(--bs-accordion-border-radius);
}
.accordion-item:first-of-type {
    border-radius: var(--bs-accordion-border-radius);
}
.accordion-item .accordion-body {
    max-width: 400px;
    margin: 0 auto;
}
.collection-accordion-header {
    background-color: rgba(255, 255, 255, 0.5);
}

.impressum {
    color: white;
}

.login_register_btn_container {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.login_register_btn_container > a, .login_register_btn_container > input {
    width: 70%;
    margin: 0 auto;
}


/*REmove again*/
.modal-backdrop {
    display: none;
}

.toast-bottom-full-width {
    margin-bottom: 16%;
}
#toast-container > .toast {
    max-width: calc(var(--app-width) - 40px);
    width: calc(100% - 40px);
}

.scanner {    
    height: 40vh;
    width: 40vh;
    object-fit: cover;
    margin: 0 auto;
}
div:has(.scanner)
{
    display: flex;
}