#title, .about h3, ul.tree, .more h3 {
	font-family: 'DotGothic16', sans-serif;
	color: #2BC0BB;
}

.about { 
	width: 33%;
	display: block;
	text-align: left;
}

@media only screen and (max-width: 1000px) {
  .about { 
	width: 66%;
	display: block;
	text-align: left;
	}
	.more {
		text-align: left;
		width: 75%;
	}
}

.about h3{
	margin: 1.5px;
	display: block;
	padding: .5px;
}

#aboutMe, .more{
	font-family: "Courier Prime", monospace;
	display: block;
	margin: 2.5px;
}
.more {
	text-align: left;
	padding: 0px;
}

.contain {
	display: block;
    width: auto;
    margin:auto;
}

@media only screen and (max-width: 1500px) {
	.contain .c1 img{
		display: none;
	}
}

.contain .c1 img{
	position: relative;
	width: 10%;
    max-width:17%;
	height: 300px;
	margin: auto;
    max-height: 450px;
	float: left;
	border-radius: 2.5px;
	border-right: 2px solid #2BC0BB;
	padding-right: 5px;
}

.contain .c2{
	position: relative;
	float: left;
	width: 50%;
	margin-left: 5px;
}

.contain::after {
	content: "";
	clear: both;
	display: table;
}

.more {
	float: left;
	display: block;
	width: 50%;
}
.more dl, .more dt {
	margin: 2.5px;
}

.more h3 {
	margin: 2.5px;
	padding: 0px;
	width: 100%;
}

.more p {
	margin: 2.5px;
	padding: 0px;
}
.more img {
	width: 23%;
}
@media only screen and (max-width: 1000px) {
.more img {
	width: 50%;
}
}

a:visited, a:active, a:checked, a:any-link {
	text-decoration: none;
	color: #2BC0BB;
}

#title img { width: 33%;
	border-bottom: 2.5px solid #2BC0BB;
	padding: 2.5px;
	margin: auto;
	
}
ul.tree, ul.tree ul {
    list-style: none;
     margin: 0;
     padding: 0;
   } 
   ul.tree ul {
     margin-left: 10px;
   }
   ul.tree li {
     margin: 0;
     padding: 0 7px;
     line-height: 20px;
	 color: #2BC0BB;
     font-weight: 500;
     border-left:1px solid rgb(100,100,100);
   }
	ul.tree li a:hover{
	background-color: black;
	color:#33FF33; 
	}

   ul.tree li:last-child {
       border-left:none;
   }

   ul.tree li:before {
      position:relative;
      top:-0.3em;
      height:1em;
      width:12px;
      color:white;
      border-bottom:1px solid rgb(100,100,100);
      content:"";
      display:inline-block;
      left:-7px;
   }

   ul.tree li:last-child:before {
      border-left:1px solid rgb(100,100,100); 
   }

/* Shutter In Horizontal */
.shutter {
  display: inline-block;
	text-decoration: none;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  background: black;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.shutter:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #e1e1e1;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.shutter:visited {
	color: #2BC0BB;
}
.shutter:hover, .shutter:focus, .shutter:active {
  color: white;
	
}
.shutter:hover:before, .shutter:focus:before, .shutter:active:before {
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}



////////


*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.container{
    width: 500px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    overflow: hidden;
    border: 10px solid #ffffff;
    border-radius: 8px;
    box-shadow: -1px 5px 15px black;
}

/*Area of images*/
.wrapper{
    width: 100%;
    display: flex;
    animation: slide 16s infinite;
}

img{
    width: 100%;
}
/*Animation activated by keyframes*/
@keyframes slide{
    0%{
        transform: translateX(0);
    }
    25%{
        transform: translateX(0);
    }
    30%{
        transform: translateX(-100%);
    }
    50%{
        transform: translateX(-100%);
    }
    55%{
        transform: translateX(-200%);
    }
    75%{
        transform: translateX(-200%);
    }
    80%{
        transform: translateX(-300%);
    }
    100%{
        transform: translateX(-300%);
    }
}