﻿


body {
    line-height: 1.1 !important;
    letter-spacing: 0.6px !important;
}


#editor-inner-container-one-tile {
    display: grid;
    grid-template-columns: 35% 30% 30%;
    grid-template-rows: 50px auto;
}

#editor-inner-container-two-tile {
    display: grid;
    grid-template-columns: 45% 10% 45%;
    grid-template-rows: 50px auto;
    grid-column: 3;
}

#editor-inner-container-three-tile {
    display: grid;
    grid-template-columns: 27% 10% 27% 10% 27%;
    grid-template-rows: 50px auto;
}

#editor-container-tile {
    width: 80vw;
    min-width: 1200px;
    max-width: 1400px;
    height: 550px
}

#column {
    justify-content: center;
    align-items: center;
}

.all-colour{
    padding: 10px;
    border-radius: 5px;
    font-size: 0.8rem;
    margin-bottom: 2vh;
}

.font-text-input{
    margin-left: 5px;
}



#leftContainer-two-tile {
    display: flex;
    flex-direction: column;
    margin-left: 120px;
    margin-top: 20px;
    max-width: 600px;
}

#rightContainer-two-tile {
    display: flex;
    flex-direction: column;
    margin: 20px;
    grid-column: 3;
    margin-left: 50px;
    margin-top: 20px;
    max-width: 600px
}

#middleContainer-three-tile {
    display: flex;
    flex-direction: column;
    width: 70%;
    margin: 5px;
    grid-column: 3;
    margin-left: 50px;
    margin-right: 25px;
    margin-top: 20px
}

#rightContainer-three-tile {
    display: flex;
    flex-direction: column;
    width: 70%;
    margin: 20px;
    grid-column: 5;
    margin-right: 50px;
    margin-top: 20px;
}

#leftContainer-three-tile {
    display: flex;
    flex-direction: column;
    width: 70%;
    margin: 20px;
    grid-column: 1;
    margin-left: 70px;
    margin-top: 20px
}

.editor-inner-container {
    height: 100%;
    background: white;
    border: 3px solid black;
    margin: 10px;
}

.question-link {
    margin: 10px;
}

.translation-input {
    margin-left: 10px;
}

#translation-input-label {
    padding: 10px;
}

#questionContainer {
    position: absolute;
    height: 100%;
    width: 100%;
}

.question-link.active {
    background-color: #AFE1AF;
    opacity: 1;
}

#tile-containers {
    display: flex;
    position: fixed;
    width: 100%;
    height: 100%;
    justify-content: space-between;
    margin-top: 20px;
}

.top-text-3style-right {
    margin-right: 2vw;
}

.choice-text-3tile-right {
    margin-right: 2vw;
}

.item3container-3tile {
    width: 30vw;
}

.item3container-2tile {
    width: 43%;
    margin-right: 20px;
}



#leftContainer-one-tile {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    margin: 20px;
    margin-left: 5vh;
    margin-right: 5vh;
}

/*#middlecontainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    border-radius: 10px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 65%;
}*/

#middlecontainer {
    display: flex;
     flex-direction: column; 
    /*flex-wrap: wrap;*/
    justify-content: center;
    align-items: center;
    padding: 10px;
    border-radius: 10px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 65%;
}

#rightContainer-one-tile {
    grid-column: 3;
    display: flex;
    flex-direction: column;
    margin: 20px
}

#middleContainer-one-tile {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    margin: 20px;
    justify-content: center;
    align-items: center
}

#deleteTile-label{
    justify-content: center !important;
}


.delete-tile-choice {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 5px;
}

.left-arrow-label, .right-arrow-label {
    cursor: pointer;
    margin: 5px;
    align-self: start;
}

.right-arrow-label {
    transform: translate(-20px, 0)
}

.left-arrow-label {
    justify-self: start;
    grid-column: 1 / span 3;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    font-size: 0.9em;
    margin-bottom: 10px;
}

label {
    display: flex !important;
    align-items: center !important;
    JUSTIFY-CONTENT: space-between !important;
}


