/* Fonts */
@font-face { 
    font-family: 'Posterama-1919'; 
    src: url('./assets/fonts/Posterrama1919.ttf'); 
} 

/* Fade In */
@-webkit-keyframes growIn {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes growIn {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.animated--fade-in {
    -webkit-animation-name: growIn;
    animation-name: growIn;
    -webkit-animation-duration: 200ms;
    animation-duration: 200ms;
    -webkit-animation-timing-function: transform cubic-bezier(0.18, 1.25, 0.4, 1), opacity cubic-bezier(0, 1, 0.4, 1);
    animation-timing-function: transform cubic-bezier(0.18, 1.25, 0.4, 1), opacity cubic-bezier(0, 1, 0.4, 1);
}

.noselect {
    user-select: none;-moz-user-select: none; -webkit-user-select: none;-ms-user-select: none;
}

body {
    background-color: transparent !important;
}

/* #region Main-UI */

#main-glow {
    background-image: url("./assets/glow/glow_lightblue.png");
    position: absolute;
    left: 0px;
    top: 0px;
    width: 1436px;
    height: 1080px;
    z-index: 1;
}
  
#main-title {
    font-size: 41.667px;
    font-family: "Posterama 1919";
    color: rgb(255, 255, 255);
    font-weight: bold;
    line-height: 1.2;
    text-align: left;
    position: absolute;
    left: 36.297px;
    top: 26.583px;
    width: 180px;
    height: 31px;
    z-index: 2;
}

#main-location {
    font-size: 21px;
    font-family: "Posterama 1919";
    color: rgba(255, 255, 255, 0.502);
    font-weight: bold;
    line-height: 1.2;
    text-align: left;
    position: absolute;
    left: 40.313px;
    top: 73.292px;
    width: 341px;
    height: 16px;
    z-index: 2;
  }
  

#main-box-1 {
    border-width: 0px;
    border-color: rgb(0, 0, 0);
    border-style: solid;
    border-width: 2px;
    border-color: rgb(255, 255, 255);
    border-radius: 7px;
    background-color: rgb(167, 167, 167);
    opacity: 0.2;
    position: absolute;
    left: 80px;
    top: 263px;
    width: 314px;
    height: 64px;
    z-index: 3;
}

#main-box-1-title {
    font-size: 10.417px;
    font-family: "Posterama 1919";
    color: rgba(255, 255, 255, 0.2);
    font-weight: bold;
    line-height: 1.2;
    text-align: left;
    position: absolute;
    left: 90.261px;
    top: 271.146px;
    width: 44px;
    height: 9px;
    z-index: 3;
}
  
  
#main-box-1-text {
    font-size: 18.75px;
    font-family: "Posterama 1919";
    color: rgb(255, 255, 255);
    font-weight: bold;
    line-height: 1.2;
    position: absolute;
    left: 89.459px;
    top: 292.063px;
    width: 400px;
    height: 5px;
    z-index: 3;
}

#main-box-2 {
    border-width: 0px;
    border-color: rgb(0, 0, 0);
    border-style: solid;
    border-style: solid;
    border-width: 2px;
    border-color: rgb(255, 255, 255);
    border-radius: 7px;
    background-color: rgb(167, 167, 167);
    opacity: 0.2;
    position: absolute;
    left: 80px;
    top: 352px;
    width: 314px;
    height: 64px;
    z-index: 3;
}

#main-box-2-title {
    font-size: 10.417px;
    font-family: "Posterama 1919";
    color: rgba(255, 255, 255, 0.2);
    font-weight: bold;
    line-height: 1.2;
    text-align: left;
    position: absolute;
    left: 90.261px;
    top: 360.146px;
    width: 400px;
    height: 9px;
    z-index: 3;
}
  
#main-box-2-text {
    font-size: 18.75px;
    font-family: "Posterama 1919";
    color: rgb(255, 255, 255);
    font-weight: bold;
    line-height: 1.2;
    text-align: left;
    position: absolute;
    left: 91.037px;
    top: 381.063px;
    width: 80px;
    height: 15px;
    z-index: 3;
}
  
#main-right-info-esc {
    background-image: url("./assets/Right-Information.png");
    position: absolute;
    left: 0px;
    top: 0px;
    width: 1920px;
    height: 1080px;
    z-index: 0;
}

#main-button-right-box {
    border-width: 0px;
    border-color: rgb(0, 0, 0);
    border-style: solid;
    border-radius: 8px;
    background-image: -moz-linear-gradient( 0deg, rgb(250,215,49) 0%, rgb(250,181,54) 100%);
    background-image: -webkit-linear-gradient( 0deg, rgb(250,215,49) 0%, rgb(250,181,54) 100%);
    background-image: -ms-linear-gradient( 0deg, rgb(250,215,49) 0%, rgb(250,181,54) 100%);
    box-shadow: 0px 0px 30px 0px rgba(250, 187, 53, 0.9);
    position: absolute;
    left: 1140px;
    top: 967px;
    width: 100px;
    height: 70px;
    z-index: 3;
}

#main-button-left-box {
    border-width: 0px;
    border-color: rgb(0, 0, 0);
    border-style: solid;
    border-radius: 8px;
    background-image: -moz-linear-gradient( 0deg, rgb(250,215,49) 0%, rgb(250,181,54) 100%);
    background-image: -webkit-linear-gradient( 0deg, rgb(250,215,49) 0%, rgb(250,181,54) 100%);
    background-image: -ms-linear-gradient( 0deg, rgb(250,215,49) 0%, rgb(250,181,54) 100%);
    box-shadow: 0px 0px 30px 0px rgba(250, 187, 53, 0.9);
    position: absolute;
    left: 681px;
    top: 967px;
    width: 100px;
    height: 70px;
    z-index: 3;
}
  
