:root {
    --TMDBackgroundColor: #007bff; /* background for TapeMyDay pages */
    --TMDButtonSelected: #6eb0f6;
    --TMDButtonDeselected: #F9FBFB;
    --TMDTableBackground: #99c9fd;
    --generalBackgroundColor: #DCFBD7; /* background for most pages */
    --generalBackgroundColor2: #045E51; /* background for other pages */
    --windowBackgroundColor: #F9FBFB; /* background for windows */
    --mainBackgroundColor: #FFFFFF;
    --defaultButtonColor: #FF4380; /* default button */
    --nonDefaultButtonColor: #007bff; /* not the default button */
    --textColorDark: #3D4246; /* dark text */
    --textColorLight: #FFFFFF;
    --imageBackground: #E9E9E9;
    --textColorNavbarDeselected: #D7FFD0;
    --textColorNavbarSelected: #045E51;
    --contentButtonSelected: #DCFBD7;
    --contentButtonDeSelected: RGBA(0,0,0,0);
    --contentButtonBorderDeselected: #D2D3D3;
    --shareInstructionColor: #d4dfff;
    --shareInstructionTextColor: #00192F;
    --colorHover: #00806C;
    --pinkHover: #E21158;
}

html {
    font-size: 14px;
}

html {
    position: relative;
    min-height: 100%;
}

@font-face {
    font-family: firstFont;
    src: url("../fonts/Bagoss Regular/BagossStandard-Regular.woff");
}

@font-face {
    font-family: secondFont;
    src: url("../fonts/Bagoss Medium/BagossStandard-Medium.woff");
}

@font-face {
    font-family: tmdFont;
    src: url("../fonts/Roboto/Roboto-Medium.ttf");
}


body {
    overflow: hidden;
}


/* Mobile */
.myMargins {
    margin-left: 15px; /* Fixed left margin */
    margin-right: 15px; /* Fixed right margin */
    padding: 0px; /* Optional: add padding inside the container */
    box-sizing: border-box; /* Ensures padding and borders are included in width */
}

/* Desktop */
@media (min-width:900px) {
    .myMargins {
        margin-left: 148px;
        margin-right: 148px;
        margin-top: 15px;
    }
}

.spacer {
    height: 100px;
}

.container-fluid {
    overflow: hidden;
}

.pb-3 {
    overflow: hidden;
}

h24 {
    font-size: 18px;
    font-family: firstFont;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    color: var(--textColorDark);
    user-select: none;
}

/* Desktop */
@media (min-width:900px) {
    h24 {
        font-size: 24px;
        font-family: firstFont;
        font-style: normal;
        font-weight: 400;
        line-height: 30px;
        color: var(--textColorDark);
        user-select: none;
    }
}


h1 {
    font-size: 60px;
    font-family: firstFont;
    font-size: 60px;
    font-style: normal;
    font-weight: 500;
    line-height: 85px;
    color: var(--textColorDark);
    user-select: none;
}

h2 {
    font-size: 50px;
    font-family: firstFont;
    font-style: normal;
    font-weight: 500;
    line-height: 80px; /* 160% */
    user-select: none;
    color: var(--textColorDark);
}

h3 {
    color: var(--textColorDark);
    font-size: 40px;
    font-family: firstFont;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    user-select: none;
}


h4 {
    color: var(--textColorDark);
    font-size: 24px;
    font-family: secondFont;
    font-style: normal;
    font-weight: 500;
    line-height: 27px; /* 140% */
    // user-select: none;
}

@media (min-width:900px) {
    h4 {
        color: var(--textColorDark);
        font-size: 30px;
        font-family: secondFont;
        font-style: normal;
        font-weight: 500;
        line-height: 34px; /* 140% */
        // user-select: none;
    }
}

h5 {
    font-family: firstFont;
    color: var(--textColorLight);
    font-size: 13px;
    font-style: normal;
    font-weight: 300;
    user-select: none;
}

@media (orientation: landscape) and (max-height:600px) {
    h5 {
        font-family: firstFont;
        color: var(--textColorLight);
        font-size: 11px;
        font-style: normal;
        font-weight: 300;
        user-select: none;
    }
}