.right-arrow-label {
    justify-self: end;
    grid-column: 1 / span 5;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    font-size: 0.9em;
    margin-bottom: 10px;
}

.left-arrow-button {
    cursor: pointer;
    background: none;
    padding: 0;
    border: none;
    padding-top: 5px;
}

.right-arrow-button {
    cursor: pointer;
    background: none;
    padding: 0;
    border: none;
    padding-top: 5px;
}

.arrow-image {
    height: 35px;
}

.add-tile-button {
}



.logo-image-drop-area {
    border: 2px solid black;
    border-radius: 5px;
    padding: 10px
}

.add-background-image {
    border: 2px solid black;
    border-radius: 5px;
    padding: 10px
}



.divider {
    background: linear-gradient(-80deg, transparent 49.5%, black 49.5%, black 50.5%, transparent 50.5%);
    grid-row: 1 / -1;
    height: 760px;
    width: 190px
}

.page-options.active {
    background-color: #50C878;
}

.image-upload-status.no-image {
    background-color: rgba(255, 0, 0, 0.5);
    padding: 10px;
    border-radius: 5px;
}

.image-upload-status.loadingimage {
    background-color: #37a9e6
}

.image-upload-status.image.loaded-image {
    background-color: #2cb835;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.logo-uploaded {
    display: none;
    padding-bottom: 10px;
    text-align: center;
}

    .logo-uploaded.active {
        display: block;
    }

#divider-two-tile-1 {
    grid-column: 2;
}

#divider-three-tile-1 {
    grid-column: 2;
}


#divider-three-tile-2 {
    grid-column: 4;
}

.user-choices {
    margin: 10px;
}


#question-selection {
    display: flex;
    justify-content: center;
}

body.white-font {
    color: white;
    background-color: black;
}

body.grey-font {
    color: #1b1b1b;
    background-color: white;
}

.form-input {
    margin: 10px;
}

.textarea-input {
    width: 400px;
}


#spinnerContainer {
    display: none;
    position: fixed;
    top: 30vh;
    left: 80vh;
    width: 400px;
    height: 400px;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center
}

#spinner {
    border: 16px solid #f3f3f3;
    border-top: 16px solid #3498db;
    border-radius: 50%;
    width: 200px;
    height: 200px;
    animation: spin 2s linear infinite;
    /*    position: absolute;
    top: 50%;
    left: 50%;*/
    transform: translate(-50%, -50%);
}

#spinnerContainer #closeButton {
    background: none;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background-image: url('/images/delete-tile.png');
    background-size: cover;
    background-repeat: no-repeat;
}


/* Spinner animation */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.viewOuter {
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100%;
    width: 100%;
    font-family: "raleway",sans-serif !important;
    font-style: normal !important;
    font-weight: 500;
    background-color: black !important;
    text-shadow: -1px -1px 2px rgba(0, 0, 0, 0.8), -1px -1px 2px rgba(0, 0, 0, 0.8), -1px -1px 2px rgba(0, 0, 0, .8);
    color: white;
}

/*LIVE VIEW*/

.live-view {
    height: 100% !important;
    width: 100% !important;
}

.live-view-tile {
    width: 100vw !important;
}


/*
PREVIEW*/


.tile-containers {
    display: flex;
    position: fixed;
    width: 100%;
    height: 100%;
    justify-content: space-between;
}

.item1container {
    /*position: absolute;*/
    /*    left:2%;
    top:2%;*/
    /*left: 2vh;
    top: 2vh;*/
    width: 30vw;
    height: 100%;
}

.item1containerstyle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    align-items: center;
}

.item1container-center {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center;
    height: 100%;
    -webkit-align-items: center;
    align-items: center;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}

.logo2 {
    align-self: end;
    -webkit-align-self: flex-end;
}


.itemcontainerstyle {
    display: flex;
    flex-direction: column;
    justify-content: start;
    height: 100%;
    padding-left: 20px;
    vertical-align: top;
}

.itemcontainerstyle-center {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%
}

.itemcontainerstyle-end {
    display: flex;
    flex-direction: column;
    justify-content: end;
    height: 100%;
}

