/*<!--
/////////////////////////////////////////////////////////////
/// Escapausorus v1 (2020)
///	A quick and dirty framework to create small adventure game (certified vanilla JS)
/// Author: Stéphanie Mader (http://smader.interaction-project.net)
/// GitHub: https://github.com/RedNaK/escaposaurus
///	Licence: MIT
////////////////////////////////////////////////////////////
-->*/

/*by default there is no margin or padding anywhere*/
@import "compass/css3";

*{ margin: 0px; padding: 0px; }
a{color:#1022CC;}
body{font-family: PT_Mono;
	background-color: #000;
	text-shadow: 0px 0px 30px #00ff9a;

}
h1{
	text-shadow: 0px 0px 50px #00ff9a;
	font-family: ds_terminal;
	font-size: 70;
	animation: titleFlicker 6s linear infinite;
}
/*on veut la lightbox devant*/
.lightbox-container {
	z-index:302;
}

:root{
	--NeonFlickerTime: 5s;
}


video{max-width: 360px;}

@font-face {
    font-family: Roboto;
    src: url('img/fonts/Roboto/Roboto-Light.ttf') format('truetype');
}
@font-face {
    font-family: Odibee;
    src: url('img/fonts/Odibee_Sans/OdibeeSans-Regular.ttf') format('truetype');
}
@font-face {
    font-family: PT_Mono;
    src: url('img/fonts/PT_Mono/PTMono-Regular.ttf') format('truetype');
}
@font-face {
    font-family: ds_terminal;
    src: url('img/fonts/ds_terminal/DS-TERM.ttf') format('truetype');
}

/*size of the countainer defined to fit most used screen resolution*/
/*main div container*/
#main-container{
	max-width: 2300px;
	max-height: 1800px;
	margin: auto;
	height:100%;
	border:1px solid #00ff9a;
	text-align: center;
	position:relative;
	
	background: url(img/Background.png);
	background-position: center;
	background-color:#000000;
	background-repeat: no-repeat;
	background-size:contain;
}
.cligno {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 10;
	background: repeating-linear-gradient(0deg,rgba(0, 0, 0, 0.041) 2px 4px,rgba(0, 255, 0, 0.055) 2px 8px ,rgba(0,0,255,0.08) 1px 10px),repeating-linear-gradient(90deg,transparent 0px 1px, rgba(0, 0, 0, 0.075) 2px 4px);
	opacity:1;
	pointer-events:none;
	animation:screenFlicker 0.02s infinite;
}

@keyframes refresh{0%{bottom:100%}70%{bottom:100%}100%{bottom:0px}}
.refresh {
	float: left;
	width: 200%;
	height: 100px;
	z-index: 8;
	background: linear-gradient(0deg,rgba(0,0,0,0) 0,rgba(255,255,255,.4) 10%,rgba(0,0,0,.1) 100%);
	opacity: .1;
	position: fixed;
	bottom: 0;
	animation: refresh 8s linear infinite;
	animation-name: refresh;
	animation-duration: 8s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-fill-mode: none;
	animation-play-state: running;
}

#main-container-index{
	max-width: 1300px;
	max-height:800px;
	margin: auto;
	height:100%;
	box-shadow:
		0 0 1px 1px #ffffff,
		0 0 4px 4px #00ff9a,
		0 0 1px 1px #073c27;
	text-align: center;
	position:relative;
}

#overlay-index{
	background: url(img/overlayBack.png);
	background-size:cover;

}


#container-homeMission{
	width: 65%;
	height: 95%;
	background-color:#00000080;
	box-shadow:
		0 0 1px 1px #00000080,
		0 0 7px 7px #00000059,
		0 0 7px 7px #00000013;
	color: #00ff9a;
	font-size: 18;
	margin-top:20px;
	padding-bottom:20px;
}