/* Desktop */
@media (min-width:900px) {
    h5 {
        font-family: firstFont;
        color: var(--textColorLight);
        font-size: 15px;
        font-style: normal;
        font-weight: 300;
        user-select: none;
    }
}



h6 {
    font-size: 20px;
    font-family: firstFont;
    color: var(--textColorDark);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    user-select: none;
}


.h6-deselect {
    font-size: 20px;
    font-family: firstFont;
    color: var(--textColorNavbarDeselected);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    user-select: none;
    text-align: center;
    margin-top: 10px;
}

.h6-select {
    font-size: 20px;
    font-family: firstFont;
    color: var(--textColorNavbarSelected);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    user-select: none;
    text-align: center;
    margin-top: 10px;
}

h7 {
    font-size: 14px;
    font-family: firstFont;
    color: var(--textColorDark);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    user-select: none;
    Line-height: 15.69px;
}

h8 {
    font-family: firstFont;
    color: var(--textColorDark);
    font-size: 7px;
    font-style: normal;
    font-weight: 300;
    user-select: none;
}

@media (orientation: landscape) and (max-height:600px) {
    h8 {
        font-family: firstFont;
        color: var(--textColorDark);
        font-size: 11px;
        font-style: normal;
        font-weight: 300;
        user-select: none;
    }
}


/* Desktop */
@media (min-width:900px) {
    h8 {
        font-family: firstFont;
        color: var(--textColorDark);
        font-size: 15px;
        font-style: normal;
        font-weight: 300;
        user-select: none;
    }
}


.defaultButton {
    margin-top: 2vh;
    display: flex;
    text-align: center;
    color: var(--textColorLight);
    text-decoration: none;
    display: inline-block;
    display: inline-block;
    font-family: firstFont;
    font-size: 4vw;
    width: fit-content;
    padding: 15px 30px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 100px;
    border: none;
    background-color: var(--defaultButtonColor);
    user-select: none;
}

/* ====== content page ===========*/

/* start page popup */





.mycontainer {
    height: 100vh;
}

.container {
    height: 100vh;
    align-items: center;
    justify-content: center;
    position: relative;
}

.center {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.logoBar {
    height: auto;
    width: auto;
}

.logoImage {
    height: 30px;
    width: auto;
    margin-top: 13px;
    margin-bottom: 13px;
    margin-left: auto;
    margin-right: auto;
    object-fit: cover;
    transition: height 400ms, width 400ms, margin-Top 400ms, margin-bottom 400ms, transform 400ms, opacity 1200ms;
}



@media (min-width:900px) {
    .logoImage {
        height: 58px;
        width: auto;
        margin-top: 19px;
        margin-bottom: 19px;
        margin-left: auto;
        margin-right: auto;
        object-fit: cover;
        transition: height 400ms, width 400ms, margin-Top 400ms, margin-bottom 400ms, transform 400ms, opacity 1200ms;
    }
}

#headerBar {
    height: auto;
    width: auto;
}



#greyLine {
    color: var(--contentButtonBorderDeselected);
}

#yourPhotos {
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-top: 0px;
    margin-bottom: 0px;
}

@media (min-width:900px) {
    #yourPhotos {
        margin-left: 0px;
        margin-top: 20px;
        margin-bottom: 5px;
    }
}

.contentButtonBar {
    width: 100%;
    display: block;
}

#contentButtons {
    height: 53px;
    width: 100%; /* Instead of fixed 2080px */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    text-align: left; /* Instead of center */
    display: flex;
    justify-content: flex-start; /* Align items to the left */
}

    /* Hide the scrollbar for Chrome (Webkit-based browsers) */
    #contentButtons::-webkit-scrollbar {
        width: 0px; /* Hides the scrollbar */
        height: 0px; /* Hides the scrollbar on horizontal axis */
    }

