@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Sura:wght@400;700&display=swap");
.sidebar 
{
    list-style: none;
    background-color: #243444;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /*hides nav behind content */
    z-index: 0;
    /*get rid of color gap on top of menu*/
    margin-top: 0;
    background-image: -webkit-linear-gradient(270deg,rgba(16,0,42,0.49) 0%,rgba(145,2,154,0.36) 48.70%,rgba(255,0,0,0.23) 100%), url(images/test%20images/IMG_1428-Copy.jpg);
    background-image: -moz-linear-gradient(270deg,rgba(16,0,42,0.49) 0%,rgba(145,2,154,0.36) 48.70%,rgba(255,0,0,0.23) 100%), url(images/test%20images/IMG_1428-Copy.jpg);
    background-image: -o-linear-gradient(270deg,rgba(16,0,42,0.49) 0%,rgba(145,2,154,0.36) 48.70%,rgba(255,0,0,0.23) 100%), url(images/test%20images/IMG_1428-Copy.jpg);
    background-image: linear-gradient(180deg,rgba(16,0,42,0.49) 0%,rgba(145,2,154,0.36) 48.70%,rgba(255,0,0,0.23) 100%), url(images/test%20images/IMG_1428-Copy.jpg);
}
a 
{
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	text-decoration:none;
	color: #ffffff; /*white*/
	transition: 0.5s;
	text-transform: uppercase;
	cursor: pointer;
}
.dropdown-btn
{
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  	text-decoration: none;
	margin-top: 65px;
	padding: 5px;
	font-size: 18px;
  	color: #ffffff;
  	display: block;
  	border: none;
  	background: none;
  	width:100%;
  	text-align: left;
  	cursor: pointer;
	outline: none;
	text-transform: uppercase;
	transition: 0.5s;
}

.dropdown-container 
{
	display: none;
	padding-left: 8px;
	font-size: 14px;
	
}

.vertical
{
	list-style: square;
	color: white;
}

.fa-caret-down {
	float: left;
	padding-right: 0px;	
  } 

.dropdown-btn:hover
{
	color: #868686;
}


.sidebar a:hover 
{
	color: #868686;
}

li.nav-item 
{
	margin-top: 65px;
	padding: 5px;
	font-size: 18px;
}





		 /*--------end of navigation styling--------*/
  

/*hide the checkbox*/
.nav-trigger 
{
	position: absolute;
	clip: rect(0, 0, 0, 0);
}
  
  label[for="nav-trigger"] 
  {
	/*nav stays in the same spot as user scrolls*/
	position: fixed; 
	/*position hamburger menu*/
	top: 15px;
	left: 15px;
	/*z-index needs to be 1 higher than site-wrap*/
	z-index: 2;
	width: 30px;
	height: 30px;
	/*changing to pointer indicates interactivity*/
	cursor: pointer;
	color: #111111;
  }
  
  /*styling to create "hamburger" icon (refer to notes)*/
  .hidden_nav:before 
  {
	  content: "";
	  position: absolute;
	  top: 1em;
	  width: 2em;
	  height: .25em;
	  border-top: .75em double rgb(255, 255, 255);
	  border-bottom: 0.25em solid rgb(255, 255, 255);
	  z-index: 3;
  }
  
  /*the following lines make the effect work*/
  /*below styling controls label position when menu opens- add 15px, because we did left:15px in label[for="nav-trigger"]*/
  /*uses adjacent sibling selector (+) nav-trigger:checked must come first so label moves after checkbox is activated*/
  .nav-trigger:checked + label 
  {
	left: 200px;
  }
  
  /*ensures that the site-wrap is pushed to the right*/
  /*uses general sibling selector (~) to target site wrap after nav-trigger gets activated*/
  .nav-trigger:checked ~ .site-wrap {
	left: 180px;
  }
  
  /*add slight transition to effect*/
  
  .nav-trigger + label, .site-wrap {
	transition: left 0.2s;
  }

