html {
    height: -webkit-fill-available;
    overflow: hidden;
}

body {
    overflow: hidden;
}

@font-face {
    font-family: 'VeteranTypewriter';
    src: url('../../Fonts/VeteranTypewriter.woff') format('woff');
}

a {
    color: black;
    text-decoration: none; /* no underline */
}

    a:hover {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

@media screen and ( orientation:portrait ) {
    .Landscape {
        display: none;
    }
}

@media screen and ( orientation:landscape ) {
    .Landscape {
        position: absolute;
        display: block;
        top: 0;
        height: 100vh;
        left: 0;
        right: 0;
        z-index: 2;
        color: white;
        font-family: VeteranTypewriter;
        font-size: 65px;
        background-image: url( '../../Images/SecretSeries/TM_TM_BACKGROUND.png');
    }
}

.HeaderImage {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    width: 100%;
}

.HeaderText {
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    width: 100%;
    text-align: center;
    font-family: VeteranTypewriter;
    font-size: 6vw;
    background-color: #D7CEC2;
    padding-left: 20px;
    padding-right: 20px;
}

.MainContainer {
    position: absolute;
    top: 0;
    bottom: 0vh;
    left: 0;
    right: 0;
    background-image: url( '../../Images/SecretSeries/TM_TM_BACKGROUND.png');
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
 
    height: 100dvh;
}


.ENVELOPEImage {
    width: 80%;
}

.TaskImage {
    width: 27vh;
    max-width: 534px;
}
.LeftTasks {
    position: absolute;
    left: 5px;
    top: 80px;
    width: 50%;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.RightTasks {
    position: absolute;
    right: 5px;
    top: 80px;
    width: 50%;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.TaskText {
    font-family: VeteranTypewriter;
    position: absolute;
    top: 13%;
    left: -22%;
    /* transform: translateX(-50%); */
    font-size: 2.4vh;
    width: 100%;
    text-align: center;
}

.BackButton {
    top: 18vw;
    position: absolute;
    z-index: 1;
    width: 100px;
    margin-left: 7px;
}
.BackButtonImage {
    width: 28vw;
}
.Task1Image {
    position: absolute;
    top: 13%;
    left: 0;
}

.Task2Image {
    position: absolute;
    top: 7%;
    right: 0;
    text-align: right;
}

.Task3Image {
    position: absolute;
    top: 28%;
    left: 0;
}

.Task4Image {
    position: absolute;
    top: 24%;
    right: 0;
    text-align: right;
}

.Task5Image {
    position: absolute;
    top: 43%;
    left: 0;
}
.Task6Image {
    position: absolute;
    top: 39%;
    right: 0;
    text-align: right;
}

.Task7Image {
    position: absolute;
    top: 58%;
    left: 0;
}

.Task8Image {
    position: absolute;
    top: 54%;
    right: 0;
    text-align: right;
}

.Task9Image {
    position: absolute;
    top: 73%;
    left: 0;
}

.Task10Image {
    position: absolute;
    top: 69%;
    right: 0;
    text-align: right;
}