@font-face {
     font-family: GothamBook;
     src: url(media/Gotham-Book7f34eb053257cab413dc.otf);
}

/** {
     font-family: GothamBook;
}*/

body {
     margin: 0%;
     background-color: wheat;
     user-select: none;
}

.bot-image-small {
     position: absolute;
     bottom: 0%;
     right: 0%;
     width: 0px;
     height: 0px;
     border-radius: 50%;
     object-fit: contain;
     align-self: end;
     cursor: pointer;
     transition: width 0.35s ease-out, height 0.35s ease-out;
     transform: translate(-50%, -50%);
     border: white solid 1px;
}

.chatbot {
     position: absolute;
     right: 20%;
     bottom: 5%;
     width: 70%;
     max-height: 90%;
     max-width: 500px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     transition: max-height 0.6s ease-out;
     font-family: GothamBook;
     
     -webkit-touch-callout: none; /* iOS Safari */
     -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
     -moz-user-select: none; /* Old versions of Firefox */
     -ms-user-select: none; /* Internet Explorer/Edge */
     user-select: none;
}

.chat-container {
     width: 100%;
     height: auto;
     overflow: scroll;
     display: flex;
     flex-direction: column-reverse;
     -ms-overflow-style: none;
     scrollbar-width: none;
}

.chat-container::-webkit-scrollbar {
     display: none;
}

.chat {
     /* position: absolute; */
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: end;
     justify-content: start;
     /* overflow: hidden; */
}

.quit-chat {
     position: sticky;
     align-self: end;
     top: 0%;
     width: 20px;
     min-width: 20px;
     height: 20px;
     min-height: 20px;
     background-color: white;
     border-radius: 50%;
     margin-bottom: 10px;
     cursor: pointer;
     padding-right: 1px;
}

.quit-chat::after {
     content: '';
     position: static;
     margin-top: 50%;
     margin-left: 50%;
     font-family: GothamBook;
     transform: translate(-50%, -50%);
     width: 25%;
     height: 25%;
     background-color: black;
     border-radius: 50%;

     pointer-events: none;
     display: flex;
}

.chatbot.reduce .quit-chat::after {
     content: '×';
     width: auto;
     height: auto;
     background-color: transparent;
     border-radius: none;
     transform: translate(-50%, -50%) scale(1.3);
     padding-left: 0.5px;
}

.message {
     height: auto;
     margin-bottom: 3%;
     padding: 10px 20px 10px 20px;
     box-sizing: border-box;
     transition: height 1.2s ease-out;
}

.message.bot:last-of-type, .message.choosen:last-of-type {
     animation: new-message 1.2s ease-in;
}

@keyframes new-message {
     0%, 85% {
          margin: 0;
          padding: 0;
          height: 0%;
          color: transparent;
          visibility: collapse;
     }
     100% {
          height: auto;
     }
}

.message.bot {
     width: 100%;
     color: black;
     background-color: white;
     border-top-right-radius: 8px 8px;
     border-bottom-right-radius: 8px 8px;
     border-top-left-radius: 8px 8px;

}

.message.player {
     width: 70%;
     color: white;
     background-color: black;
     border-top-left-radius: 8px 8px;
     border-bottom-left-radius: 8px 8px;
     border-top-right-radius: 8px 8px;
     cursor: pointer;
     transition: background-color 0.25s ease-out;
}

.message.message.player:not(.choosen):hover {
     background-color: #75614c;
}

.message.player.choosen {
     background-color: #987147;
     cursor: default;
}

/* reduce */
.reduce.chatbot {
     left: auto;
     right: 8%;
     bottom: 1%;
     max-width: 250px;
     max-height: 70%;
}

.reduce .chat-container {
     justify-content: end;
}

.reduce .message:last-of-type {
     margin-bottom: 10%;
}

.reduce .message.bot {
     border-top-left-radius: 8px 8px;
     border-bottom-left-radius: 8px 8px;
     border-top-right-radius: 8px 8px;
     border-bottom-right-radius: 0px;
}

