@font-face {
    font-family: 'gobold';
    src: url('fonts/GoboldBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'allise';
    src: url('fonts/Allise.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'montserrat';
    src: url('fonts/Montserrat-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/* ============ colors =============== */
/*
dark blue   #003C4D
red         #962929
dark green  #004433
dark grey   #160902
white       #E5E2DF
 */


/* general typography */





.title_font {
    font-family: "gobold", sans-serif;
    font-size: 57px;
    color: white;
    filter: drop-shadow(3px 5px 1px #b785ba)
}

.dek_font {
    font-family: "allise", sans-serif;
    font-size: 37px;
}

.drop_shadow {
    filter: drop-shadow(3px 5px 15px #000)
}

.scene_title {
    font-family: "gobold", sans-serif;
    font-size: 67px;
    color: white;
    filter: drop-shadow(3px 5px 1px #b785ba)
}

.scene_nav_dek {
    font-family: "allise", sans-serif;
    font-size: 28px;
    line-height: 32px;
}

.icon {
    filter: drop-shadow(3px 5px 10px #000)
}

.scene_nav_title {
    font-family: "gobold", sans-serif;
    font-size: 17px;
    color: white;
    filter: drop-shadow(1px 3px 1px #b785ba)
}

.hotspot_description {
    font-family: "allise", sans-serif;
    font-size: 28px;
    line-height: 32px;
}


.hotspot_title {
    font-family: "allise", sans-serif;
    font-size: 57px;
}


.tutorial_text {
    font-family: "allise", sans-serif;
    font-size: 37px;
    line-height: 37px;
}

.opening {
	font-family: "allise", sans-serif;
    font-size: 37px;
    line-height: 50px;
}

.scav_ans {
    font-family: "allise", sans-serif;
    font-size: 24px;
    line-height: 24px;
}

.button {
	font-family: "allise", sans-serif;
    font-size: 31px;
    line-height: 31px;
}


@media screen and (max-width: 1000px) and (orientation: landscape) {

.scene_nav_dek {
    font-family: "allise", sans-serif;
    font-size: 17px;
    line-height: 20px;
}

.scene_title {
    font-family: "gobold", sans-serif;
    font-size: 38px;
    color: white;
    filter: drop-shadow(3px 5px 1px #b785ba)
}

.hotspot_description {
    font-family: "allise", sans-serif;
    font-size: 16px;
    line-height: 18px;
}


.hotspot_title {
    font-family: "allise", sans-serif;
    font-size: 38px;
    line-height: 38px;
}

.tutorial_text {
    font-family: "allise", sans-serif;
    font-size: 22px;
    line-height: 22px;
}

.button {
    font-family: "allise", sans-serif;
    font-size: 20px;
    line-height: 22px;
}

}


@media screen and (max-width: 800px) and (orientation: portrait) {

.scene_title {
    font-family: "gobold", sans-serif;
    font-size: 38px;
    color: white;
    filter: drop-shadow(3px 5px 1px #b785ba)
}

.hotspot_description {
    font-family: "allise", sans-serif;
    font-size: 26px;
    line-height: 27px;
}

.tutorial_text {
    font-family: "allise", sans-serif;
    font-size: 32px;
    line-height: 33px;
}

}

@media screen and (max-height: 300px) and (orientation: landscape) {


.tutorial_text {
    font-family: "allise", sans-serif;
    font-size: 18px;
    line-height: 19px;
}


}