.contentButtonSelected {
    background-color: var(--contentButtonSelected);
    color: var(--textColorNavbarSelected);
    width: auto;
    height: 28px;
    flex-shrink: 0;
    border-radius: 40px;
    margin-left: 0px;
    margin-right: 5px;
    margin-top: 10px;
    font-family: secondFont;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: 15.69px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    user-select: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

@media (min-width:900px) {
    .contentButtonSelected {
        font-family: secondFont;
        font-size: 14px;
        margin-right: 15px;
        margin-top: 15px;
        padding-top: 11px;
        padding-left: 5px;
        padding-right: 5px;
        min-width: 130px;
        height: 38px;
    }
}

@media (min-width:900px) {
    .contentButtonSelected:hover {
        font-family: secondFont;
        color: var(--colorHover);
        font-size: 14px;
        margin-right: 15px;
        margin-top: 15px;
        padding-top: 11px;
        padding-left: 5px;
        padding-right: 5px;
        min-width: 130px;
        height: 38px;
    }
}

.contentButtonDeselected {
    background-color: var(--contentButtonDeSelected);
    color: var(--textColorDark);
    width: auto;
    height: 28px;
    flex-shrink: 0;
    border-radius: 40px;
    border: 1px solid var(--contentButtonBorderDeselected);
    margin-left: 0px;
    margin-right: 5px;
    margin-top: 10px;
    font-family: secondFont;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: 15.69px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    user-select: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

    .contentButtonDeselected:hover {
        background-color: var(--contentButtonDeSelected);
        color: var(--colorHover);
        width: auto;
        height: 28px;
        flex-shrink: 0;
        border-radius: 40px;
        margin-right: 5px;
        margin-top: 10px;
        font-family: secondFont;
        font-size: 10px;
        font-style: normal;
        font-weight: 500;
        line-height: 15.69px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        padding-top: 5px;
        padding-left: 5px;
        padding-right: 5px;
        padding-bottom: 5px;
        user-select: none;
        cursor: pointer;
        border: 1px solid var(--colorHover);
    }

@media (min-width:900px) {
    .contentButtonDeselected {
        font-family: secondFont;
        font-size: 14px;
        margin-right: 15px;
        margin-top: 15px;
        padding-top: 11px;
        padding-left: 5px;
        padding-right: 5px;
        min-width: 130px;
        height: 38px;
    }
}

@media (min-width:900px) {
    .contentButtonDeselected:hover {
        font-family: secondFont;
        color: var(--colorHover);
        font-size: 14px;
        margin-right: 15px;
        margin-top: 15px;
        padding-top: 11px;
        padding-left: 5px;
        padding-right: 5px;
        min-width: 130px;
        height: 38px;
        border: 1px solid var(--colorHover);
    }
}

#centerContent {
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#centerContent {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.emptyBox {
    margin-top: auto;
    margin-bottom: auto;
}


#emptyBasket {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: auto;
}

.emptyBasketImage {
    width: 150px;
    user-select: none;
}

@media (min-width:900px) {
    .emptyBasketImage {
        width: 383px;
        user-select: none;
    }
}

.emptyBasketTitle {
    color: var(--textColorDark);
    /* Titre3 */
    font-family: firstFont;
    font-size: 15px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    text-align: center;
}

@media (min-width:900px) {
    .emptyBasketTitle {
        color: var(--textColorDark);
        /* Titre3 */
        font-family: firstFont;
        font-size: 40px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        margin-left: auto;
        margin-right: auto;
        margin-top: 30px;
        text-align: center;
    }
}


.mediaBlock {
    margin-bottom: 30px;
}

@media (min-width:900px) {
    .mediaBlock {
        margin-bottom: 70px;
    }
}

.modal2 {
    display: block;
    position: fixed; /* Stay in place */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: hidden;
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0); /* Black w/ opacity */
    transition: background-color 400ms, visibility 400ms;
}

.startScreen {
    background-color: var(--generalBackgroundColor);
    width: 100vw;
    height: 100vh;
    transition: transform 400ms, opacity 1200ms;
}


.middleSection {
    height: calc(100vh - 100px);
    margin-left: 15px; /* Fixed left margin */
    margin-right: 15px; /* Fixed right margin */
    padding: 0px; /* Optional: add padding inside the container */
    box-sizing: border-box; /* Ensures padding and borders are included in width */
    overflow-y: auto; /* Enable scroll if needed */
    overflow-x: hidden;
}
@media (min-width:900px) {
    .middleSection {
        margin-top: 15px;
        margin-left: 148px; /* Fixed left margin */
        margin-right: 148px; /* Fixed right margin */
        height: calc(100vh - 273px);
    }
}