/*
	SIDEBAR ENDS

*/
/*
	NAV BAR STARTS HERE
*/
.nav
{
	margin: 25px auto auto auto;
	position: relative;
	width: 700px; 
	height: 50px;
	background-image:  linear-gradient(#3e5770 75%, #2f5172 100%);
	border-radius: 0px;
	font-size: 0px;

}

  /* NAV BAR LINKS*/
.nav a 
{
    line-height: 50px;
    height: 100%;
    font-size: 18px;
    display: inline-block;
    position: relative;
    z-index: 1;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    color: white;
    cursor: pointer;
    font-family: montserrat;
    font-style: normal;
    font-weight: 400;
}



.nav .animation 
{
	position: absolute;
	height: 10%;
	bottom: 0;
	z-index: 0;
	transition: all .5s ease 0s;
	border-radius: 3px;
}



a:nth-child(1) 
{
	width: 100px;
}
nav  .start-home, a:nth-child(1):hover~.animation {
	width: 100px;
	left: 0;
	background-color: rgb(252, 89, 84);
	}

a:nth-child(2) 
{
	width: 110px;
}
nav .start-games, a:nth-child(2):hover~.animation {
	width: 110px;
	left: 100px;
	background-color: rgb(84, 241, 252);;
	}
	
a:nth-child(3) 
{
	width: 100px;
}
nav .start-health, a:nth-child(3):hover~.animation 
{
	width: 100px;
	left: 210px;
	background-color: rgb(255, 199, 96);
}

a:nth-child(4) 
{
	width: 140px;
}
nav .start-aboutus, a:nth-child(4):hover~.animation 
{
width: 140px;
left: 311px;
background-color: rgb(246, 255, 124);
}

a:nth-child(5) 
{
	width: 140px;
}
nav .start-contact, a:nth-child(5):hover~.animation 
{
width: 120px;
left: 460px;
background-color: rgb(255, 62, 255);
}

a:nth-child(6) 
{
	width: 100px;
}
nav .start-sitemap, a:nth-child(6):hover~.animation 
{
width: 100px;
left: 600px;
background-color: rgb(62, 255, 62);
}

.nav a.active 
{
	
	border-radius: 0px;
	background-color: rgba(60, 180, 154, 0.5);
	
}



.orange
{
	margin-left: 15%;
	margin-right: 15%;
	border-color:orange;
}

/*

	NAV BAR ENDS HERE

*/

  .site-wrap 
  {
    min-height: 100%;
    margin-left: auto;
    margin-right: auto;
    min-width: 960px;
    background-image: -webkit-linear-gradient(270deg,rgba(16,0,42,0.49) 0%,rgba(145,2,154,0.36) 47.64%,rgba(255,0,0,0.23) 100%,rgba(44,62,80,1.00) 100%), url(images/test%20images/Black-wood-photoshop-pattern-for-website-background.jpg);
    background-image: -moz-linear-gradient(270deg,rgba(16,0,42,0.49) 0%,rgba(145,2,154,0.36) 47.64%,rgba(255,0,0,0.23) 100%,rgba(44,62,80,1.00) 100%), url(images/test%20images/Black-wood-photoshop-pattern-for-website-background.jpg);
    background-image: -o-linear-gradient(270deg,rgba(16,0,42,0.49) 0%,rgba(145,2,154,0.36) 47.64%,rgba(255,0,0,0.23) 100%,rgba(44,62,80,1.00) 100%), url(images/test%20images/Black-wood-photoshop-pattern-for-website-background.jpg);
    background-image: linear-gradient(180deg,rgba(16,0,42,0.49) 0%,rgba(145,2,154,0.36) 47.64%,rgba(255,0,0,0.23) 100%,rgba(44,62,80,1.00) 100%), url(images/test%20images/Black-wood-photoshop-pattern-for-website-background.jpg);
    top: 0;
    bottom: 100%;
    left: 0;
    z-index: 1;
    padding-left: 0em; /*spaces out content from hamburger*/
    left: 0;
    position: relative;
    -moz-transform-origin: top left;
    -ms-transform-origin: top left;
    -o-transform-origin: top left;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;


} 





body 
{
	overflow-x: hidden;
}
.logo 
{
    text-align: center;
    color: #ecf0f1;
    font-size: 50px;
    font-family: Montserrat;
    text-decoration: none;
    font-variant: normal;
    font-style: normal;
    font-weight: lighter;
	
}

h1
{
	text-underline-position: below;
	color: #ecf0f1;
	font-family: Montserrat;
	margin-top: 25px;
	margin-bottom: 0px;
}

h3
{
	
	color: orange;
	font-family: Montserrat;
	font-style: italic;
	margin-top: 25px;
	margin-bottom: 0px;
	font: 20px;
}

.content 
{
	position: relative;
	width: 50%;
	height: 100%;
	padding-left: 380px;
	padding-right: 300px;
	transition: 0.3s;
  
}
p
{
	
	text-align: justify;
	color: white;
	font-size: 17px;
	font-family: fantasy
	
}
span
{
	color: lightblue;
}

/*Responsive Styles*/
@media screen and (max-width : 800px){
    /*Make dropdown links appear inline*/
    .nav {
        position: static;
        display: none;
    }
    /*Create vertical spacing*/
    li {
        margin-bottom: 1px;
    }
    /*Make all menu links full width*/
    .nav a {
        width: 100%;
    }
}
@media screen and (min-width: 601px) {
	div.content {
			
	  font-size: 17px;
	}
  }
  
  @media screen and (max-width: 600px) {
	div.content {
	  font-size: 10px;
	}
  }


.orange
{
	margin-left: 15%;
	margin-right: 15%;
	border-color:orange;

}

.aboutus
{
	
	margin-left: 16%;
	margin-right: 16%;
	text-align: justify;
}

.aboutus .heading
{
	font-size: 30px;
	color: orange
}

.aboutus p
{
	margin: 0 auto;
	margin-top: 0%;
}
.navi {
    width: 592px;
}
.playsmarthead {
    font-family: montserrat;
    font-style: normal;
    font-weight: 400;
    text-decoration: none;
}
.motto {
    text-decoration: none;
    font-family: montserrat;
    font-style: normal;
    font-weight: 400;
    font-size: small;
}
.paramain {
    font-family: montserrat;
    font-style: normal;
    font-weight: 400;
}
.headingmain {
    font-family: montserrat;
    font-style: normal;
    font-weight: 400;
}
.image {
    margin-top: 30px;
}
.image1 {
    margin-left: 150px;
    margin-top: 30px;
    margin-bottom: 0px;
}
.contactus {
    margin-left: 246px;
    margin-right: 243px;
}
.contacttitle1 {
    font-family: montserrat;
    font-style: normal;
    font-weight: 400;
    color: hsla(32,100%,50%,1.00);
    margin-left: 94px;
    margin-top: 3%;
    padding-top: 0px;
    margin-bottom: -50px;
    padding-left: 1px;
}
.contactpara1 {
    margin-left: 95px;
    margin-bottom: -72px;
    padding-top: 39px;
    font-family: montserrat;
    font-style: normal;
    font-weight: 400;
    font-size: medium;

}
.body2 {
    padding-left: 55px;
    padding-right: 55px;
}
.sectionline {
    margin-left: 55px;
    margin-right: 55px;
}
[8:55 PM, 12/27/2020] Talha Momin BSCS-01: <div class="container">  
  <form id="contact" action="" method="post">
    <h3>Wanna Talk? ;)</h3>
    <h4>We Reply to All of your mails!</h4>
    <fieldset>
      <input placeholder="Your name" type="text" tabindex="1" required autofocus>
    </fieldset>
    <fieldset>
      <input placeholder="Your Email Address" type="email" tabindex="2" required>
    </fieldset>
    <fieldset>
      <input placeholder="Your Phone Number (optional)" type="tel" tabindex="3" required>
    </fieldset>
    <fieldset>
      <textarea placeholder="Type your message here...." tabindex="5" required></textarea>
    </fieldset>
    <fieldset>
      <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
    </fieldset>

  </form>
