@import url('https://fonts.googleapis.com/css?family=Sue+Ellen+Francisco');
@import url('https://fonts.googleapis.com/css?family=Nanum+Pen+Script');

* {
	margin:0;
	box-sizing:border-box;
}

body {
	background:#ECF3F5;
}

header {
	position:fixed;
	width:100vw;
	height:11vw;
	background:linear-gradient(#69A2B0,#ECF3F5);
	top:0;
	z-index:1;
	padding-left:9vw;
}

#tagline {
	position:absolute;
	top:1.25vw;
	left:42.275vw;
	text-align:center;
	font-family:sans-serif;
	font-size:1vw;
	color:#D3E5E8;
}

h1 {
	font-family:'Nanum Pen Script', sans-serif;
	font-size: 5vw;
	font-weight:100;
	text-shadow:2px 2px 2px #48646B;
	color:#F8FCFC;
	line-height:11vw;
	text-align:center;
}

#top-btn-container {
	position:absolute;
	display:flex;
	top:calc(1vw + 2vh);
	right:2.5vw;
}
#explore-btn, #login-btn, #logout-btn, #admin-btn {
	position:relative;
	box-shadow:2px 2px 2px #666;
	font-size:calc(12px + 0.7vw);
	padding:0.4vw 1.6vw;
	background:rgba(255,255,255,0.6);
	border:2px solid #000;
	border-top-left-radius: 255px 15px;
	border-top-right-radius: 15px 225px;
	border-bottom-right-radius: 225px 15px;
	border-bottom-left-radius: 15px 255px;
	color:#2F2D2E;
	cursor:pointer;
}
#login-btn, #admin-btn {
	margin-right:1.5vw;
}
#explore-btn:hover, #login-btn:hover, #logout-btn:hover, #admin-btn:hover {
	top:1px;
	right:-1px;
	box-shadow:1px 1px 1px #666;
}
#user-name {
	font-family:'Sue Ellen Francisco', sans-serif;
	font-size:calc(10px + 1.3vw);
	font-weight:100;
	color:#4B646A;
	width:100%;
	text-align:center;
	position:absolute;
	top:0;
	margin-top:calc(2.5vw + 20px);
	text-shadow:2px 2px 2px #fff;
}

#left-panel {
	width:18vw;
	height:100vh;
	position:fixed;
	top:0;
	left:0;
	background:#FCFDFD;
	border-right:1px solid #69A2B0;
	z-index:1;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:space-evenly;
}
#guide-btn {
	text-decoration:none;
	display:flex;
	align-items:center;
	justify-content:space-between;
	border:0.1vw solid #54828D;
	border-radius:3px;
	width:15vw;
	padding:0 0.5vw;
	background:#F0F6F7;
	transition:color 0.2s, border 0.2s;
	color:#54828D;
}
#guide-btn:hover {
	border:0.1vw solid #E94F37;
	color:#E94F37;
}
#guide-text {
	font-family:sans-serif;
	font-size:1.2vw;
	font-weight:100;
	white-space:nowrap;
	margin-left:0.15vw;
}
#guide-icon {
	height:2vw;
	width:1.9vw;
	fill:#54828D;
	transition:fill 0.2s;
}

#new-title {
	color:#537E88;
	text-align:center;
	font-size:2vw;
	font-weight:100;
	font-family:'Nanum Pen Script', sans-serif;
	margin-bottom:0.5vw;
	letter-spacing:0.15vw;
}
#whats-new {
	width:15vw;
	height:65vh;
	border:0.1vw solid #54828D;
	border-radius:3px;
	overflow-y:scroll;
}
.new-entry {
	border-bottom:1px solid #54828D;
	padding:0.5vw 0.7vw;
	padding-right:1vw;
	font-family:sans-serif;
	font-size:1vw;
	color:#54828D;
	font-weight:100;
	position:relative;
}
.tool-name {
	font-weight:400;
	color:#69A2B0;
}
.tool-name:hover {
	color:#E94F37;
}
.thick {
	font-weight:400;
	color:#44727D;
}
.date {
	font-size:0.8vw;
	color:#2A4146;
}