.closeFullScreen {
    width: 25px;
    height: 25px;
    user-select: none;
}



.contentTitle {
    font-size: 16px;
    font-family: firstFont;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    user-select: none;
    display: flex;
    align-items: center;
    margin-top: 0px;
    margin-right: 50px;
    width: 100vw;
    color: var(--textColorDark);
}

    .contentTitle::after {
        content: '';
        flex: 1;
        margin-left: 1rem;
        margin-right: 1rem;
        height: 1px;
        background-color: #000;
    }

@media (min-width:900px) {
    .contentTitle {
        font-size: 24px;
        font-family: firstFont;
        font-style: normal;
        font-weight: 400;
        line-height: 26.9px;
        user-select: none;
        display: flex;
        align-items: center;
        margin-top: 0px;
        color: var(--textColorDark);
    }

        .contentTitle::after {
            content: '';
            flex: 1;
            margin-left: 1rem;
            margin-right: 0px;
            height: 1px;
            background-color: #000;
        }
}

.contentImage {
    position: relative;
    width: 40vw;
    height: 40vw;
    background: var(--imageBackground);
    margin: 10px;
    user-select: none;
    cursor: pointer;
}

@media (min-width:900px) {
    .contentImage {
        position: relative;
        width: 230px;
        height: 230px;
        background: var(--imageBackground);
        margin: 10px;
        user-select: none;
        cursor: pointer;
    }
}

.contentImageFavorites {
    width: 40vw;
    height: 40vw;
    background: var(--imageBackground);
    margin: 10px;
    user-select: none;
    display: none;
    cursor: pointer;
}

@media (min-width:900px) {
    .contentImageFavorites {
        width: 230px;
        height: 230px;
        background: var(--imageBackground);
        margin: 10px;
        user-select: none;
        display: none;
        cursor: pointer;
    }
}

.centerImage {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    user-select: none;
}

@media (min-width:900px) {
    .centerImage {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 230px;
        user-select: none;
    }
}


#mediaContent {
    max-width: 100%;
    max-height: 100%;
    user-select: none;
}

@media (min-width:900px) {
    #mediaContent {
        max-width: 230px;
        max-height: 230px;
        user-select: none;
    }
}

.playButton {
    position: absolute;
    margin-right: 18px;
    margin-bottom: 18px;
    width: 35px;
    height: 35px;
}
/* 
====== Preview Popup ======
*/
/* The Modal (background) */
#popup1 {
    overflow: hidden;
}

.modal {
    visibility: hidden;
    display: block;
    position: fixed; /* Stay in place */
    left: 0;
    top: 0;
    width: 100svw; /* Full width */
    height: 100svh; /* Full height */
    overflow: hidden;
    background-color: rgba(0,0,0,0.2); /* Black w/ opacity */
    transition: background-color 400ms, visibility 400ms;
}

.previewPopupBox {
    width: 100%; /* Could be more or less, depending on screen size */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0);
    transition: transform 400ms, opacity 1200ms;
}

/*  @media (width > calc(height + 130px)) */
@media (orientation: landscape) {
    /* Modal Content/Box */
    .modal-content1 {
        position: relative;
        background-color: rgba(255, 255, 255, 1);
        margin-top: auto;
        margin-bottom: 0px;
        margin-left: auto;
        margin-right: auto;
        padding: 20px;
        border-radius: 20px;
        background: var(--windowBackgroundColor);
        width: calc(100svh - 130px);
        height: 100svh;
        max-width: 760px;
        max-height: 936px;
        user-select: none;
    }
}

/* @media (width <= calc(height + 130px))  */
@media (orientation: portrait) {
    /* Modal Content/Box */
    .modal-content1 {
        position: relative;
        background-color: rgba(255, 255, 255, 1);
        margin-top: auto;
        margin-bottom: 0px;
        margin-left: auto;
        margin-right: auto;
        padding: 20px;
        border-radius: 20px;
        background: var(--windowBackgroundColor);
        width: 100vw;
        height: calc(100vw + 130px);
        max-width: 760px;
        max-height: 936px;
        user-select: none;
    }
}