</div>
[8:55 PM, 12/27/2020] Talha Momin BSCS-01: @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic);
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 100;
  font-size: 12px;
  line-height: 30px;
  color: #777;
  background: #4CAF50;
}

.container {
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea,
#contact button[type="submit"] {
  font: 400 12px/16px "Roboto", Helvetica, Arial, sans-serif;
}

#contact {
    background: #F9F9F9;
    padding-top: 25px;
    padding-right: 25px;
    padding-left: 25px;
    padding-bottom: 25px;
    margin-top: 150px;
    margin-right: 1px;
    margin-left: 0px;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
    /* [disabled]margin-bottom: 141px; */
}

#contact h3 {
  display: block;
  font-size: 30px;
  font-weight: 300;
  margin-bottom: 10px;
}

#contact h4 {
  margin: 5px 0 15px;
  display: block;
  font-size: 13px;
  font-weight: 400;
}

fieldset {
  border: medium none !important;
  margin: 0 0 10px;
  min-width: 100%;
  padding: 0;
  width: 100%;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea {
  width: 100%;
  border: 1px solid #ccc;
  background: #FFF;
  margin: 0 0 5px;
  padding: 10px;
}

#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact input[type="url"]:hover,
#contact textarea:hover {
  -webkit-transition: border-color 0.3s ease-in-out;
  -moz-transition: border-color 0.3s ease-in-out;
  transition: border-color 0.3s ease-in-out;
  border: 1px solid #aaa;
}

#contact textarea {
  height: 100px;
  max-width: 100%;
  resize: none;
}

#contact button[type="submit"] {
  cursor: pointer;
  width: 100%;
  border: none;
  background: #4CAF50;
  color: #FFF;
  margin: 0 0 5px;
  padding: 10px;
  font-size: 15px;
}

#contact button[type="submit"]:hover {
  background: #43A047;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.copyright {
  text-align: center;
}

#contact input:focus,
#contact textarea:focus {
  outline: 0;
  border: 1px solid #aaa;
}

::-webkit-input-placeholder {
  color: #888;
}

:-moz-placeholder {
  color: #888;
}

::-moz-placeholder {
  color: #888;
}

:-ms-input-placeholder {
  color: #888;
}
.form {
    margin-left: 0px;
    margin-top: 0px;
}
@media (min-width: 1001px) {
}
}
.columns {
	width: 50%;
	float: left;
	padding-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
}
}

@media (min-width: 1001px) {
}
.thumbnail {
    width: 100px;
    border-radius: 200px;
    height: 100px;
    margin-left: 5%;
    padding-right: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
}
.thumbnail_align {
	text-align: center;
}
.contactus1 {
    margin-bottom: -142px;
}
.asad {
    margin-left: 549px;
    margin-bottom: 30px;
    margin-top: -110px;
}
.ammar {
    margin-left: 493px;
    margin-bottom: 8px;
    margin-top: -38px;
}
.socialmedia {
    font-family: montserrat;
    font-style: normal;
    font-weight: 400;
}
.id {
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    font-style: normal;
    font-weight: 400;
}