@import url('https://fonts.googleapis.com/css?family=Lato:100,700|Mulish:200|Poppins:100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400&display=swap');
:root {
  color-scheme: only light;
}
html,
body {
	-webkit-touch-callout: none; /* ios safari */
	-webkit-user-select: none; /* safari */
	-khtml-user-select: none; /* konqueror html */
	-moz-user-select: none; /* old versions of firefox */
	-ms-user-select: none; /* internet explorer/edge */
	user-select: none; /* non-prefixed version, currently
	supported by chrome, edge, opera and firefox */
	height: 100%;
}

#wrapper {
	display: flex;
	max-width: 1250px;
	max-height: 600px;
	margin: 0 80px;
}
#wall {
	text-align: center;
}


#content {
	text-align: center;
}
#content button {
	z-index: 10;
	white-space: normal;
	position: relative;
 margin: 0px 2px;
}
.btn-social-icon {
	width: 50px;
	height: 50px;
	padding: 3px 0 0 0
}		
.btn-rounded {
	border-radius: 50px
}
.btn-outline-github {
	border: 1px solid #517fa4;
	color: #517fa4
}
.btn-outline-mail {
	border: 1px solid #517fa4;
	color: #517fa4
}
.btn-outline-twitter {
	border: 1px solid #2caae1;
	color: #2caae1
}
.btn-outline-linkedin {
	border: 1px solid #0177b5;
	color: #0177b5
}
.btn-outline-instagram {
	border: 1px solid #dc4a38;
	color: #dc4a38
}

.btn-outline-github:hover {
	background: #517fa4;
	color: #ffffff
}
.btn-outline-twitter:hover {
	background: #2caae1;
	color: #ffffff
}
.btn-outline-linkedin:hover {
	background: #0177b5;
	color: #ffffff
}
.btn-outline-instagram:hover {
	background: #e52d27;
	color: #ffffff
}
.btn-outline-mail:hover {
	background: #517fa4;
	color: #ffffff
}


.overlay {
	opacity: 0;
	filter: alpha(opacity = 0);
	position: absolute;
	top:0; bottom:0; left:0; right:0;
	z-index: 2;
	background: transparent;
}
#footer {
	color: #f4fbff;
	background: #38454c;
	font-size: 13px;
	font-family: 'montserrat', 'lato', sans-serif;
	padding: 2px;
	opacity: 0.5;
	position: absolute;
}
#footer div {
	z-index: 10;
	font-weight: bold;
	color: #219df3;
	cursor: pointer;
	display: inline-flex;
}
#footer span {
	visibility: hidden;
	background-color: #f4fbff;
	color: #38454c;
	text-align: left;
	border-radius: 8px 8px 8px 0;
	padding: 8px 15px 8px;
	position: fixed;
	bottom: 19px;
	margin: 0 0 0 20px;
	z-index: 1;
	border: 1px dotted #38454c;
}
#footer > div:hover span {
	visibility: visible;
}

#info {
	position: absolute;
	top: 0;
	margin: 40px 10px 10px;
}
#countdown {
  position: relative;
  margin: auto;
  height: 50px;
  width: 50px;
  text-align: center;
  opacity: 0.5;
}
#countdown-number {
	fill: #3c9ee5;
	font-family: sans-serif;
	font-size: 14px;
	text-anchor: middle;
	font-weight: bold;
}
.circle-bg {
	fill: none;
	stroke: #eee;
	stroke-width: 3.8;
}

.circular-chart.blue .circle {
	stroke: #3c9ee5;
}
@keyframes progress {
	0% {
		stroke-dasharray: 100 100;
	}
}

@media only screen and (max-width: 500px) {
	#wrapper { 
		display: block;
	}
	#footer span {
		margin: 0 0 0 -50px;
		border-radius: 8px;
	}
}

.typewriter-container {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 14px;
	margin: -8px 0 10px 0;
	white-space: nowrap;
}

.theme-black #typewriter {
  color: #5A646A;
}
.theme-white #typewriter {
  color: #fff;
}

/* Cursor */
#typewriter::after {
	content: "|";
	margin-left: 4px;
	animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
	#typewriter::after { animation: none; }
}

.brand{
  --gap: 0px;
  --lh: 0.5;
  --lines: 2;
  position: relative;
  display: inline-block;
  padding: 0 0 20px;
}

.brand .tagline{
  position: absolute;
  left: 0;
  width: 100%;
  pointer-events: none;
  text-align: center;
}