html, body {margin: 0; height: 100%; overflow: hidden}

::selection {
	background: #ac1122; /* WebKit/Blink Browsers */
  }
  ::-moz-selection {
	background: #ac1122; /* Gecko Browsers */
  }

.intro {
	--color-text: #fff;
	--color-bg: #000;
	--color-link: #fff;
	--color-link-hover: #ac1122;
	--color-info: #ac1122;
	--color-title: #fff;
	--color-subtitle: #cecece;
	--color-contact: #fff;
	--color-contact-bg: #ac1122c2;
	--color-contact-border: #ac1122;
}

.content__title {
	font-family: 'Playfair Display', serif;
	font-size: 5vw;
	font-weight: normal;
	color: var(--color-title);
	text-align: center;
	margin: 0;
	pointer-events: none;
}

.content__subtitle {
	font-family: 'Playfair Display', serif;
	font-size: 1.75vw;
	font-weight: normal;
	color: var(--color-subtitle);
	opacity: 0.85;
	text-align: center;
	margin: 0;
	pointer-events: none;
}

.content__contact {
	font-size: 1.25em;
	background: var(--color-contact-bg);
	border: 1px solid --color-contact-border;
	color: var(--color-contact);
	padding: 0.45em 0.5em;
	line-height: 1;
	margin: 0;
	margin-top: 10px;
	letter-spacing: 0.3em;
	text-indent: 0.3em;
	font-weight: bold;
	text-transform: uppercase;
}

.content__contact a:hover{
	color:#FFF;
	text-decoration: underline;
}

.icons{
	display:inline-block;
	text-align: center;
	width:100%;
	margin:0;
  
  }
  .fb, .lin, .git, .tw, .mail, .fc, .res, .in, .med{
	color:#ff9ec3;
  }
  
  .fa-2x{
	font-size: 1.8em !important;
  }

  .ico{
	border: solid 2px white;
	border-radius: 50%;
	display: inline-block;
	width: 28px;
	height: 28px;
	padding: 11px;
	position: relative;
	background: transparent;
	transition: all 0.2s ease;
	text-decoration: none;
	margin: 22px 8px;
  }
  .ico:hover{
	cursor: pointer;
  }
  .ico-res{
	border: solid 2px white;
	border-radius: 50%;
	display: inline-block;
	width: 40px;
	height: 40px;
	padding: 10px 8px 8px 8px;
	position: relative;
	background: transparent;
	transition: all 0.2s ease;
	text-decoration: none;
	margin: 0px 8px;
  }
  
  .ico:hover{
	transform: translateY(-4px);
  }
  
  .ico-res:hover{
	transform: translateY(-4px);
  }
  .ico:hover .fb{
	color:white;
  
  }
  
  .ico:hover .lin,
  .ico:hover .git,
  .ico:hover .fc,
  .ico:hover .mail,
  .ico:hover .tw,
  .ico:hover .res,
  .ico:hover .in,
  .ico:hover .med{
	color:white;
  }

@media screen and (max-width: 55em) {
	.content__title {
		font-size: 3em;
	}
	.content__subtitle {
		font-size: 0.7em;
	}

	.content__contact {
		font-size: 0.85em;
	}
}

@media screen and (max-width: 700px) {
	.ico{
	  border: solid 2px white;
	  border-radius: 50%;
	  display: inline-block;
	  width: 20px;
	  height: 20px;
	  padding: 5px !important;
	  position: relative;
	  background: transparent;
	  transition: all 0.2s ease;
	  text-decoration: none;
	  margin: 6px 3px !important;
  
	}
	.icons{
	  margin-bottom: 8px;
	}
	.ico-res{
	  border: solid 2px white;
	  border-radius: 50%;
	  display: inline-block;
	  width: 20px;
	  height: 20px;
	  padding: 10px 8px 8px 8px !important;
	  position: relative;
	  background: transparent;
	  transition: all 0.2s ease;
	  text-decoration: none;
	  margin: 0px 8px !important;
	}
  
	.fa-2x{
	  font-size: 1.2em !important;
	}
	.fa-3x{
	  font-size: 2em !important;
	}
	ul{
	  padding:0px !important;
  
	}
  }