/*css page for my index */
body {
	margin:0;
		background-image:url(imgs/third-white.jpg);
		font-family:Century, Consolas, Agency FB, Lucida Bright;
	}
.tech{
	color:darkgray;
	font-size:80px ;
	font-family:Copperplate Gothic;
	text-align:center ;
}
.plat{
	color:lightpink;
	font-family:Castellar cursive;
	font-size:20px;
	text-align:center;
}
.plt{
	color:purple;
	font-family:Agency FB;
	font-size:24px ;
	text-align:center ;
}
#mum{
		background-image: url(imgs/black.jpg);
		padding:200px ;
		padding-top:-500px ;
		background-size:contain ;
		color:papayawhip;
		justify-content:left;
		align-items:left;
		background-repeat:no-repeat;
		font-family:Arial;
		font-weight:bolder;
		font-size:5vh ;
		color:purple;
	}
	#mum p{
		text-align:center ;
		margin-top:-5px ;
	}
	.boku {
	float:left;
	padding:5px;
	border-radius:5px;
	background:blue;
	color:white;
	text-decoration:none;
}
hr {
	border:1px solid papayawhip;
	width:100% ;
	text-align: center;
}
#header {
	top:0 ;
	overflow:hidden ;
	width:100% ;
	padding:none;
	position:fixed;
	padding-left:40px ;
	display:inline-block ;
	background:linear-gradient(to right, black, black, darkgray, black, black);
	color:white;
	text-align:right;
	justify-content:space-between;
	border-bottom-right-radius:20px ;
	border-bottom-left-radius:20px ;

}
.first{
	float:left;
	width:50%;
}
.second{
	font-size:24px;
	float:right;
	width:50%;
	text-align:center ;
}
.truth{
	color:purple;
	font-weight:bolder;
	font-family:Arial;
}
.menus{
	margin:none ;
	padding:2px;
	text-align: center;
	padding-right:100px;
	color:white ;
}
.maid{
	background:papayawhip;
	color:black;
	padding:5px;
	border-radius:2px ;
}
.maid:hover{
	border:1px solid papayawhip ;
	transition:.5s ease ;
}
.mehh:hover{
	border:1px solid papayawhip ;
	transition:.5s ease ;
}
.mehh {
	color:white;
	padding:5px;
	border-radius:2px ;
}
li {
	display:inline-block;
	color:white;
	text-align:center;
	padding:10px 15px 12px;
	font-size:100%;
}
a {
	text-decoration:none;
	justify-content:space-between ;
}
button {
	padding:5px;
	background:none;
	border:1px solid papayawhip;
	color:white ;
	width:80px ;
	float:right;
}
button:hover {
	cursor:pointer ;
	background:papayawhip;
	color:black;
	transition:.5s ease;

}

/* Sly container */
.sly-container {
  max-width: 1000px;
  margin: auto;
  margin-top:100px;
}

/* Hide the images by default */
.mySly {
  display: none;
  text-align:center ;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position:revert-layer;
  width: 50px;
  padding: 20px;
  color: white;
  background:blue ;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  float:right ;
  border-radius: 3px 0 0 3px;
}
.prev{
	float:left ;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background:linear-gradient(to right, black, blue, black);
}

#foot a{
	text-decoration:none;
	color:lightblue;
}
#foot a:hover{
	color:red;
	border-bottom:1px solid white;
	transition:.5;
}
#foot{
		color:white;
		background-image:url(imgs/3.jpg);
		background-repeat:no-repeat;
		background-size:cover ;
		width:100%;
		height:500px;
		margin-top:200px ;
	}
	hr{
		border:1px solid white ;
	}
	#foot p{
		text-align:center;
		font-family:Calibri ;
	}
	.trl{
		margin-left:500px ;
	}
	.leftis{
		float:left;
		width: 33.3%; 
		text-align: center;
	}
	.leftis p{
		color:ghostwhite ;
		text-align:center;
	}
	.leftus{
		float:right;
		width: 33.3%; 
		text-align: center;
	}
	.leftus p{
		color:ghostwhite ;
		text-align:center;
	}
	.leftos{
		float:right;
		width: 33.3%; 
		text-align: center;
	}
	.leftos p{
		color:ghostwhite ;
		text-align:center;
	}
		nav {
		width: 100%;
		display: flex;
		align-content: center;
		justify-content: space-between;
		padding: 10px 0;
		background-color: black;
		color: white;
	}

.vist{
	width:50%;
	color:white;
	border-radius:10px ;
	border-radius:10px ;
	border:2px solid deepskyblue ;
	background:black;
}
.vist h2{
	justify-content:space-between;
	text-align:center ;
	margin-top:-70px ;
	padding:19px ;
}
.mist{
	float:right ;
	width:50%;
	color:white;
	border-radius:10px ;
	border:2px solid deepskyblue ;
	background:black;
}
.mist p{
	color:white ;
}
.mist h2{
	justify-content:space-between;
	text-align:center ;
	margin-top:-70px ;
	padding:19px ;
}
	.logo {
		width: 20%;
		cursor: pointer;
	}
	.gallery{
		padding:-50px ;
		margin-top:-50px ;
	}

	.line {
		border: 1px solid purple;
		color: purple;
	}

	.shift {
		float: right;
    	margin-top: -470px;
    	word-spacing: 2px;
    	line-height: 30px;
    	margin-right: 10px;
	}
.topnav {
		overflow:hidden;
		background:linear-gradient(to right, black, black, darkgray, black, black);
	}
	.topnav .menus .maid{
		color:black ;
	}
	.topnav a {
		float:right;
		display:inline-block;
		color:white;
		overflow:hidden ;
		padding:none;
		text-decoration:none;
		font-size:15px;
	} 

	.active {
		color:white;
	}
	.dropdown {
		float:right;
		color:white ;
		overflow:hidden;
	}
	.dropdown .dropbtn {
		font-size:17px;
		border:none;
		outline:none;
		color:white;
		padding:5px;
		margin:0;
	}

	@media screen and (max-width:600px){
		.topnav a:not(:first-child), .dropdown .dropbtn {
			display:none;
		}
		.topnav a.icon{
			float:right;
			display:block;
		}
	}

	@media screen and (max-width:600px) {
		.topnav.responsive {position:relative;}
		.topnav.responsive .icon{
			position:absolute;
			right:0;
			top:0;
			color:blue ;
		}
		.topnav.responsive a button {
			float:none;
			display:block;
			text-align:left;
			overflow:hidden ;

		}
		.topnav.responsive .dropdown {float: none;}

		.topnav.responsive .dropdown-content {position: relative;}

		.topnav.responsive .dropdown .dropbtn, .vist, .vist h2, .mist, .mist p, .mist h2 .mehn, .second, .leftis, .leftos, .leftus, .leftis p, .leftos p, .leftus p, .tech, .plat, .plt, .gallery, .truth, .first, .mehh, .menus, li, button, a, .active, #mum, #foot, #header {
			display:block;
			width: 100%;
			float:left ;
			text-align:left;
		}
	}