.leftcontainerstyle {
    align-items: start;
    width: 45vw;
}


.leftcontainerstyle-1tile {
    align-items: start;
    width: 45vw;
}

.leftcontainerstyle-2tile {
    align-items: start;
    width: 45vw;
}


.leftcontainerstyle-3tile {
    align-items: start;
    width: 27vw;
}

.middlecontainerstyle {
    align-items: start;
}


.rightcontainerstyle-1tile {
    align-items: end;
    padding-right: 20px;
}

.rightcontainerstyle-2tile {
    align-items: end;
}

.rightcontainerstyle-3tile {
    align-items: end;
    padding-right: 20px;
}

.button-holder {
    display: flex;
    margin-bottom: 40px;
    justify-content: center;
    align-items: flex-end;
    height: 100%;
    width: 80%;
    /*    position: relative; **23
    bottom: 5%;
    left: -8%*/
}


.button-holder-end {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    height: 100%;
    width: 100%;
    margin-bottom: 20px;
}


.button-holder-center-text {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    height: 100%;
    width: 100%;
    margin-bottom: 20px;
}




#preview {
    display: none;
    position: fixed;
    z-index: 100;
    top: 0vh;
    left: 0vw;
    width: 100%;
    background-color: white;
    color: white;
    right: 0vh;
}

.ChoiceText {
    font-size: 1.4em;
}

.close {
    color: white;
    float: right;
    font-size: 50px;
    font-weight: bold;
    z-index: 2000;
}

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

.user-input {
    margin: 10px;
}

#preview.active {
    display: flex;
    flex-direction: column;
}


.tile {
    max-height: 2000px;
    width: 100%;
    background-size: cover;
    position: absolute;
    background-repeat: no-repeat;
}

.loaded-image {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#polygon-tile3-3tile {
    clip-path: polygon(74.5% 0, 100% 0, 100% 100%, 30% 400%);
    -webkit-clip-path: polygon(74.5% 0, 100% 0, 100% 100%, 30% 400%);
}

/*#polygon-tile1-3tile {
    clip-path: polygon(0 0, 100% 0, 87% 100%, 20% 100%, 0 100%);
}*/

#polygon-tile2-3tile {
    clip-path: polygon(36.5% 0, 100% 0, 87% 100%, 21% 140%);
    -webkit-clip-path: polygon(36.5% 0, 100% 0, 87% 100%, 21% 140%);
}

#polygon-tile2-2tile {
    clip-path: polygon(55.5% 0, 100% 0, 100% 100%, 40% 140%);
    -webkit-clip-path: polygon(55.5% 0, 100% 0, 100% 100%, 40% 140%);
}


/*#polygon-tile1-2tile {
    clip-path: polygon(0 0, 100% 0, 87% 100%, 20% 100%, 0 100%);
}
*/
/*#polygon-tile1-3tile::after {
    background: linear-gradient(to right, transparent, black 800px);
}*/

.polygoncontainer {
    height: 100vh;
    width: 100vw;
    position: fixed;
}


#tile1-2tile {
    opacity: 0;
    /*animation: slide-in 0.3s 0.6s forwards;*/
    animation: slide-in 0.3s 0.3s forwards;
}

.item1container-1tile,
.item3container-1tile {
    opacity: 0;
    animation: slide-in 0.3s 0.8s forwards;
}

#tile1-1tile {
    opacity: 0;
    animation: slide-in 0.3s forwards;
}


#tile2-2tile {
    opacity: 0;
    /*animation: slide-in 0.3s forwards;*/
    animation: slide-in 0.3s forwards;
}



#tile1-3tile {
    opacity: 0;
    animation: slide-in 0.3s 0.6s forwards;
}

#tile2-3tile {
    opacity: 0;
    animation: slide-in 0.3s 0.3s forwards;
}

#tile3-3tile {
    opacity: 0;
    animation: slide-in 0.3s forwards;
}