/* Desktop */
@media (min-height:900px) {
    .modal-content1 {
        margin-bottom: auto;
    }
}



#closeButtonContainer {
    text-align: right;
}

.closeButton {
    width: 15px;
    height: 15px;
    text-align: right;
    user-select: none;
}
/* Desktop */
@media (min-width:900px) {
    .closeButton {
        width: 25px;
        height: 25px;
        text-align: right;
        user-select: none;
    }
}

.previewButton {
    background-color: rgb(13, 34, 55);
    border: none;
    color: rgb(255, 255, 255);
    padding: 10px 40px;
    text-align: center;
    font-size: 44px;
    font-weight: bold;
    display: inline-block;
    margin: 90px 50px;
    cursor: pointer;
    min-width: 250px;
    user-select: none;
    border-radius: 30px;
    user-select: none;
}

    .previewButton:hover {
        background-color: rgb(13, 34, 55);
        color: white;
        user-select: none;
    }

.centerButtons {
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
}

.instruction-box {
    background-color: var(--favoriteInstructionBackground);
    border: none;
    margin-top: 15px;
    color: rgb(255, 255, 255);
    text-align: center;
    display: inline-block;
    border-radius: 20px;
    user-select: none;
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.favorite-text {
    text-align: left;
    color: var(--textColorDark);
    user-select: none;
    margin: auto;
}

.favorites {
    text-align: right;
    width: 40px;
    height: 40px;
    user-select: none;
}


/* Custom style to prevent carousel from being distorted
       if for some reason image doesn't load */
@media (orientation: portrait) {
    .carousel-item {
        max-height: calc(100vw - 30px);
        user-select: none;
        background: rgba(100,100,100,0.5);
    }
}

@media (orientation: landscape) {
    .carousel-item {
        max-height: calc(100vh - 30px);
        user-select: none;
        background: rgba(100,100,100,0.5);
    }
}
/* Desktop */
@media (orientation: portrait) and (min-width:900px) {
    .carousel-item {
        max-height: 100%;
        user-select: none;
        background: rgba(100,100,100,0.5);
    }
}

@media (orientation: landscape) and (min-height:900px) {
    .carousel-item {
        max-height: 100%;
        user-select: none;
        background: rgba(100,100,100,0.5);
    }
}

@media (orientation: portrait) {
    .carouselImageBlock {
        height: calc(100vw - 30px);
        width: calc(100vw - 30px);
        background: var(--imageBackground);
        user-select: none;
        cursor: pointer;
    }
}

@media (orientation: landscape) {
    .carouselImageBlock {
        height: calc(100vh - 150px);
        width: calc(100vh - 150px);
        background: var(--imageBackground);
        user-select: none;
        cursor: pointer;
    }
}

/* Desktop */

/* Desktop */
@media (orientation: portrait) and (min-width:900px) {
    .carouselImageBlock {
        max-height: 700px;
        max-width: 700px;
        cursor: pointer;
    }
}

@media (orientation: landscape) and (min-height:900px) {
    .carouselImageBlock {
        max-height: 700px;
        max-width: 700px;
        cursor: pointer;
    }
}

.centerCarouselImage {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    user-select: none;
    object-fit: cover;
}


.carrouselImage {
    max-width: 100%;
    max-height: 100%;
    user-select: none;
}

.carousel-previous {
    width: 40px;
    height: 40px;
    margin-left: 0px;
}

@media (orientation: landscape) and (max-height:600px) {
    .carousel-previous {
        width: 40px;
        height: 40px;
        margin-left: 0px;
    }
}
/* Desktop */
@media (min-width:900px) and (min-height:600px) {
    .carousel-previous {
        width: 80px;
        height: 80px;
        margin-left: -130px;
    }
}

.carousel-next {
    width: 40px;
    height: 40px;
    margin-right: 0px;
}

@media (orientation: landscape) and (max-height:600px) {
    .carousel-next {
        width: 40px;
        height: 40px;
        margin-right: 0px;
    }
}

/* Desktop */
@media (min-width:900px) and (min-height:600px) {
    .carousel-next {
        width: 80px;
        height: 80px;
        margin-right: -130px;
    }
}





#favoriteBar {
    justify-content: center;
}