#div-homeMission{
	width: 30%;
	position:absolute;
	left: 35%;
	top: 35%;
	background-color:#000000;
	box-shadow:
		0 0 1px 1px #ffffff,
		0 0 4px 4px #00ff9a,
		0 0 1px 1px #073c27;
	animation: flicker var(--NeonFlickerTime) linear infinite;
	animation-delay: 0.5s;
	padding:5px;
}

#os-name{
	color:#00ff9a;
	text-shadow: 0px 0px 30px #00ff9a;
	font-size:30px;
	font-weight: bold;
	padding:5px;
	box-shadow:
		0 0 1px 1px #ffffff,
		0 0 4px 4px #00ff9a,
		0 0 1px 1px #073c27;
	animation: flicker var(--NeonFlickerTime) linear infinite;
	animation-delay: 0.7s;
	background-color:#000000;
	font-family: PT_Mono;
}

#main-game-div{
	width:100%;
}

/*shared style for app*/
.app-title{
	height:50px;
	background-color: #000000;
	border:1px solid #00ff9a;
	color: #00ff9a;
	text-align:center;
}

.app-title-span{
	font-family: PT_Mono;
	font-size:30px;
}

#col-sm-6{
	size: 50%;
}

/*call app*/
#callApp{
	width:50%;
	position: relative;
	top:5%;
	left: 10%;
	height:auto;
	background-color:#000000;
	overflow: auto;
	
	box-shadow:
		0 0 1px 1px #ffffff,
		0 0 4px 4px #00ff9a,
		0 0 1px 1px #073c27;
	animation: flicker var(--NeonFlickerTime) linear infinite;
	animation-delay: 0.4s;


}

#callApp-help, #callApp-prompt{
	font-size:18px;
	padding:10px;
	text-align: center;
	background-color:#000000;
	color:#00ff9a;
	text-shadow: 0px 0px 30px #00ff9a;
}


.contact-list{
	color:#00ff9a;
	text-shadow: 0px 0px 30px #00ff9a;
	padding:10px;
	text-align: left;
}

.contact-div{
	font-size:16px;
	text-align: left;
	margin-bottom:5px;
	font-weight: bold;
}

.contact-div:hover{
	background:#000000;
	cursor: pointer;
	color:#00ff9a;
	text-shadow: 0px 0px 30px #00ff9a;
}

.contact-avatar{
	width:36px;
	height:36px;
	margin-right:5px;
}

.no-call{
	font-weight: normal;
	font-style: italic;
	color:#aaaaaa;
}

.already-called{
	font-weight: normal;
}

/* udisk app*/
#folderApp{
	width: 50%;
	height:80%;
	position:relative;
	top: 5%;
	right: -40%;
	overflow: auto;
	background-color:#000000;
	box-shadow:
		0 0 1px 1px #ffffff,
		0 0 4px 4px #00ff9a,
		0 0 1px 1px #073c27;
	animation: flicker var(--NeonFlickerTime) linear infinite;
	animation-delay: 0.9;

}

#folderApp-content{
	padding:10px;
	text-align: left;
}

#overlay-index{
	position:absolute;
	z-index:310;
	left:0%;
	top:0%;

	width:100%;
	height:100%;
	box-shadow:
		0 0 1px 1px #ffffff,
		0 0 4px 4px #00ff9a,
		0 0 1px 1px #073c27;
	animation: flicker var(--NeonFlickerTime) linear infinite;
	animation-delay: 1.2;

	background-color:#000;
	text-align: center;
}

/*the "windows" we open for video and message/password*/
#callVideo-window,
.callVideo-window{
	width: 20%;
	position: relative;
	top: -90%;
	left: 40%;
	background-color: #000000;
	border:1px solid #00ff9a;
	box-shadow:
		0 0 1px 1px #ffffff,
		0 0 4px 4px #00ff9a,
		0 0 1px 1px #073c27;
	animation: flicker var(--NeonFlickerTime) linear infinite;
	color: #00ff9a;
	text-shadow: 0px 0px 30px #00ff9a;
	text-align:center;
}
#UIvid-window{
	position:absolute;
	z-index:305;
	left:20%;
	top:10%;
	box-shadow:
		0 0 1px 1px #ffffff,
		0 0 4px 4px #00ff9a,
		0 0 1px 1px #073c27;
	animation: flicker var(--NeonFlickerTime) linear infinite;
	animation-delay: 0.6;

	background-color:#000;
	width:1000px;
	text-align: center;
}

