/*
 * ELEMENT 
 * */
@font-face{
        font-family: 'VAG Rounded Bold';
        src:
                local('VAG Rounded Bold');
}
@font-face{
        font-family: 'TBUDRGothic Std';
        src:
                local('TBUDRGothic Std');
}

html {
	height:100%;
}

body{
	margin:0;
	padding:0;
}

/*
 * TRUCK
 * */

#keitruck {
	position:relative;
	background-color:white;
	height:99vh;
}

#webgl-canvas {
	width:100%;
	height:100%;
	z-index: -1;
}


/* WORK ON THIS */
#gradient {
	position:absolute;
	width: 10%;
	height: 100%;
	z-index:10;
}

#wave {
	position: absolute;

	display:none;

	min-width: 100px;
	min-height:100px;
	width: 70%;
	height: 100%;
	
	cursor:default;

	/* border:dotted red; */
	z-index: 5;
}

#logo {
	width:512px;
	height:256px;

	display:block;
	
	opacity: 0;
	transition: opacity 750ms;

	z-index: 2;
}

#logo.fade {
	opacity: 1;
}

#logo-container {
	position:absolute;

	display:block;
	pointer-events:none;

	visibility:visible;
	width:100%;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.fadeIn {
	visibility:visible;
	animation:fadeIn 750ms ease-in-out;
}
/*
 * GLOBAL
 * */

.circle{
        position:absolute;

        background-color: black;
        border-radius: 50%;
        
        font-family: 'TBUDRGothic Std';

        width: 140px;
        height: 140px;

	overflow:hidden;

        top: 2%;
        left: 2%;

        transition: height 0.35s, width 0.35s;

}

.circleText{
        color: white;
        position: relative;
        font-size: 85px;
        text-align:center;
        bottom: 62%;
        transition: font-size 0.35s, bottom 0.35s;
}

.launchText{
	font-size:49px;
	bottom: 15%;
	text-overflow:clip;
}

.dropdownContent{
        display: block;
        font-family: 'TBUDRGothic Std';
        font-weight: bold; 
        position: absolute;
        font-size:25px;
        top:-10px;
        left:150px;
        background-color: #edededff;
        border-radius: 20px;
        min-width: 160px; 
        height: auto;
        text-align: center;
        padding-left: 10px;
        opacity:0;
        transition:opacity .1s;
        padding-right: 10px;
        z-index: 1;
}

.infoContainer{
        position:absolute;

        border-radius:10px;
        padding:5px;
        
	left:10px;

	height:150px;
        width:150px;
        
	overflow:hidden;
        background-color:#ededed00;
        color:#ffffff00;
        transition: height 0.5s, width 0.5s, color 0s, background-color 0.1s;
}
.infoContainer:hover{
        width:400px;
        height:200px;
        background-color:#edededff;
        color: #000000ff;
        font-family: 'VAG Rounded Bold';
        font-size: 25px;
}

.infoContainer:hover .info{
        height: 100px;
        width:100px;
}

.infoContainer:hover .circleText{
        font-size:65px;
        bottom: 70%;
}

.bottomInfo{
	position:absolute;
	top:500px;
}

.info{
        position:relative;
        float:left;
        left:5px;
        top:5px;
        margin-left:0px;
        margin-right:20px;
        margin-bottom:20px;

}

.shortInfo{
        position:absolute;
        overflow-y: auto;
        top:15px;
        width:270px;
        height:100px;
        left:120px;
        display:inline block;
        /*
        background-color: seagreen;
        */
}

.longInfo{
        position:absolute;
        overflow-y: auto;
        height:75px;
        width:380px;
        top:120px;
        left:10px;
}
.scrollbar::-webkit-scrollbar-track
{
        border-radius: 5px;
        background-color: #d0d0d000;
}

.scrollbar::-webkit-scrollbar
{
        width: 10px;
        background-color: #d0d0d0ff;
        border-radius:5px;
}


.scrollbar::-webkit-scrollbar-thumb
{
        border-radius: 5px;
        background-color:#000000ff ;
}


/*
 * SIGN
 * */

#sign {
	position:absolute;
	z-index:2;
	min-width:10%;
	padding-right:5%;
	background: white;
	background: linear-gradient(90deg, white 50%, rgba(0,0,0,0) 100%);
}

.clock{
	/* shape */
        position:relative;
	margin: 10px;
        width:400px;
        height:100px;
        border-radius:50px;
        background-color:black;

	/* text */
        color:white;
        text-align:center;
	vertical-align:middle;
        font-family:'VAG Rounded Bold';
        font-size:60px;
	
}

.clockText{
	display:block;
	font-size:1.25em;
	line-height:110px;
	margin-top:0em;
	margin-bottom:0em;
	font-weight:normal;
}