#top-text-1tile-right,
#top-text-1tile-left,
choice-1tile-left {
    animation: slide-in 0.3s forwards;
}
/*
#tile2-2tile {
    opacity: 0;
    animation: slide-in 0.2s 0.8s forwards;
}

#tile2-3tile {
    opacity: 0;
    animation: slide-in 0.2s 0.8s forwards;
}

#tile3-3tile {
    opacity: 0;
    animation: slide-in 0.2s 1.6s forwards;
}
*/
.logo1,
.logo2 {
    max-height: 50px
}

.item1container-2tile,
.item3container-2tile {
    opacity: 0;
    /*animation: slide-in 0.3s 0.9s forwards;*/
    animation: slide-in 0.3s 1.2s forwards;
}

.item1container-3tile,
.item2container-3tile,
.item3container-3tile {
    opacity: 0;
    animation: slide-in 0.3s 1.2s forwards;
}

/*central navigation*/
.item1container-center,
.item2container-right,
.item2container-right {
    opacity: 0;
    animation: slide-in 0.3s 0.6s forwards;
}



@keyframes slide-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes slide-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}



/*.top-text {
    margin-block-start: 0em;
    margin-block-end: 0em;
    font-size: 1.4em;
    font-weight: 500;
    letter-spacing: 1.1px;h;
    text-align: start
}*/

#top-text-1tile-left {
    display: flex;
    justify-content: start;
    width: 100%;
}


#choice-text-3tile-right {
    display: flex;
    justify-content: end;
    width: 100%
}

#top-text-3tile-right {
    display: flex;
    justify-content: end;
}


#view-q2-1tile {
    text-align: end;
    flex-shrink: 0;
}

#view-q2-2tile {
    text-align: end;
    flex-shrink: 0;
}

#view-q2-3tile {
    text-align: start;
    width: 100%;
}

#view-choice-1tile-right, #808080
#view-choice-2tile-right {
    text-align: end;
    padding-top: 10px;
}


#view-choice-1tile-left,
#view-choice-2tile-left {
    padding-top: 10px;
}


#view-choice-3tile-left,
#view-choice-3-tile-right {
    padding-top: 10px;
    width: 100%;
}
/*#choice-1tile-left {
    position: fixed;
    top: 15%;
    left: 5%;
    height: auto;
    width: 30%;
}*/
#top-text-1tile-right {
    display: flex;
    justify-content: end;
    width: 100%
}

#view-lower-center {
    padding-top: 10px;
}


@media (max-height: 650px) {
    .middlecontainer{
        margin-left: 5vw;
        margin-right: 5vw;
    }

}


/*@media (min-width: 1500px and (max-width: 1700px)) {
    h2 {
        font-size: 4vh !important;
    }

    .ChoiceText {
        font-size: 2vh !important;
    }

    .choice-text-single {
        font-size: 4em !important;
    }

    .choice-button {
        font-size: 24px !important;
    }

    #view-text-center {
        font-size: 4vh !important;
    }

    #view-choice-center {
        font-size: 2.6vh !important;
    }

    #view-lower-center {
        font-size: 2vh !important;
    }
}*/


/*@media (min-width: 1500px) {
    h2{
        font-size: 3vh !important;
    }

    .ChoiceText{
        font-size: 2vh !important;
    }

    .choice-text-single{
        font-size: 4em !important;
    }

    .choice-button{
        font-size: 24px !important;
    }

    #view-text-center {
        font-size: 4vh !important;
    }

    #view-choice-center{
        font-size: 2.2vh !important;
    }

    #view-lower-center {
        font-size: 2vh !important;
    }


}*/
/*
@media (min-width: 1500px) {
    #questionContainer {
        font-size: 2em;
    }
}*/
/*#top-text-3tile-left{
    position: fixed;
    top: 5%;
    left: 2%;
    height: auto;
    width: 25%
}

#choice-3tile-left {
    position: fixed;
    top: 10%;
    left: 2%;
    height: auto;
    width: 25%;
}

#choice-text-3tile-center {
    position: fixed;
    top: 10%;
    left: 35%;
    height: auto;
    width: 30%;

}

#top-text-3tile-right {
    position: fixed;
    top: 5%;
    left: 80%;
    height: auto;
    width: 20%;
}

#top-text-3tile-right {
    position: fixed;
    top: 5%;
    left: 80%;
    height: auto;
    width: 20%;
}

#choice-text-3tile-right {
    position: fixed;
    top: 10%;
    right: 0%;
    height: auto;
    width: 20%;
    left: 80%;
}

#choice-text-single {
    position: fixed;
    top: 40%;
    left: 35%;
    width: 33%;
    text-align: center;
}*/
#top-text-single {
    text-align: center;
    font-size: 1.5em;
}