#main-button-parked-out {
    border-width: 0px;
    border-color: rgb(0, 0, 0);
    border-style: solid;
    border-radius: 8px;
    background-image: -moz-linear-gradient( 0deg, rgb(255,101,26) 0%, rgb(255,35,35) 100%);
    background-image: -webkit-linear-gradient( 0deg, rgb(255,101,26) 0%, rgb(255,35,35) 100%);
    background-image: -ms-linear-gradient( 0deg, rgb(255,101,26) 0%, rgb(255,35,35) 100%);
    box-shadow: 0px 0px 30px 0px rgba(255, 46, 33, 0.9);
    position: absolute;
    left: 810px;
    top: 972px;
    width: 300px;
    height: 70px;
    z-index: 3;
}
  
#main-button-parked-out-text {
    font-size: 33.333px;
    font-family: "Posterama 1919";
    color: rgb(255, 255, 255);
    font-weight: bold;
    line-height: 1.2;
    text-align: left;
    position: absolute;
    left: 845.469px;
    top: 985.667px;
    width: 228px;
    height: 25px;
    z-index: 3;
}
  
#main-button-parked-in {
    border-width: 0px;
    border-color: rgb(0, 0, 0);
    border-style: solid;
    border-radius: 8px;
    background-image: -moz-linear-gradient( 0deg, rgb(116, 255, 24) 0%, rgb(20,182,8) 100%);
    background-image: -webkit-linear-gradient( 0deg, rgb(116, 255, 24) 0%, rgb(20,182,8) 100%);
    background-image: -ms-linear-gradient( 0deg, rgb(116, 255, 24) 0%, rgb(20,182,8) 100%);
    box-shadow: 0px 0px 30px 0px rgba(68, 179, 30, 0.9);
    position: absolute;
    left: 810px;
    top: 972px;
    width: 300px;
    height: 70px;
    z-index: 3;
}
  
#main-button-parked-in-text {
    font-size: 33.333px;
    font-family: "Posterama 1919";
    color: rgb(255, 255, 255);
    font-weight: bold;
    line-height: 1.2;
    text-align: left;
    position: absolute;
    left: 854.469px;
    top: 985.667px;
    width: 205px;
    height: 25px;
    z-index: 3;
}
  
  
#main-button-right-arrow {
    background-image: url("./assets/arrow.png");
    transform: scale(0.13);
    position: absolute;
    left: 1020px;
    top: 831px;
    width: 341px;
    height: 342px;
    z-index: 3;
}

#main-button-left-arrow {
    background-image: url("./assets/arrow.png");
    transform: scale(0.13) rotate(180deg);
    position: absolute;
    left: 560px;
    top: 832px;
    width: 341px;
    height: 342px;
    z-index: 4;
}

#main-button-right, 
#main-button-left,
#main-button-middle {
    cursor: pointer;
}

/* #endregion */

/* #region E-Interaction */

/* Fade In */
@-webkit-keyframes growIn_interaction {
    0% {
        transform: scale(0.95);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes growIn_interaction {
    0% {
        transform: scale(0.90);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.animated--interaction-fade {
    -webkit-animation-name: growIn_interaction;
    animation-name: growIn_interaction;
    -webkit-animation-duration: 350ms;
    animation-duration: 350ms;
    -webkit-animation-timing-function: transform cubic-bezier(0.18, 1.25, 0.4, 1), opacity cubic-bezier(0, 1, 0.4, 1);
    animation-timing-function: transform cubic-bezier(0.18, 1.25, 0.4, 1), opacity cubic-bezier(0, 1, 0.4, 1);
}

#interaction {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 1920px;
    height: 1080px;
    z-index: 67;
}

#interaction-key-box {
    border-width: 0px;
    border-color: rgb(0, 0, 0);
    border-style: solid;
    border-width: 2px;
    border-color: rgb(255, 255, 255);
    border-radius: 5px;
    background-color: rgb(167, 167, 167);
    opacity: 0.2;
    position: absolute;
    left: 1658px;
    top: 502px;
    width: 64px;
    height: 64px;
}

#interaction-key-E {
    font-size: 41.667px;
    font-family: "Posterama-1919";
    color: rgb(255, 255, 255);
    font-weight: bold;
    line-height: 1.2;
    text-align: left;
    position: absolute;
    left: 1677.625px;
    top: 507.583px;
    width: 20px;
    height: 30px;
}

#interaction-garage-title {
    font-size: 33.333px;
    font-family: "Posterama-1919";
    color: rgb(255, 255, 255);
    font-weight: bold;
    line-height: 1.2;
    text-align: left;
    position: absolute;
    left: 1733.64px;
    top: 501.67px;
    width: 144px;
    height: 25px;
    letter-spacing: 1px;
}

#interaction-garage-location {
    font-size: 16.667px;
    font-family: "Posterama-1919";
    color: rgba(255, 255, 255, 0.502);
    font-weight: bold;
    line-height: 1.2;
    text-align: left;
    position: absolute;
    left: 1737.66px;
    top: 540.83px;
    width: 160px;
    height: 13px;
    letter-spacing: 0.2px;
}

/* #endregion */


#hilfslinie {
    width: 758px;
    height: 2px;
    background-color: rgb(116, 255, 24);
    margin-top: 944px;
    margin-left: 572px;
    z-index: 100;
}