.reduce .message.player {
     border-top-right-radius: 8px 8px;
     border-bottom-right-radius: 8px 8px;
     border-top-left-radius: 8px 8px;
     border-bottom-left-radius: 0px;
}

.reduce .quit-chat {
     /*align-self: start;*/
}

.reduce + .bot-image-small, .hide + .bot-image-small {
     width: 50px;
     height: 50px;
}

/* hide */
.hide > * {
     display: none;
} 

@media screen and (max-width: 500px) {
     .chatbot {
          right: 5%;
     }

     .message {
          margin-bottom: 5%;
     }
}
@font-face {
	font-family: "Gotham-Black";
	src: local("Gotham-Black"),
    url(media/Gotham-Black520408fe3462b1d14d05.otf) format("opentype") tech(color-COLRv1);
}
@font-face {
	font-family: "Gotham-Medium";
	src: local("Gotham-Medium"),
    url(media/Gotham-Mediuma52599fa8cce74bab773.otf) format("opentype") tech(color-COLRv1);
}
@font-face {
	font-family: "Gotham-Book";
	src: local("Gotham-Book"),
    url(media/Gotham-Book7f34eb053257cab413dc.otf) format("opentype") tech(color-COLRv1);
}

@font-face {
	font-family: "Averta-Black";
	src: local("Averta-Black"),
    url(media/Averta-Black9f8ca1636fd880644629.otf) format("opentype") tech(color-COLRv1);
}
@font-face {
	font-family: "Averta-Medium";
	src: local("Averta-Medium"),
    url(media/Averta-Semibold7c84017c0079a6778f2d.otf) format("opentype") tech(color-COLRv1);
}
@font-face {
	font-family: "Averta-Book";
	src: local("Averta-Book"),
    url(media/Averta-Regular685621fb543080e8aff0.otf) format("opentype") tech(color-COLRv1);
}

html,
body,
a-scene {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	font-family: Tahoma, Verdana, Geneva, sans-serif;
	user-select: none;
}

button {
	color: black;
}

.cap {
	text-transform: uppercase;
}

.message,
.pre {
	white-space: pre-line;
}

a-scene {
	position: "fixed";
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

#ui {
	position: fixed;
	z-index: 10000;
	width: 100%;
	height: 100%;
    pointer-events: none;
}

#black-screen {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: black;
	transition-property: opacity;
	transition-duration: 500ms;
	transition-timing-function: ease-in, ease-out;
	opacity: 0;

}
#black-screen.visible {
	opacity: 1;
}

#fullscreenVideoContainer {
	position: absolute;
	z-index: 100;
	width: 100vw;
	height: 100vh;
	background-color: black;
}

#fullscreenVideoContainer > * {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

#loadingscreen{
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: black;
}

#loadingscreen img{
	width: 50%;
	max-width: 800px;
	position: fixed;
	left: 50%;
  	top: 50%;
  	transform: translate(-50%, -50%);
}

#fragranceDescription{
	width: 50%;
	max-width: 600px;
	min-width: 350px;
	max-height: 800px;
	height: 80%;
	background-color: white;
	position: fixed;
	left: 50%;
  	top: 50%;
  	transform: translate(-50%, -50%);
  	box-shadow: 0px 0px 15px black;
  	pointer-events: all;
}

#headPopup{
	margin-top: 20px;
	font-family: Averta-Black;
	font-size: 28px;
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

#shadowedTitle{
	font-size: 60px;
    margin-left: -15px;
    margin-top: -30px;
    color: #f2f2f2;
    position: absolute;
    z-index: -100;
}

.boldText{
	color: black;
}

.goldText{
	color: darkgoldenrod;
	margin-left: 15px;
}

.titleText{
	margin-top: 20px;
	margin-bottom: 10px;
	font-family: "Averta-Medium";
	color: black;
}

.descriptionText{
	font-family: "Averta-Book";
	font-size: 14px;
}