#choice-text-single {
    text-align: center;
    font-size: 1.5em;
}

/*#top-text-2tile-left {
    position: fixed;
    top: 5%;
    left: 2%;
    height: auto;
    width: 25%
}

#top-text-2tile-right {
    position: fixed;
    top: 5%;
    left: 80%;
    height: auto;
    width: 20%;
}

#choice-2tile-left {
    position: fixed;
    top: 10%;
    left: 2%;
    height: auto;
    width: 25%;
}

#choice-text-2tile-right {
    position: fixed;
    top: 10%;
    right: 0%;
    height: auto;
    width: 20%;
    left: 80%;
}*/



/*With Logos (adapted heights)*/
/*#top-text-1tile-left-logo {
    position: fixed;
    top: 17%;
    left: 5%;
    height: auto;
    width: 30%;
}

#choice-1tile-left-logo {
    position: fixed;
    top: 22%;
    left: 5%;
    height: auto;
    width: 30%;
}

#top-text-1tile-right-logo {
    position: fixed;
    top: 17%;
    height: auto;
    width: 30%;
}

#top-text-3tile-left-logo {
    position: fixed;
    top: 12%;
    left: 2%;
    height: auto;
    width: 25%;
}

#choice-3tile-left-logo {
    position: fixed;
    top: 17%;
    left: 2%;
    height: auto;
    width: 25%;
}

#choice-text-3tile-center-logo {
    position: fixed;
    top: 17%;
    left: 35%;
    height: auto;
    width: 30%;
}

#top-text-3tile-right-logo {
    position: fixed;
    top: 12%;
    left: 80%;
    height: auto;
    width: 20%;
}

#choice-text-3tile-right-logo {
    position: fixed;
    top: 17%;
    right: 0%;
    height: auto;
    width: 20%;
    left: 80%;
}

#choice-text-single-logo {
    position: fixed;
    top: 47%;
    left: 35%;
    width: 33%;
    text-align: center;
}

#top-text-single-logo {
    position: fixed;
    top: 27%;
    left: 35%;
    width: 33%;
    height: auto;
    text-align: center;
    font-size: 1.5em;
}

#top-text-2tile-left-logo {
    position: fixed;
    top: 12%;
    left: 2%;
    height: auto;
    width: 25%;
}

#top-text-2tile-right-logo {
    position: fixed top: 12%;
    left: 80%;
    height: auto;
    width: 20%;
}

#choice-2tile-left-logo {
    position: fixed;
    top: 17%;
    left: 2%;
    height: auto;
    width: 25%;
}

#choice-text-2tile-right-logo {
    position: fixed top: 17%;
    right: 0%;
    height: auto;
    width: 20%;
    left: 80%;
}*/

.SinglePaneQuestionPosition,
.SinglePaneChoicePosition {
    width: 96%;
    height: auto;
    text-align: center;
    /*    display: flex;
    align-items: center;
    justify-content: center;*/
}


.SinglePaneQuestionPosition2,
.SinglePaneChoicePosition2 {
    width: 96%;
    height: auto;
    /*    display: flex;
    justify-content: center;*/
}


.item2container {
    /*position: absolute;*/
    /*    left:2%;
    top:2%;*/
    /*left: 2vh;
    top: 2vh;*/
    width: 25vw;
    height: 100%;
    text-align: center;
}



.item2containerstyle {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 100%;
}

