@charset "UTF-8";
/* HOME PAGE CSS */

/* FONT-DECLARATIONS */

@font-face {
	font-family: nanofont;
	src: url(fonts/Nouveau_IBM.ttf);
}
@font-face {
	font-family: worksans;
	src: url(nano-verses/build_december/fonts/work-sans/WorkSans-Medium.otf);
}
@font-face {
	font-family: roboto;
	src: url(nano-verses/build_december/fonts/work-sans/Roboto-Light.ttf);
}
@font-face {
	font-family: tahoma;
	src: url(nano-verses/build_december/fonts/Tahoma.ttf);
}
@font-face {
	font-family: verdana;
	src: url(nano-verses/build_december/fonts/Verdana.ttf);
}
@font-face {
	font-family: optima;
	src: url(nano-verses/build_december/fonts/Optima.ttc);
}
/* PAGE-SPECIFIC STYLES */
.ref_list {
    padding: 0;
    list-style-type: none;
	
}
.ref_list_item {
	list-style:none;
	margin-bottom:2vh;
}
.ref_item_text {
	padding-left:3vw;
	display:block;
}
.ref_link {
	float:left;
	color:#F60;
	font-weight:bold;
}
.ref_link:hover {
	cursor:pointer;
	text-decoration:none;
}
.hueshift {
	color:#F60;
}
a {
	color: blue;
	text-decoration: none;
}
a:hover {
	color: blue;
	text-decoration: none;
}
a:visited {
	color: blue;
	text-decoration: none;
}
body {
 	overflow-x:hidden;
	color: #D5F3F4;
	font-family: optima; /* MAIN TEXT FONT */
	background: url(landingpagematerials/main_background_slyall.jpg);
}
#morphobox {
	background: url(landingpagematerials/main_background_slyall.jpg);
	-webkit-filter: hue-rotate(90deg);
	filter: hue-rotate(90deg);
	background-size: cover;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: -99;
}
#bottom {
	width: 30vw;
	cursor: pointer;
}
#header {
	top: 20%;
	left: 40%;
}
#footer {
	position: absolute;
	width: 80vw;
 	padding:;
	left: 10vw;
	margin-left: -0vw;
	top: 10vh;
	vertical-align: middle;
	color: black;
}
#footer-references {
	background-color:white;
	padding: 10vh 5vw 1vh 5vw;
	text-align: justify;
	font-size:1.2vw;
	margin-top: 5vh;
}

#footer-footer {
	padding: 0vh 5vw 1vh 5vw;
	-webkit-filter: hue-rotate(90deg);
	filter: hue-rotate(90deg);
	color: white;
	font-size:12px;
	background-color:white;
	text-align: center;
	font-size:1vw;
	margin-bottom:3vh;
}
#rocket {
	left:50%;
	
}
#credits img {
}
#Top_button {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 3vh; /* Place the button at the bottom of the page */
  right: 2vw; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: white; /* Set a background color */
  color: black; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 2vh; /* Some padding */
  font-size: 1.3vw; /* Increase font size */
}

#Top_button:hover {
  background-color: black; /* Add a dark-grey background on hover */
  color:white;
}

a {
    padding-top: 50px;
    margin-top: -50px;
}
 @media only screen and (max-width: 700px) and (min-width : 700px) {
.twocolumns {
	padding: 0px;
	-moz-column-count: 1;
	-moz-column-gap: 5vw;
	-webkit-column-count: 1;
	-webkit-column-gap: 5vw;
	column-count: 1;
	column-gap: 5vw;
}
}
 @media only screen and (min-width: 700px) {
.twocolumns {
	padding: 0px;
	-moz-column-count: 2;
	-moz-column-gap: 5vw;
	-webkit-column-count: 2;
	-webkit-column-gap: 5vw;
	column-count: 2;
	column-gap: 5vw;
}
}
.twocolumns_img {
	padding: 0px;
	-moz-column-count: 2;
	-moz-column-gap: 5vw;
	-webkit-column-count: 2;
	-webkit-column-gap: 5vw;
	column-count: 2;
	column-gap: 5vw;
}
.col-1 {
	background-color: white;
}
.col-2 {
	background-color: white;
}
.collapsible {
	background-color: blue;
	background: url(landingpagematerials/main_background_slyall.jpg);
	background-position: 0px 0px;
	cursor: pointer;
	padding: 15px 18px 15px 18px;
	color: white;
	text-align: left;
}
.active, .collapsible:hover {
}
.collapsible:after {
	content: '\002B';
	float: right;
}
.active:after {
	content: "\2212";
}
.content {
	padding: 0 18px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
}
#info {
	text-align: center;
	padding-left: 20%;
	padding-right: 20%;
	color: black;
}
#team {
	text-align: left;
	color: black;
}
#team ul {
	font-size: 2vh;
	width: 100%;
	list-style: none;
	margin-top: 2vh;
	padding: 0;
	line-height: 18px;
}
#team li {
	color: black;
}
#team li:hover {
	background-color: #81DFDB;
	cursor: pointer;
}
 @media only screen and (max-width: 700px) and (min-width : 700px) { /*small screen*/
#container_team {
	display: grid;
	grid-template-columns: 20% 80%; /*columns widths*/
	height:50vh;
	overflow:scroll;
}
}
 @media only screen and (min-width: 700px) { /*large screen */
#container_team {
	display: grid;
	grid-template-columns: 20% 80%; /*columns widths*/
	height:50vh;
}
}
#credits {
	font-size: 2vh;
}
.long_chunk {
	font-size: 2vh;
	color: black;
	text-align: justify;
}
.special_font {
	font-family: worksans;
	color: black;
	font-size: 2vh;
}
::selection {
	background-color: #81DFDB;
}

.contentbox {
	position: absolute;
	width: 30%;
	top: 10%;
	left: 50%;
	margin-left: -15%;
}
.title {
	font-family: worksans;
	font-size: 200%;
	color: white;
}
.text {
	color: white;
	font-size: 1.5vh;
	z-index: 99;
	font-weight: bold;
	width: 100%;
	height: 100%;
	text-align: justify;
}
.textback {
	background: linear-gradient(to bottom right, aqua, blue);
	opacity: 0.77;
	padding: 10px;
	z-index: 99;
	width: 100%;
	height: 100%;
	position: absolute;
}
#popup {
	position: fixed;
	background-color: blue;
	color: white;
	width: 100px;
	height: 100px;
	top: 20%;
	left: 20%;
	padding: 20px;
	border-radius: 20px;
	display: none;
}


#log {
	visibility: hidden;
}