.carousel-caption {
    display: flex;
    top: 0;
    left: 0px;
    right: 0px;
    bottom: auto;
    justify-content: center;
    align-items: center;
}

/* Desktop */
@media (min-width:900px) {
    .carousel-caption {
        display: flex;
        top: 0;
        left: 10px;
        right: 10px;
        bottom: auto;
        justify-content: center;
        align-items: center;
    }
}

#carouselImageDescription {
    width: fit-content;
    height: fit-content;
    padding-left: 5px;
    padding-right: 5px;
    background: rgba(255, 255, 255, 1);
    align-items: center;
    user-select: none;
    border-radius: 10px;
    margin-left: 5px;
    position: absolute;
    left: 0;
}

/* Desktop */
@media (min-width:900px) {
    #carouselImageDescription {
        width: fit-content;
        padding: 5px;
        background: rgba(255, 255, 255, 1);
        user-select: none;
        border-radius: 25px;
        justify-content: left;
        align-items: flex-start;
        text-align: left;
        display: inline-block;
        margin-left: 5px;
        position: absolute;
        left: 0;
    }
}

.recdate {
    padding: 0;
    font-family: firstFont;
    color: var(--textColorDark);
    font-size: 2vw;
    font-style: normal;
    font-weight: 500;
    user-select: none;
}


@media (orientation: landscape) {
    .recdate {
        padding: 0;
        font-family: firstFont;
        color: var(--textColorDark);
        font-size: 2vh;
        font-style: normal;
        font-weight: 500;
        user-select: none;
    }
}

/* Desktop */
@media (min-width:900px) {
    .recdate {
        font-family: firstFont;
        color: var(--textColorDark);
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        user-select: none;
    }
}

.carousel-attraction {
    color: var(--textColorNavbarSelected);
    width: fit-content;
    height: fit-content;
    text-align: center;
    font-family: firstFont;
    font-size: 2vw;
    font-style: normal;
    font-weight: 500;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--textColorNavbarDeselected);
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

@media (orientation: landscape) {
    .carousel-attraction {
        color: var(--textColorNavbarSelected);
        width: fit-content;
        height: fit-content;
        text-align: center;
        font-family: firstFont;
        font-size: 2vh;
        font-style: normal;
        font-weight: 500;
        flex-shrink: 0;
        border-radius: 10px;
        background: var(--textColorNavbarDeselected);
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }
}

/* Desktop */
@media (min-width:900px) {
    .carousel-attraction {
        color: var(--textColorNavbarSelected);
        text-align: center;
        font-family: firstFont;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 15.6px;
        width: fit-content;
        flex-shrink: 0;
        border-radius: 25px;
        background: var(--textColorNavbarDeselected);
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }
}

.frameAndShare {
    height: 102px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
}


.switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    user-select: none;
    padding: 2px;
    user-select: none;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        left: 1px;
        bottom: 2px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: var(--defaultButtonColor);
}

input:focus + .slider {
    box-shadow: 0 0 1px #04AA6D;
}

input:checked + .slider:before {
    -webkit-transform: translateX(18px);
    -ms-transform: translateX(18px);
    transform: translateX(18px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 14px;
    user-select: none;
}

    .slider.round:before {
        border-radius: 50%;
    }

#frameSlide {
    height: 45px;
    left: 0px;
    right: 0px;
    justify-content: center;
    align-items: center;
    display: flex;
    margin-right: 25px;
    margin-left: 25px;
}

.frameSlideText {
    color: var(--textColorDark);
    user-select: none;
    padding-right: 14px;
}


#shareInstruction {
    height: 57px;
    width: 100%;
    left: 0px;
    right: 0px;
    background: var(--shareInstructionColor);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Desktop */
@media (orientation: portrait) and (min-width:900px) {
    #shareInstruction {
        height: 57px;
        width: 100%;
        left: 0px;
        right: 0px;
        background: var(--shareInstructionColor);
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }
}