#notnowPrompt-window,
#passPrompt-window,
#wrongPassword,
#newContact-window,
#calling-window,
#message-window,
#nocall-window,
#solution-window,
#credit-window{
	position:absolute;
	z-index:300;
	left:45%;
	top:35%;
	box-shadow:
		0 0 1px 1px #ffffff,
		0 0 4px 4px #00ff9a,
		0 0 1px 1px #073c27;
	animation: flicker var(--NeonFlickerTime) linear infinite;
	animation-delay: 0.45;

	background-color:#000;
	width:200px;
}

#solution-window,
#credit-window{
	background-color:#000000;
}

#solution-window{
	top:20%;
	width:400px;
}

#credit-window{
	top:20%;
	width:400px;
}

/*we override part of the lightbox style*/
.lightbox-image{
	max-height:90vh;
}

#notnowPrompt-window button,
#passPrompt-window button,
#wrongPassword button,
#newContact-window button,
#UIvid-window button,
#callVideo-window button,
#calling-window button,
#message-window button,
#nocall-window button,
#solution-window button,
#credit-window button,
#overlay-index button{
	color:#000000;
	background-color: #00ff9a;
	box-shadow: 
	inset 0px 0 0px 0px #ffffff;
	-webkit-transition: ease-out 0.6s;
	-moz-transition: ease-out 0.6s;
	transition: ease-out 0.6s;
	border: none;
	padding:3px;
	margin:3px;
	font-family: PT_Mono ;
	font-size:14px;
	font-weight:bold;
}

#notnowPrompt-window button:hover,
#passPrompt-window button:hover,
#wrongPassword button:hover,
#newContact-window button:hover,
#UIvid-window button:hover,
#callVideo-window button:hover,
#calling-window button:hover,
#message-window button:hover,
#nocall-window button:hover,
#solution-window button:hover,
#credit-window button:hover,
#overlay-index button:hover{
	color:#000;
	cursor: pointer;
	box-shadow:
		inset 400px 0 1px 1px #ffffff;
	color:#000;
	cursor: pointer;
}

.message-content{
	text-align:center;
	color:#00ff9a;
	text-shadow: 0px 0px 30px #00ff9a;
	padding:5px;
}

#passwordInput{
	text-align:center;
	background-color: #000;
	color:#00ff9a;
	text-shadow: 0px 0px 30px #00ff9a;
	margin:5px;
}
input::placeholder{
	color: #00ff9a;
	text-shadow: 0px 0px 30px #00ff9a;
}
  

#footer{
	height:34px;
	width:100%;
	background-color:#00000000;
	position: absolute;
	padding-top:3px;
	padding-bottom:3px;
	bottom: 0;
	text-align: center;
}

.footer-button{
	color:#000000;
	background-color: #00ff9a;
	box-shadow: 
	inset 0px 0 0px 0px #ffffff;
	-webkit-transition: ease-out 0.6s;
	-moz-transition: ease-out 0.6s;
	transition: ease-out 0.6s;
	border: none;
	padding:3px;
	margin:3px;
	font-family: PT_Mono ;
	font-size:14px;
	font-weight:bold;
}

.footer-button:hover{
	color:#000;
	cursor: pointer;
	box-shadow:
		inset 400px 0 1px 1px #ffffff;
	color:#000;
	cursor: pointer;
}

#password{
	font-size:14px;
	color: #00ff9a;
	text-shadow: 0px 0px 30px #00ff9a;
}