#mainDescription{
	height: 60%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    align-content: center;
    align-items: start;
    justify-items: center;
}

.leftContainer{
	display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.leftContainer img{
	height: 250px;
}

.rightContainer{
	margin-right: 20px;
	margin-left: 25px;
	display: flex;
    align-content: center;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    flex-wrap: nowrap;
}

#intensityRange{
	display: grid;
    grid-template-columns: repeat(5,1fr);
    align-content: center;
    justify-content: start;
    justify-items: start;
    align-items: center;
    margin-left: -10px;
    margin-top: 10px;
}

#intensityRange img{
	height: 40px;
	width: auto;
	margin-right: -10px;
}

#shopContainer{
	margin-top: 50px;
	width: 100%;
    display: flex;
    justify-items: center;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: center;
}

.shopButton{
	width: 50px;
	height: 50px;
	margin: 5px 10px;
	background-color: whitesmoke;
}

#bottomButton{
	display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: space-evenly;
    align-items: center;
    justify-items: center;
    align-content: space-evenly;
    margin-top: 50px;
    font-size: 48px;
}

.light-btn{
	font-family: "Averta-Medium";
	background-color: whitesmoke;
	padding: 10px 5px;
	width: 80%;
    height: 50px;
    border: none;
    font-size: 16px;
    cursor: pointer;
    color: black !important;
}

.dark-btn{
	font-family: "Averta-Medium";
	background-color: black;
	color: white;
	width: 80%;
    height: 50px;
    border: none;
    font-size: 16px;
    cursor: pointer;
}

#chooseLanguage{
	width: 60%;
	max-width: 800px;
	min-width: 350px;
	max-height: 1000px;
	min-height: 50%;
	background-color: white;
	position: fixed;
	padding: 10px;
	left: 50%;
  	top: 50%;
  	transform: translate(-50%, -50%);
  	box-shadow: 0px 0px 15px black;
  	pointer-events: all;
}

#welcomeHeader{
	margin-top: 40px;
	margin-bottom: 40px;
	font-family: Averta-Black;
	font-size: 18px;
    justify-items: center;
    align-content: center;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#welcomeHeader span, #welcomeHeader p{
    justify-items: center;
    align-content: center;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#titleLanguage {
    text-align: center;
}

#titleLanguage img{
	width : 16px;
}

#titleLanguage span{
	font-family: "Averta-Medium";
}

#mainContainer{
	height: 60%;
    justify-items: center;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.buttonContainer{
	display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    font-size: 48px;
}

#languageSelect{
	font-family: "Averta-Medium";
	background-color: #987047;
	border: none;
	border-right: 15px solid #987047;
	color: white;
	width: 80%;
	height: 50px;
	font-size: 16px;
	cursor: pointer;
	margin-bottom: 30px;
	padding: 0 30px;
	outline: none;
}

#languageSelect::after{
    padding: 0 30px;
}

.a-dialog-allow-button {
  background-color: #987047;
  color: white;
}

.a-dialog-deny-button {
  background-color: black;
  color: white;
}

.a-dialog-ok-button {
   background-color: #987047;
   color: white;
 }

@media screen and (orientation: portrait){

	#fragranceDescription{
		width: 90%;
		height: 75%;
	}

	#headPopup{
		margin-top: 10px;
		font-size: 16px;
	}

	#shadowedTitle{
		font-size: 36px;
	    margin-left: 0px;
	    margin-top: -20px;
	}

	#mainDescription{
		margin-left : 20px;
		margin-top: 20px;
	}

	.leftContainer img{
		height: 200px;
	}

	.rightContainer{
		margin-right: 10px;
		margin-left: 0px;
	}

	#intensityRange{
	    margin-top: 0px;
	}

	#intensityRange img{
		height: 30px;
	}

	.light-btn, .dark-btn{
	    font-size: 12px;
	}

	#chooseLanguage{
	    width: 70%;
		height: 60%;
		z-index: 100000;
	}
}