.shareImageAndText {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    user-select: none;
    margin-right: 25px;
    margin-left: 25px;
}

.shareImage {
    padding-right: 20px;
    user-select: none;
}

.shareText {
    display: inline-block;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shareContentText {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--shareInstructionTextColor);
}


#downloadBar {
    width: 100%;
    position: absolute;
    bottom: 20px;
    justify-content: center;
    align-items: center;
    display: flex;
}

@media (orientation: landscape) and (max-height:600px) {
    #downloadBar {
        width: 100%;
        position: absolute;
        bottom: 10px;
        justify-content: center;
        align-items: center;
        display: flex;
    }
}


.favoriteButton {
    width: 30px;
    height: 30px;
    margin-right: 15px;
    cursor: pointer;
}


@media (orientation: landscape) and (max-height:600px) {
    .favoriteButton {
        width: 25px;
        height: 25px;
        margin-right: 15px;
        cursor: pointer;
    }
}

/* Desktop */
@media (min-width:900px) and (min-height:600px) {
    .favoriteButton {
        width: 40px;
        height: 40px;
        cursor: pointer;
    }
}

.downloadButton {
    display: flex;
    text-align: center;
    color: var(--textColorLight);
    text-decoration: none;
    font-family: firstFont;
    font-size: 10px;
    height: fit-content;
    width: fit-content;
    padding: 5px 10px 5px 40px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 20px;
    border: none;
    background-color: var(--defaultButtonColor);
    background-image: url("../images/downloadButton.svg");
    background-size: auto 50%;
    background-repeat: no-repeat;
    background-position: 13px center;
    user-select: none;
    cursor: pointer;
}

    .downloadButton:hover {
        background-color: var(--pinkHover);
        color: var(--textColorLight);
    }

@media (orientation: landscape) and (max-height:600px) {
    .downloadButton {
        display: flex;
        text-align: center;
        color: var(--textColorLight);
        text-decoration: none;
        font-family: firstFont;
        font-size: 10px;
        height: fit-content;
        width: fit-content;
        padding: 3px 10px 3px 30px;
        justify-content: center;
        align-items: center;
        gap: 5px;
        border-radius: 20px;
        border: none;
        background-color: var(--defaultButtonColor);
        background-image: url("../images/downloadButton.svg");
        background-size: auto 50%;
        background-repeat: no-repeat;
        background-position: 13px center;
        user-select: none;
        cursor: pointer;
    }
}

/* Desktop */
@media (min-width:900px) and (min-height:600px) {
    .downloadButton {
        display: flex;
        text-align: center;
        color: var(--textColorLight);
        text-decoration: none;
        font-family: firstFont;
        font-size: 14px;
        Line-height: 15.69px;
        height: fit-content;
        width: fit-content;
        padding: 10px 20px 10px 40px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 20px;
        border: none;
        background-color: var(--defaultButtonColor);
        background-image: url("../images/downloadButton.svg");
        background-repeat: no-repeat;
        background-position: 13px center;
        user-select: none;
        cursor: pointer;
    }
}

/*Info page */
.statusGood {
    width: 10px;
    height: 10px;
    background: green;
    border-radius: 50%;
    margins: auto;
}

@media (orientation: landscape) and (max-height:600px) {
    .statusGood {
        width: 20px;
        height: 20px;
    }
}


/* Desktop */
@media (min-width:900px) and (min-height:600px) {
    .statusGood {
        width: 20px;
        height: 20px;
    }
}

.statusError {
    width: 10px;
    height: 21px;
    background: red;
    border-radius: 50%;
    margins: auto;
}

@media (orientation: landscape) and (max-height:600px) {
    .statusError {
        width: 20px;
        height: 20px;
    }
}

/* Desktop */
@media (min-width:900px) and (min-height:600px) {
    .statusError {
        width: 20px;
        height: 20px;
    }
}


#park {
    background-color: lightskyblue;
}

.mainSystem {
    background-color: paleturquoise;
}

#subSystem {
    background-color: aquamarine;
}

.soundIcon {
    width: 50px;
    height: 50px;
}