body {
	background-color:black;
	font-family: "Schibsted Grotesk";
}
.geo-regular {
  font-family: "Geo", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.syne-mono-regular {
  font-family: "Syne Mono", monospace;
  font-weight: 400;
  font-style: normal;
}

.schibsted-grotesk-<uniquifier> {
  font-family: "Schibsted Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
.geo-regular-italic {
  font-family: "Geo", sans-serif;
  font-weight: 400;
  font-style: italic;
}


main {
	width: 80%;
	overflow:hidden;
	display:block;
	margin:auto;
	padding:0;
	
}
img {
	width:100%;
}
.snoozealarm {
	width:10vw;
	height:10vw;
	position:absolute;
	top:20%;
	left: 5%;
	opacity:0;
	cursor:pointer;
	
}
.nov5 {
	width:10vw;
	height:7vw;
	position:absolute;
	top:35%;
	left: 44%;
	opacity:0;
	cursor:pointer;
	
}
	.fan {
		height:200%;
		width:200%;
		/*background: url("images/1/fansilhouette.png") no-repeat center;
		background-size: contain;*/
		animation: spin 3s linear infinite;
	}
	.alarmtext{
		position:absolute;
		font-family: geo;
		top:20%;
		left:15%;
		font-size:1vw;
		animation: alarm 1s linear infinite;
	}
	.toothbrushtext1{
		position:absolute;
		font-family: "Syne Mono";
		top:35%;
		left:40%;
		font-size:2.5vw;
		animation: toothbrush 0.2s linear infinite;
	}
	.app {
		position:absolute;
		width:35%;
		top: 5%;
		left:5%;
		background-color:transparent;
		border:none;
		cursor:pointer;
	}
	.app p {
		position:absolute;
		font-family: "Schibsted Grotesk";
		font-size: 4vw;
		bottom:-30%;
		text-align: center;
		width: 100%;
		color: white;
	}
	#mail {
		width:100%;
		height:100%;
		background-color: white;
		position:absolute;
		top:0%;
		font-size:1.5vw;
		padding:0;
		margin:0;
	}
	#notes {
		width:100%;
		height:100%;
		background-color: white;
		position:absolute;
		top:0%;
		font-size:1.5vw;
	}
	#browser {
		width:100%;
		height:100%;
		background-color: white;
		position:absolute;
		top:0%;
		font-size:1.5vw;
	}
	.toothbrushtext2{
		position:absolute;
		font-family: "Syne Mono";
		top:40%;
		left:45%;
		font-size:1.5vw;
		animation: toothbrush 0.2s linear infinite;
	}
	@keyframes alarm {
		0% {
			transform: scale(3,3) translate(0,0);
		}
		50%,100% {
			transform: scale(6,6) translate(50%,-50%);
			opacity: 0;
		}
	}
	@keyframes toothbrush {
		0% {
			transform: scale(1,1) translateX(5px) translateY(0px);
		}
		25%{
			transform: scale(1.1,1.1) translateX(0px) translateY(5px);
		}
		50%{
			transform: scale(1,1) translateX(-5px) translateY(0px);
		}
		75%{
			transform: scale(1.1,1.1) translateX(0px) translateY(-5px);
		}
	}
	.fancontainer {
		position:absolute;
		top:-25%;
		left:25%;
		width:80%;
		display:block;
		margin:auto;
		overflow:hidden;
	}
	.panel{
		width: 100%;
		height: 100%;
		position:relative;
		margin-bottom:2%;
		margin-top:2%;
	}
	@keyframes spin{
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
		
	}

/*
Source - https://stackoverflow.com/a/71387985
Posted by Paolo, modified by community. See post 'Timeline' for change history
Retrieved 2026-05-16, License - CC BY-SA 4.0
*/

textarea, textarea:focus
{
    font-size: 2vw;                                                   /* make your choice */ 
    border: none;
    background: transparent;
    -webkit-appearance: none;
    -moz-apperarance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    outline: none;
    padding: 0px;
    resize: none;
    width: 100%;
	overflow-y: scroll;
	overflow-x: wrap;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
}
input {
	margin:auto;
	width: 75%;
	display:block;
	height: 3vw;
	margin-top:2vw;
	font-size: 2vw;
	border-radius:2vw;
	padding:1vw;
}
.searchhistory {
  visibility: hidden; /* Hidden by default */
  width: 75%;
  left:12.5%;
  background-color: white;
  color: black;
  text-align: left;
  padding: 0px;
  	font-size: 1.5vw;

box-sizing: border-box;
  border-radius: 0px;
  position: absolute;
  z-index: 1;
  border-width: 0px 2px 2px 2px;
  border-style: solid;
  border-color:gray;
}
.searchbar:hover .searchhistory{
  visibility: visible;
}
.searchterm {
	width: 100%;
	padding:0.4vw;
	padding-bottom:0.15vw;
	padding-top:0.15vw;
	box-sizing: border-box;

}
.searchterm:hover{
	background-color: #dddddd;
}



/* Style the tab */
.tab {
  float: left;
  background-color: #f1f1f1;
  width: 25%;
  height: 300px;
  box-sizing: border-box;
  overflow-y: scroll;
  height:97%;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 1.5vw 1vw;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current "tab button" class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  float: left;
  padding: 0;
  border: 1px solid #ccc;
  width: 75%;
  height:100%;
  box-sizing: border-box;
  border-left: solid;
  overflow-y: scroll;
  height:97%;
	border-color:grey;
}
.tabcontent p {
	margin:1vw;
}
.tabcontent .emailfrom {
	font-size: 2vw;
	font-weight: bold;
	margin:0;
	padding:0;
}

.tabcontent .subject {
	font-size: 1.5vw;
	font-weight: bold;
	margin:0;
	padding:0;
}
.tab .emailfrom {
	font-size: 1.5vw;
	font-weight: bold;
	margin:0;
	padding:0;
}

.tab .subject {
	font-size: 1.25vw;
	font-weight: bold;
	margin:0;
	padding:0;
}
.emailheader {
	padding:1vw;
	margin:0;
	box-sizing: border-box;
	background:lightgrey;
	width:100%;
	
}

.fakelink {
	cursor:pointer;
	text-decoration:underline;
	color:blue;
}