.hidden {
	display: none;
}

/*to stylize placeholder in text input in different browser...*/
::-webkit-input-placeholder { /* Edge */
  color: grey;
  text-align:center;
}

:-ms-input-placeholder { /* Internet Explorer */
  color: grey;
  text-align:center;
}

::placeholder {
  color: grey;
  text-align:center;
}


/*class that deals with the udrive content, tread carefully, it is working ok but very capricious*/
ul{
    margin: 0px 0px 0px 20px; 
    list-style: none; line-height: 2em; font-family: PT_Mono;
}

.arbo, .folder{
    font-size: 16px;
    position: relative;
}

.arbo:before{
    position: absolute;
    left: -15px;
    top: 0px;
    content: '';
    display: block;
    border-left: 1px solid #000;
    height: 1em;
    border-bottom: 1px solid #000;
    width: 10px;
}

.folder-name{
	background: url("img/iconFolder.png") left center no-repeat;
	color: #00ff9a;
	text-shadow: 0px 0px 30px #00ff9a;
	content: '';
	display:inline-block;
	padding-left:20px;
	height:25px;
}

.folder-name:hover{
	color: #08581c;
	text-decoration: none;
}

.protected-name{
	background: url("img/iconPassword.png") left center no-repeat;
	content: '';
	color: #00ff9a;
	text-shadow: 0px 0px 30px #00ff9a;
	display:inline-block;
	padding-left:15px;
	height:25px;
}

.protected-name:hover{
	cursor: pointer;
}

.file-name{
	color: #00ff9a;
	text-shadow: 0px 0px 30px #00ff9a;
	background: url("img/iconFile.png")left center no-repeat;
	content: '';
	display:inline-block;
	padding-left:20px;
	height:25px;
}

.file-name:hover{
	color: #077222;
	text-shadow: 0px 0px 30px #077222;
	cursor: pointer;
}


.arbo:after{
    position: absolute;
    left: -15px;
    bottom: -7px;
    content: '';
    display: block;
    border-left: 1px solid #000;
    height: 100%;
}
    
.rootLI{
	color: #00ff9a;
	text-shadow: 0px 0px 30px #00ff9a;
	font-size: 16px;
	margin: 0px 0px 0px -20px;
}

.arbo:last-child:after{ display: none }

/*for the animation of the windows we open and close*/
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes scaleIn {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

@keyframes scaleOut {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(0);
  }
}

@keyframes flicker {
	0%, 19.999%, 21%, 64.999%, 66%, 100% {
    	box-shadow:
		0 0 1px 1px #ffffff,
		0 0 4px 4px #00ff9a,
		0 0 1px 1px #073c27;
	}
	20%, 20.999%, 65%, 65.999% {
		box-shadow:
		0 0 1px 1px #116d49,
		0 0 4px 4px #075338,
		0 0 1px 1px #073c27;
	}
}

@keyframes buttonHoverAnim {
	0% {
		background-size: 0%;
	}
	100% {
		background-size: 100%;
	}
}

@keyframes titleFlicker {
	0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
		text-shadow: none;
		opacity: .99;
	}
	20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
		text-shadow: 0px 0px 50px #00ff9a;
		opacity: 0.4;
	}
}


@keyframes screenFlicker{
	0%{opacity:0.5}
	5%{opacity:0.7}
	10%{opacity:0.9}
	15%{opacity:0.5}
	20%{opacity:0.4}
	25%{opacity:0.4}
	30%{opacity:0.3}
	35%{opacity:0.5}
	40%{opacity:0.6}
	45%{opacity:0.5}
	50%{opacity:0.3}
	55%{opacity:0.4}
	60%{opacity:0.7}
	65%{opacity:0.9}
	70%{opacity:0.7}
	75%{opacity:0.4}
	80%{opacity:0.5}
	85%{opacity:0.7}
	90%{opacity:0.6}
	95%{opacity:0.9}
	100%{opacity:1}
}