.item3container {
    /*position: absolute;*/
    /*    right: 2%;
    top: 2%;*/
    /*right: 2vh;
    top: 2vh;*/
    width: 25vw;
    height: 100%;
}


.item3containerstyle {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

.choice-button {
    background-color: #87a894;
    border: none;
    color: white;
    text-align: center;
    display: inline-block;
    font-size: 22px;
    letter-spacing: 1.1px;
    transition-duration: 0.4s;
    cursor: pointer;
    padding: 10px 15px;
    border-radius: 22px;
    margin-left: 10px;
    margin-right: 10px;
    text-shadow: 2px 2px 4px #000000;
    /*        position: fixed; **23
        bottom: 8%;*/
    min-width: 120px;
}

.logo2-image {
    max-width: 18vw;
}

.logo1-image {
    max-width: 18vw;
}



.next-btn {
    width: 12.5vw !important;
    margin-bottom: 20px;
    min-width: 120px;
    height: 6.5vh;
    max-height: 50px;
    max-width: 160px;
    min-height: 45px;
    position: fixed;
    right: 0;
    bottom: 0;
    margin-right: 20px
}

.middlecontainerstyle-3tile{
    align-items: center;
}

#choice-button-left-1tile {
    left: 2%;
}

#choice-button-left-2tile {
    left: 15%;
}

#choice-button-left-3tile {
    left: 2%;
}

#choice-button-right-1tile {
    right: 10%;
}


#choice-button-right-2tile {
    right: 15%;
}

#choice-button-right-3tile {
    right: 5%;
}

#choice-button-middle {
}



#choice-button-middle-1tile {
    right: 49%;
}

/*Background-Colour Slider*/

#close-window-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    position: absolute;
    top: 0;
    left: 0;
}

.close-window-image {
    height: 40px;
}

.colour-settings {
    display: none;
}

    .colour-settings.active {
        display: flex;
        background-color: #f5f5f5;
        position: absolute;
        top: 0;
        left: 30%;
        width: 35%;
        height: auto;
        z-index: 9999;
        border-style: solid;
        border-radius: 20px;
        flex-direction: column;
        align-items: center;
        padding: 20px
    }

#toggle-background-label {
    padding: 20px;
}


.choice-result-button {
    margin-left: 50px;
    margin-right: 5px;
}

.multi-choice-narrative-button {
    margin-right: 50px;
}

.add-subsequent-page {
    margin-right: 50px;
    margin-left: 50px;
}

.colour-container {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    display: none;
}

    .colour-container.active {
        display: flex;
    }

.colour {
    width: 100px;
    height: 100px;
    cursor: pointer;
    border: 2px solid #000;
    transition: transform 0.2s;
    background-color: #ffffff;
}

.color:hover {
    transform: scale(1.1);
}

.slider {
    width: 100px;
    -webkit-appearance: none;
    appearance: none;
    height: 5px;
    background: #ddd;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

    .slider:hover {
        opacity: 1;
    }

.view-text {
    border-radius: 10px;
    margin-top: 0;
    max-width: 100%;
    margin-block-end: 0;
    margin-block-start: 0;
    font-size: 1.2rem;
}

.textcontainer {
    border-radius: 10px;
    width: fit-content
}

textcontainer-end {
    border-radius: 10px;
    align-self: flex-end;
    width: fit-content
}

.view-top-text {
    border-radius: 10px;
    max-width: 100%;
    font-size: 2rem;
}

#view-text-center {
    text-align: center;
    border-radius: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 2.2rem;
    padding-left: 10px;
    padding-right: 10px;
}

#view-choice-center {
    font-size: 1.3rem;
    padding: 10px;
    padding-bottom:0px;
    padding-top:0.3em;
    text-align: center;
}
/*
h1 {
    font-size: 2.3em !important
}*/

h2 {
    margin-block-start: 0em;
    margin-block-end: 0em;
    font-weight: 500;
    letter-spacing: 0.6px;
    font-size: 2rem
}

#top-text-single {
    font-size: 1rem
}


.item1container-3tile {
    width: 22% !important;
}

.item2container-3tile {
    width: 35% !important;
}