#tools {
	width:100vw;
	min-height:calc(100vh - 11vw);
	margin-top:8.5vw;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	position:relative;
	padding:2vw 0;
}

.row {
	width:75%;
	display:flex;
	justify-content:space-between;
	margin-top:2vw;
	margin-left:18vw;
}
.item {
	display:flex;
	flex-direction:column;
}
.img-holder {
	width:21.5vw;
	height:13vw;
	display:flex;
	align-items:center;
	justify-content:center;
	background:#fff;
	border:3px solid #706C61;
	border-top-left-radius: 255px 5px;
	border-top-right-radius: 5px 225px;
	border-bottom-right-radius: 225px 5px;
	border-bottom-left-radius: 5px 255px;
	overflow:hidden;
	cursor:pointer;
	position:relative;
	transition:box-shadow 0.1s;
}
.img-holder:hover {
	box-shadow:0 0 10px #5C8E9A;
}
.image {
	height:98%;
	width:98%;
}
.name {
	width:100%;
	text-align:center;
	font-family:'Sue Ellen Francisco', sans-serif;
	font-size:1.8vw;
	font-weight:100;
	color:#4B646A;
	height:3.2vw;
	line-height:3vw;
}
.description {
	width:100%;
	height:5vw;
	margin-top:0.75vw;
	display:flex;
	align-items:center;
	justify-content:center;
}
.description-text {
	width:19.5vw;
	text-align:justify;
	font-family:sans-serif;
	font-weight:100;
	font-size:0.9vw;
	line-height:125%;
	color:#4C6064;
}

.spacer {
	width:25vw;
	height:18.8vw;
}

footer {
	width:100vw;
	height:6vw;
	background:#4E7A84;
	font-family:sans-serif;
	font-weight:100;
	display:flex;
	align-items:center;
	justify-content:center;
	margin-top:1.5vw;
	padding-left:18vw;
}
a {
	text-decoration:none;
}
.info-link {
	margin:0 1.5vw;
	font-size:1.1vw;
	color:#E9EEEF;
}

#error-div {
	width:100vw;
	height:100vh;
	position:absolute;
	top:0;
	left:0;
	background:rgba(255,255,255,0.5);
	display:none;
	align-items:center;
	justify-content:center;
}
#error-message {
	width:27vw;
	height:18vw;
	background:#fff;
	border-radius:5px;
	box-shadow:0 0 5px #4E7A84;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	color:#4E7A84;
	position:relative;
}
#error-close {
	position:absolute;
	top:0.5vw;
	right:0.5vw;
	width:1.3vw;
	height:1.3vw;
	background:#4E7A84;
	color:#fff;
	border-radius:5px;
	cursor:pointer;
	text-align:center;
	line-height:1.3vw;
	font-size:1.1vw;
	font-family:sans-serif;
}
.error-text {
	color:#4E7A84;
	font-family:sans-serif;
	font-size:1.1vw;
	text-align:center;
	margin:1vw 0;
}

#lightning {
	height:2vw;
	width:2vw;
	position:absolute;
	top:1.45vw;
	right:1.15vw;
}
#hangman {
	height:2.25vw;
	width:2.25vw;
	position:absolute;
	top:0.55vw;
	right:0.5vw;
}
#resize {
	height:1.65vw;
	width:1.65vw;
	position:absolute;
	top:1.4vw;
	right:0.85vw;
}
#masks {
	height:2.625vw;
	width:2.625vw;
	position:absolute;
	top:1.5vw;
	right:0.625vw;
}
#map {
	height:2.5vw;
	width:2.5vw;
	position:absolute;
	top:1.65vw;
	right:0.825vw;
}
#badge {
	height:1.85vw;
	width:1.85vw;
	position:absolute;
	top:2vw;
	right:0.8vw;
	fill:#4F7AC4;
}
#ear {
	height:1.85vw;
	width:1.85vw;
	position:absolute;
	top:1.75vw;
	right:0.25vw;
}
#cheetah {
	height:3.25vw;
	width:3.25vw;
	position:absolute;
	top:1.3vw;
	right:1vw;
	fill:#2E82D7;
}
#star {
	height:1.85vw;
	width:1.85vw;
	position:absolute;
	top:1.95vw;
	right:2.5vw;
}