* {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}
html {
	min-height: 100%;
	height: 100%;
}
body {
	background-color: #fffaff;
	color: #3A3852;
	padding: 0px;
	margin: 0px;
	font-family: 'Overpass', sans-serif;
}

a, a:active, a:visited {
	color: #B74071;
}
a:hover {
	color: #00cfec;
}

.preload-transitions * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

.tiny {
  font-size: 1em;
}
.small {
  font-size: 1.5em;
}
.medium {
  font-size: 2em;
}
.large {
  font-size: 2.5em;
}
.huge {
  font-size: 3em;
}
.giant {
  font-size: 4em;
}

#wrapper {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
}

#logo, #content::before, #skills {
  -moz-transition: all .5s ease-in;
  -o-transition: all .5s ease-in;
  -webkit-transition: all .5 ease-in;
  transition: all .5s ease-in;
}

#container {
  position: relative;
  left: 50%;
  width: 480px; 
  margin-left: -240px;
  height: 100%;
}

#content {
  position: relative;
  top: 10%;
}
#content::before {
  background: url('/assets/img/david.jpg') no-repeat center 74%;
  background-size: 64%;
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1;
  opacity: 0;
}
#content:hover::before{
  opacity: 1;
}

#logo {
  position: inherit;
  fill: #00cfec;
  z-index: 2;
}

#content:hover #logo {
  fill: #E4FF1A;
}

#content:hover #skills{
  opacity: 1;
}

#skills {
  position: absolute;
  top: 17%;
  left: -5%;
  height: 72%;
  width: 120%;
  z-index: 3;
  opacity: 0;
  transform: rotateZ(-30deg);
  list-style: none;
  padding: 0px;
}
#skills li {
  position: absolute;
  display: inline-block;
}
#skills li:nth-child(1) {
  top: 0%;
  left: 22%;
}
#skills li:nth-child(2) {
  top: 14%;
  left: 15%;
}
#skills li:nth-child(3) {
  top: 24%;
  left: 9%;
}
#skills li:nth-child(4) {
  top: 50%;
  left: 68%;
}
#skills li:nth-child(5) {
  top: 71%;
  left: 45%;
}
#skills li:nth-child(6) {
  top: 27%;
  left: 63%;
}
#skills li:nth-child(7) {
  top: 52%;
  left: 9%;
}
#skills li:nth-child(8) {
  top: 42%;
  left: 5%;
}
#skills li:nth-child(9) {
  top: 70%;
  left: 12%;
}
#skills li:nth-child(10) {
  top: 19%;
  left: 51%;
}
#skills li:nth-child(11) {
  top: 91%;
  left: 27%;
}
#skills li:nth-child(12) {
  top: 82%;
  left: 18%;
}
#skills li:nth-child(13) {
  top: 64%;
  left: 62%;
}
#skills li:nth-child(14) {
  top: 37%;
  left: 65%;
}
#skills li:nth-child(15) {
  top: 7%;
  left: 87%;
}
#skills li:nth-child(16) {
  top: 58%;
  left: 8%;
}
#skills li:nth-child(17) {
  top: 73%;
  left: 27%;
}
#skills li:nth-child(18) {
    top: 10%;
    left: 56%;
}

#info {
  top: -3%;
  position: absolute;
  list-style: none;
  padding: 0;
  z-index: 4;
  font-size: 1.1em;
}
#info li {
  margin-bottom: 0.2em;
}
#info li:first-child {
  border-bottom: 1px solid #B74071;
}
#info li:nth-child(4) {
  display: none;
}

#info li:nth-child(4):after {
  content: '\64\61\76\69\64\40\64\61\76\64\65\76\2E\64\65';
}
#info li:nth-child(3):after {
  white-space: pre;
  content: '\53\74\65\6c\6c\6d\61\63\68\65\72\77\65\67\20\31\31\2c\20\34\38\36\38\33\20\41\68\61\75\73';
}