/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
/* * {
  
} */

body {
  background-image: url(img\web-development-1200x682.jpg);
  background-color:black
}
/* header {
  background-color:rgb(172, 250, 28);
  width: 100%;
  margin-top: 50%;
  padding-bottom: 20rem;
  
  
} */
/* footer {
  background-color: red;
  padding-top: 800rem;
  width: 100%;
  margin-top: 0.50%;
 } */


/* footer p {
  display: flex;
  align-items: center;
  width: 100%;
  color: orange;

} */

html {
  font-size: 62.5%;

}
html,

h1,
h2,
h3,
h4,
h5 {
  font-family: 'Russo One', sans-serif;
  color: #1ff303;
}
h1 {
  font-size: 4rem;
}
h2 {
  font-size: 3.2rem;
}
h3 {
  font-size: 2.8rem;
}
p {
  font-size: 1.6rem;
  line-height: 1.4;
}
.container {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}
.nav a button {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}

.nav a:hover {
  box-shadow: 0 0 10px 11px rgba(247, 247, 30, 0.5);
}

.home-button  button {
  border: 1px solid rgb(91, 221, 5);
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}

.home-button button:hover {
  box-shadow: 0 0 10px 16px rgba(26, 11, 230, 0.5);
}

.features-h1 h1 {
  
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}

.features-h1 h1:hover {
  box-shadow: 0 0 10px 11px rgba(240, 240, 12, 0.5);
}


/* .lambda-logo img {
  height: 55px;
  width: 10%;
 padding-left: 40rem;
 margin-right: 120rem;
 
 
} */

footer {
  display: flex;
  justify-content: center;
  width: auto;
  border: solid 2px rgb(49, 95, 2);
  font-size: 2rem;
  color: rgb(204, 105, 13);
  margin-top: 9rem;
  border-radius: 20%;
  background-color: rgb(7, 36, 23);
}

footer:hover {
  box-shadow: 0 0 10px 19px rgba(237, 253, 8, 0.5);
  color: #0f0d00;
  background: rgb(221, 224, 5);
}
.extra button{
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}

.extra button:hover {
  box-shadow: 0 0 10px 19px rgba(221, 19, 5, 0.5);
}

/* .lambda-logo img {
  display: flex;
  justify-content: flex-start;
  width: 20%;
  align-content: flex-start;
  padding-right: 36rem;
  
}
.lambda-logo {
  display: flex;
  justify-content: flex-start;
  /* width: 20%; */
  /* align-content: flex-start;
  padding-right: 36rem;
  padding-bottom: 10%;
}  */ 


/* 
.select-img {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: wrap;
  width: 50%;
  
} */

















.h-helper h3 {
  color: rgba(255, 255, 255, 0.534);
  font-size: medium;
  display: flex;
  align-items: center;
  justify-content: center;
}

.intro button {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}

.intro button:hover {
  box-shadow: 0 0 10px 11px rgba(231, 231, 31, 0.5);
}


  /* .images img {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 5px;
    width: 400px;
   
  } */

  .images img:hover {
    box-shadow: 0 0 25px 20px rgba(231, 252, 48, 0.5);
  }
  .images h2:hover{
    box-shadow: 0 0 25px 20px rgba(230, 255, 3, 0.5);
    background-color: rgb(245, 7, 146);
    color: lemonchiffon;
    border-radius: 70px;
  }
  .first-one h1:hover{
    box-shadow: 0 0 25px 20px rgba(4, 21, 250, 0.5);
    background-color: rgb(10, 10, 17);
    color: rgb(9, 223, 134);
    border-radius: 100%;
    
  }





.navbar {

  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: #1ff303;
  border-bottom: 2px #F1F1F1;
}

.intro img {
  border-radius: 70%;
 
}
.navbar .nav {
  max-width: 600px;
  width: 100%;
  padding: 2rem;
  display: flex;
  justify-content: space-around;
}
.navbar .nav a {
  text-decoration: none;
  font-size: 1.8rem;
  color: rgb(233, 6, 6);
  border: solid 10px rgb(192, 243, 8);
  border-radius: 15%;
  background-color: rgb(19, 1, 5);
  font-size: medium;
  padding:2%;
}


.intro button {
  display: flex;
  align-items: center;
  width: 50%;
  padding-left: 120px;
  margin-left: 185px;
  margin-top: 10px;
  border-radius: 10px;
  border-style: solid;
  background-color: palevioletred;
  border-color: palegreen;
  color: black;
  font-size: xx-large;
  color: #f0c506;
}
.intro button:hover {
  color: chartreuse;
  background-color: chocolate;
}
/* footer:hover {
  background-color: violet;
}
footer p:hover {
  color: yellow;
} */
.first-paragraph p {
  color: yellow;
  font-size: xx-large;
  padding-left: 100rem;

  
}


.intro p {
  display: flex;
  align-items: center;
  font-size: small;
 
}
.intro p:hover {
  color: indianred;
}


.intro h2, p {
  display: flex;
  align-items: center;
  margin-left: 300px;
  
}

.intro h2 {
  margin-left: 250px;

}


.navbar .nav a:hover {
  color:rgb(230, 247, 4);
  font-size: larger;
}
.header-img img {
  width: 100%;
}
 
.intro h2:hover {
  color: yellow;
 
  text-transform: capitalize;
}
.navbar p {
  color: red;
  display: flex;
  align-items: flex-start;
  width: 50%;
}

.navbar h1:hover{
  color: orange;
  font-size: larger;
}

.navbar h1 {
  color: yellow;
  display: flex;
  align-items: flex-start;
  width: 100%;
  
}
.first-one h1 {
  color: blue;

}
.first-one h1:hover {
  color: gold;
}

.home .intro {
  display: block;
  margin: 0 auto;
}
.home .intro h2 {
  padding: 15px;
}
.home .intro p {
  padding: 0 15px;
}

@media (max-width: 500px) {
  html {
    font-size: 55%;
  }
}
@keyframes anim {
  30% {
    border-radius: 70px;
  }
  50% {
    border-radius: 70px;
  }
  80% {
    border-radius: 20px;
  }
}


/*
second page 
*/
/* .middle-section {
  display: flex;
  justify-content: space-around;
  width: 50%;
} */
/* .team-lead p{
  display: flex;
  justify-content: center;
  width: 50%;
} */
  /*/hovers/*/
/* 
.team-lead p:hover {
  color: yellowgreen;
} */
/* .middle-section p:hover{
  color: yellowgreen;
} */
/* .daren p:hover {
  color: yellowgreen;
} */
/* .first-one h1:hover {
  color: yellowgreen;
} */

.images h2 {
  color: rgb(231, 235, 5);
  font-size: 30px;
  display: flex;
  justify-content: center;
  margin-bottom: 3%;
  margin-top: 9%;
}
.images  {
  background-color: rgb(121, 219, 9);
  display: flex;
  /* flex-direction: row wrap; */
  flex-flow: wrap;
  width: 90%;
}

.first-one h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-top: 10rem;
  padding-bottom: 20rem;
  color: red;
}
/* .footer-two footer {
  display: flex;
  margin-top: 30rem;
  padding-bottom: 2rem;
  margin-right: 50%;
  
} */
/* .daren p {
  display: flex;
  justify-content: center;
  width: 50%;
  padding-bottom: 60rem;
  padding-top: 14rem;
} */

 .images img {
  display: flex;
  justify-content: center;
  width: auto;
  height:330px;
  border-radius: 50%;
}
.images {
  display: flex;
  width: auto;
  align-items: center ;
  justify-content: space-between;
  background-color:rgb(8, 8, 8);
} 
 .images img {

  display: flex;
  align-items: center;
 
  justify-content: center
}  




/*Third Page(log in)/*/
/* .login-header p1 {
  display: flex;
  justify-content: center;
  color: rgb(0, 255, 0);
  width: 100%;
  padding-top: 3rem;
  padding-bottom: 13rem;
} */
.bg-img {
  display: flex;
  justify-content: center;
  background-color: rgb(50, 114, 8);
  width: 100%;

}
.sign-up button {
  color: rgb(229, 255, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 10rem;
  margin: auto;
  /* text-shadow: royalblue; */
  /* background-color: black; */
  /* text-decoration: chartreuse; */
  color: #0a2df1;
  font-size: 21px;
  font-weight: bold;
  font-style: oblique;
 
  width: 150px;
  height: 75px;
  background-color: rgb(250, 250, 8);
  border:  solid 9px rgb(10, 255, 83);
  margin-top: 2%;
  border-radius: 50%;
  
 
}

.bg-img button {
  border-radius: 10%;
  border: 4px yellow solid;
}
/*hovers*/
.sign-up button:hover {
  color: greenyellow;
  background-color: rgb(143, 10, 252);
  box-shadow: 0 0 10px 11px rgba(255, 255, 5, 0.5);
}
.home-button button:hover {
  background-color: rgb(247, 10, 10);
  color: #f0c506;
}
.login-header p:hover {
  color: cyan;
  /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
  font-weight: bolder;
  width: auto;
}
.container button:hover {
  color:blue;
  background-color: yellow;
}





.container button {
  color: red;
  background-color: black;
 

} 

.container {
  display: flex;
  justify-content: center;
  width: 100%;
  padding-bottom: 15rem;
  padding-top: 15rem;
}

.btn {
  display: flex;
  padding-left: 1rem;
  margin-left: 3rem;
  border-radius: 50%;
  background-color: rgb(13, 212, 226);
  color: rgb(8, 8, 3);
  text-decoration-style: double;
}

.container h4 {
  color: rgb(40, 231, 23);
  padding-right: 3rem;
  
  
}

/*
features page*/
.features-image img{
  width: 100%;
}

.features-h1 h1 {
  color: red;
  display: flex;
  justify-content: center;
  width: 100%;
  align-items: flex-start;
}
.features-h1 h1:hover {
  color: yellow;
}

.extra h3 {
  color:red;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2%;
}
.home-button button {
  color: rgb(20, 20, 20);
  background-color: rgb(167, 171, 172);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15%;
  height: 50px;
  border: solid rgb(133, 243, 23) 9px;
  font-size: larger;
  font-weight: bolder;
  margin-left: 42%;
  padding: 2px;
  margin-right: 3%;
}
.extra button {
  color: rgb(0, 255, 34);
  background-color: rgb(13, 212, 226);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15%;
  height: 50px;
  border: solid rgb(200, 255, 0) 9px;
  font-size: larger;
  font-weight: bolder;
  margin-left: 42%;
  padding: 2px;
  margin-right: 3%;
  color: black;
  padding-bottom: 0%;
  background-color: rgb(139, 240, 24);
  padding-top: 0%;
  margin-top: 5%;
  

}

.container label {
  color: transparent;
}

.container h4 {
  color: #221d05;
  font-size: x-large;
}
.container input {
  color: red;
  font-size: larger;
  font-weight: bold;
  background-color: yellow;


}



/* .images div {
  color: black;
  font-weight: bold;
  font-size: 10px;
} */



/* .sign-up button {
  color: #0e1e79;
  font-size: 23px;
  font-weight: bold;
  font-style: oblique;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  width: 300px;
  height: 80px;
  background-color: rgb(111, 49, 192);
  /* border: dotted rgb(1, 47, 107) 19px;  */
   /* border: thick; */
  /* border-radius: 30%; 
  
} */ 

/* .container button {
  color: red;
  background-color: rgb(66, 212, 29);
  font-size: larger;
  font-weight: bold;
  
} */




.login-header p {
  color: rgb(0, 255, 42);
  width: auto;
  margin-left: 35%;
  /* margin: auto; */
  padding-bottom: 4%;
  padding-top: 4%;
}
.login-header p:hover {
  color:rgb(255, 0, 0);
}




/*mediaQueries
first page
*/

/* @media screen and (min-width: 480px) {
  body {
    background-color: black;
  }
} */



/* mediaQueries at 500px */

@media(max-width: 500px) {
  .intro h2 {
    color: brown;
    display: flex;
    justify-content: center;
    width: 50%;
    margin-right: 13rem;
    margin-left: 13rem;
    
    padding-left: 20rem;
    
  }

  .intro button {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    width: 150px;
  }

  .intro button:hover {
    box-shadow: 0 0 10px 11px rgba(17, 17, 16, 0.5);
  }
  
  .first-one h1 {
    color: rgb(247, 72, 19);
    background-color: rgb(24, 24, 20);
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  
  }
  .images img {
    display: flex;
    /* margin: 6%; */
    width: 9%;
    background-color: yellow;
    color: rgb(250, 23, 23);
    height: 80px;
  }
  .images {
    color:black;
    background-color: cornsilk;
  }
  .intro p {
    color:palevioletred;
    display: flex;
    justify-content: center;
    width: 50%;
    margin-right: 13rem;
    margin-left: 13rem;
    
    padding-left: 20rem;

    

  }
  .h-helper h3 {
    color: black;
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .h-helper h2 {
    color:burlywood;
    /* display: flex;
    align-items: center;
    justify-content: center; */
    width: 100%;
   /* padding-right: 50rem; */
   margin:0.50%;
   
   
  }
  *{
    background-color: cornsilk;
   
  }

  /* body {
    
    background-color: rgb(14, 11, 0)
  } */
 /* .navbar nav  a {
   color:rgb(204, 17, 17);
 } */

  .intro button {

    color: rgb(133, 108, 8);
    display: flex;
    justify-content: center;
    width: 55%;
    margin-right: 13rem;
    margin-left: 13rem;
    padding-right: 0rem;
    padding-left: 0rem;
    background-color: rgb(208, 255, 0);
    
  }
  /* .extra button {
    color: black;
    padding-bottom: 8%;
    background-color: yellow;
    
  } */
  .features-h1 h1 {
    background-color:black;
  }

  /* .home-button {
    background-color:black;
    
  } */

  .bg-img {
    display: flex;
    justify-content: center;
    width: 50%;

  }.bg-img {
    width: 100%;
  }
  /* .bm-img h4 {
    /*font-size: xxx-large; */
  
  .container input {
    width: 20%;
    background-color: rgb(246, 245, 250);
    display: flex;
    flex-direction: column;
  }
  .container label {
    color: transparent;
  }
.login-header p {
  
  
  color: rgb(59, 34, 202);
 
  width: auto;
  margin: 5%;
  
  padding-right: 33%;
  font-size: 16px;

 

}

.login-header p:hover {
  color: rgb(38, 0, 255);
  font-size: larger;
  font-weight: bolder;
  
  font-stretch: wider;
  font-style: oblique;
  font-variant-caps: titling-caps;
  font-kerning: auto;
  font-size: small;
  font-size-adjust: inherit;
  
}
.third-page-images {
  background-color: red;
  border: solid 6px yellow;
}

.first-one h1 {
  border:  6px ridge yellow;
  width: auto;
}

  /* .login-header {
    background-color:black;
    display: flex;
    align-content: center;

  } */
 
  .images img {
    border: 5px solid rgb(15, 1, 1);
    border-radius: 4px;
    padding: 5px;
    width: 100rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
  }
  .images h2 {
    font-size: medium;
    background-color: transparent;
  }

  .images img:hover {
    box-shadow: 0 0 5px 10px rgba(255, 0, 170, 0.5);
  }
  .container h4 {
    color: rgb(18, 18, 19);
    font-size: x-large;
    font-weight: bolder;
  }
  .login-header {
    background-color: cornsilk;
  }
  
  .extra button {
    color: rgb(43, 11, 184);
    padding-bottom: 2rem;
    padding-top: 1rem;
    background-color: black;
  
  }
.images {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  /* max-width: 100%; */
  /* background-color: rgb(214, 255, 8); */
}
.images img {
  width: 140px;
  height: 140px;
  display: flex;
  justify-content: center;
  

}





.images h2 {
  color: black;
  font-size: 20px;
  padding: 5%;
  background-color: transparent;
}
/* .images h2 {
  color: red;
 
} */
 .nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

} 

 .nav a{
  border: 3px solid rgb(219, 193, 193);
  padding: 13px;
  display: flex;
  justify-content: center;
  width: 50%;
  margin: 20px;
  font-size: x-large;
  align-items: center;
  

} 
.navbar {
  display: flex;
  align-items: center;
  justify-content: center;
  
  
} 


footer {
  display: flex;
  justify-content: center;
  width: auto;
  border:  rgb(4, 7, 0);
  font-size: 2rem;
  color: rgb(19, 17, 17);
  border: solid 3px rgb(0, 0, 0);
  border-radius: 40%;
  background-color: turquoise;
}






}



/************************************************************@ media 600px*************************************/
@media(max-width: 600px) {
  .intro h2 {
    color: brown;
    display: flex;
    justify-content: center;
    width: 50%;
    margin-right: 13rem;
    margin-left: 13rem;
    
    padding-left: 20rem;
    
  }
  .first-one h1 {
    color: rgb(247, 72, 19);
    background-color: rgb(24, 24, 20);
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  
  }
  .images img {
    display: flex;
    /* margin: 6%; */
    width: 9%;
    background-color: yellow;
    color: rgb(250, 23, 23);
    height: 80px;
  }
  .images {
    color:black;
    background-color: cornsilk;
  }
  .intro p {
    color:palevioletred;
    display: flex;
    justify-content: center;
    width: 50%;
    margin-right: 13rem;
    margin-left: 13rem;
    
    padding-left: 20rem;

    

  }
  .h-helper h3 {
    color: black;
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .h-helper h2 {
    color:burlywood;
    /* display: flex;
    align-items: center;
    justify-content: center; */
    width: 100%;
   /* padding-right: 50rem; */
   margin:0.50%;
   
   
  }

  body {
    
    background-color: cornsilk
  }
 .navbar nav  a {
   color:rgb(204, 17, 17);
 }

  .intro button {

    color: rgb(133, 108, 8);
    display: flex;
    justify-content: center;
    width: 55%;
    margin-right: 13rem;
    margin-left: 13rem;
    padding-right: 0rem;
    padding-left: 0rem;
    background-color: lime;
    
  }
  /* .extra button {
    color: black;
    padding-bottom: 8%;
    background-color: yellow;
    
  } */
  .features-h1 h1 {
    background-color:black;
  }

  /* .home-button {
    background-color:black;
    
  } */

  .bg-img {
    display: flex;
    justify-content: center;
    width: 50%;

  }.bg-img {
    width: 100%;
  }
  /* .bm-img h4 {
    /*font-size: xxx-large; */
  
  .container input {
    width: 20%;
    background-color: rgb(45, 32, 165);
    display: flex;
    flex-direction: column;
  }
  .container label {
    color: transparent;
  }
  .login-header {
    background-color: cornsilk;
  }
  .login-header p {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    /* padding-left: 16rem; */
    color: rgb(10, 1, 2);
    padding-right: 1rem;

  }
  .container h4 {
    color: rgb(13, 45, 66);
    font-size: x-large;
    font-weight: bolder;
  }
  
  .extra button {
    color: darkgoldenrod;
    padding-bottom: 6rem;
    padding-top: 1rem;
  }
.images {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  /* max-width: 100%; */
  /* background-color: rgb(5, 147, 190); */
}
.images img {
  width: 140px;
  height: 140px;
  display: flex;
  justify-content: center;

}


.images h2 {
  color: black;
  font-size: 20px;
  padding: 5%;
  background-color: transparent;
}
/* .images h2 {
  color: red;
 
} */
.nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

.nav a{
  border: 3px solid rgb(20, 2, 2);
  padding: 13px;
  display: flex;
  justify-content: center;
  width: 50%;
  margin: 20px;
  font-size: x-large;
  align-items: center;
  

}
.navbar {
  display: flex;
  align-items: center;
  justify-content: center;
  
  
}





}

/***********************************************************at media 700px**************************************/
@media(max-width: 700px) {
  .intro h2 {
    color: brown;
    display: flex;
    justify-content: center;
    width: 50%;
    margin-right: 13rem;
    margin-left: 13rem;
    
    padding-left: 20rem;
    
  }
  .first-one h1 {
    color: rgb(247, 72, 19);
    background-color: rgb(24, 24, 20);
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  
  }
  .images img {
    display: flex;
    /* margin: 6%; */
    width: 9%;
    background-color: yellow;
    color: rgb(250, 23, 23);
    height: 80px;
  }
  .images {
    color:black;
    background-color: cornsilk;
  }
  .intro p {
    color:palevioletred;
    display: flex;
    justify-content: center;
    width: 50%;
    margin-right: 13rem;
    margin-left: 13rem;
    
    padding-left: 20rem;

    

  }
  .h-helper h3 {
    color: black;
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .h-helper h2 {
    color:burlywood;
    /* display: flex;
    align-items: center;
    justify-content: center; */
    width: 100%;
   /* padding-right: 50rem; */
   margin:0.50%;
   
   
  }

  body {
    
    background-color: cornsilk
  }
 .navbar nav  a {
   color:rgb(204, 17, 17);
 }

  .intro button {

    color: rgb(133, 108, 8);
    display: flex;
    justify-content: center;
    width: 55%;
    margin-right: 13rem;
    margin-left: 13rem;
    padding-right: 0rem;
    padding-left: 0rem;
    background-color: lime;
    
  }
  /* .extra button {
    color: black;
    padding-bottom: 8%;
    background-color: yellow;
    
  } */
  .features-h1 h1 {
    background-color:black;
  }

  /* .home-button {
    background-color:black;
    
  } */

  .bg-img {
    display: flex;
    justify-content: center;
    width: 50%;

  }.bg-img {
    width: 100%;
  }
  /* .bm-img h4 {
    /*font-size: xxx-large; */
  
  .container input {
    width: 20%;
    background-color: rgb(45, 32, 165);
    display: flex;
    flex-direction: column;
  }
  .container label {
    color: transparent;
  }
  .login-header {
    background-color: cornsilk;
  }
  .login-header h1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60%;
    padding-left: 16rem;

  }
  .container h4 {
    color: rgb(13, 45, 66);
    font-size: x-large;
    font-weight: bolder;
  }
  
  .extra button {
    color: darkgoldenrod;
    padding-bottom: 4rem;
    padding-top: 1rem;
  }
.images {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  /* max-width: 100%; */
  /* background-color: rgb(5, 147, 190); */
}
.images img {
  width: 140px;
  height: 140px;
  display: flex;
  justify-content: center;

}


.images h2 {
  color: black;
  font-size: 20px;
  padding: 5%;
  background-color: transparent;
}
/* .images h2 {
  color: red;
 
} */
.nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

.nav a{
  border: 3px solid rgb(20, 3, 3);
  padding: 13px;
  display: flex;
  justify-content: center;
  width: 50%;
  margin: 20px;
  font-size: x-large;
  align-items: center;
  

}
.navbar {
  display: flex;
  align-items: center;
  justify-content: center;
  
  
}

.nav a {
  
    border: 1px solid rgb(22, 241, 168);
    border-radius: 4px;
    padding: 5px;
    width: 150px;
  }

  .nav a:hover {
    box-shadow: 0 0 5px 6px rgba(24, 10, 224, 0.5);
  }
}

.intro img {
  
    border: 1px solid #ddd;
   
  }

  .intro img:hover {
    box-shadow: 0 0 10px 10px rgba(231, 19, 203, 0.5);
  }



}


}

/*****************************************************@media 800px**********************************************/
@media(max-width: 800px) {
  .intro h2 {
    color: brown;
    display: flex;
    justify-content: center;
    width: 50%;
    margin-right: 13rem;
    margin-left: 13rem;
    
    padding-left: 20rem;
    
  }
  .first-one h1 {
    color: rgb(247, 72, 19);
    background-color: rgb(24, 24, 20);
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  
  }
  .images img {
    display: flex;
    /* margin: 6%; */
    width: 9%;
    background-color: yellow;
    color: rgb(250, 23, 23);
    height: 80px;
  }
  .images {
    color:black;
    background-color: cornsilk;
  }
  .intro p {
    color:palevioletred;
    display: flex;
    justify-content: center;
    width: 50%;
    margin-right: 13rem;
    margin-left: 13rem;
    
    padding-left: 20rem;

    

  }
  .h-helper h3 {
    color: black;
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .h-helper h2 {
    color:burlywood;
    /* display: flex;
    align-items: center;
    justify-content: center; */
    width: 100%;
   /* padding-right: 50rem; */
   margin:0.50%;
   
   
  }

  body {
    
    background-color: cornsilk
  }
 .navbar nav  a {
   color:rgb(204, 17, 17);
 }

  .intro button {

    color: rgb(133, 108, 8);
    display: flex;
    justify-content: center;
    width: 55%;
    margin-right: 13rem;
    margin-left: 13rem;
    padding-right: 0rem;
    padding-left: 0rem;
    background-color: lime;
    
  }
  /* .extra button {
    color: black;
    padding-bottom: 8%;
    background-color: yellow;
    
  } */
  .features-h1 h1 {
    background-color:black;
  }

  /* .home-button {
    background-color:black;
    
  } */

  .bg-img {
    display: flex;
    justify-content: center;
    width: 50%;

  }.bg-img {
    width: 100%;
  }
  /* .bm-img h4 {
    /*font-size: xxx-large; */
  
  .container input {
    width: 20%;
    background-color: rgb(45, 32, 165);
    display: flex;
    flex-direction: column;
  }
  .container label {
    color: transparent;
  }
  .login-header {
    background-color: cornsilk;
  }
  .login-header h1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60%;
    padding-left: 16rem;

  }
  .container h4 {
    color: rgb(13, 45, 66);
    font-size: x-large;
    font-weight: bolder;
  }
  
  .extra button {
    color: darkgoldenrod;
    padding-bottom: 6rem;
    padding-top: 1rem;
  }
.images {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  /* max-width: 100%; */
  /* background-color: rgb(5, 147, 190); */
}
.images img {
  width: 140px;
  height: 140px;
  display: flex;
  justify-content: center;

}


.images h2 {
  color: black;
  font-size: 20px;
  padding: 5%;
  background-color: transparent;
}
/* .images h2 {
  color: red;
 
} */
.nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

.nav a{
  border: 3px solid rgb(182, 8, 8);
  padding: 13px;
  display: flex;
  justify-content: center;
  width: 50%;
  margin: 20px;
  font-size: x-large;
  align-items: center;
  

}
.navbar {
  display: flex;
  align-items: center;
  justify-content: center;
  
  
}





}


/*******************************************************@media 400px*********************************************/
@media(max-width: 400px) {
  .intro h2 {
    color: brown;
    display: flex;
    justify-content: center;
    width: 50%;
    margin-right: 13rem;
    margin-left: 13rem;
    
    padding-left: 20rem;
    
  }
  .first-one h1 {
    color: rgb(247, 72, 19);
    background-color: rgb(24, 24, 20);
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  
  }
  .images img {
    display: flex;
    /* margin: 6%; */
    width: 9%;
    background-color: yellow;
    color: rgb(250, 23, 23);
    height: 80px;
  }
  .images {
    color:black;
    background-color: cornsilk;
  }
  .intro p {
    color:palevioletred;
    display: flex;
    justify-content: center;
    width: 50%;
    margin-right: 13rem;
    margin-left: 13rem;
    
    padding-left: 20rem;

    

  }
  .h-helper h3 {
    color: black;
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .h-helper h2 {
    color:burlywood;
    /* display: flex;
    align-items: center;
    justify-content: center; */
    width: 100%;
   /* padding-right: 50rem; */
   margin:0.50%;
   
   
  }

  body {
    
    background-color: cornsilk
  }
 .navbar nav  a {
   color:rgb(204, 17, 17);
 }

  .intro button {

    color: rgb(133, 108, 8);
    display: flex;
    justify-content: center;
    width: 55%;
    margin-right: 13rem;
    margin-left: 13rem;
    padding-right: 0rem;
    padding-left: 0rem;
    background-color: lime;
    
  }
  /* .extra button {
    color: black;
    padding-bottom: 8%;
    background-color: yellow;
    
  } */
  .features-h1 h1 {
    background-color:black;
  }

  /* .home-button {
    background-color:black;
    
  } */

  .bg-img {
    display: flex;
    justify-content: center;
    width: 50%;

  }.bg-img {
    width: 100%;
  }
  /* .bm-img h4 {
    /*font-size: xxx-large; */
  
  .container input {
    width: 20%;
    background-color: rgb(45, 32, 165);
    display: flex;
    flex-direction: column;
  }
  .container label {
    color: transparent;
  }
  .login-header {
    background-color: cornsilk;
  }
  .login-header h1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60%;
    padding-left: 16rem;

  }
  .container h4 {
    color: rgb(13, 45, 66);
    font-size: x-large;
    font-weight: bolder;
  }
  
  .extra button {
    color: darkgoldenrod;
    padding-bottom: 6rem;
    padding-top: 1rem;
  }
.images {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  /* max-width: 100%; */
  /* background-color: rgb(5, 147, 190); */
}
.images img {
  width: 140px;
  height: 140px;
  display: flex;
  justify-content: center;

}


.images h2 {
  color: black;
  font-size: 20px;
  padding: 5%;
  background-color: transparent;
}
/* .images h2 {
  color: red;
 
} */
.nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

.nav a{
  border: 3px solid rgb(182, 8, 8);
  padding: 13px;
  display: flex;
  justify-content: center;
  width: 50%;
  margin: 20px;
  font-size: x-large;
  align-items: center;
  

}
.navbar {
  display: flex;
  align-items: center;
  justify-content: center;
  
  
}





}

/*******************************************************@300px**************************************************/
@media(max-width: 300px) {
  .intro h2 {
    color: brown;
    display: flex;
    justify-content: center;
    width: 50%;
    margin-right: 13rem;
    margin-left: 13rem;
    
    padding-left: 20rem;
    
  }
  .first-one h1 {
    color: rgb(247, 72, 19);
    background-color: rgb(24, 24, 20);
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  
  }
  .images img {
    display: flex;
    /* margin: 6%; */
    width: 9%;
    background-color: yellow;
    color: rgb(250, 23, 23);
    height: 80px;
  }
  .images {
    color:black;
    background-color: cornsilk;
  }
  .intro p {
    color:palevioletred;
    display: flex;
    justify-content: center;
    width: 50%;
    margin-right: 13rem;
    margin-left: 13rem;
    
    padding-left: 20rem;

    

  }
  .h-helper h3 {
    color: black;
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .h-helper h2 {
    color:burlywood;
    /* display: flex;
    align-items: center;
    justify-content: center; */
    width: 100%;
   /* padding-right: 50rem; */
   margin:0.50%;
   
   
  }

  body {
    
    background-color: cornsilk
  }
 .navbar nav  a {
   color:rgb(204, 17, 17);
 }

  .intro button {

    color: rgb(6, 144, 236);
    display: flex;
    justify-content: center;
    width: 55%;
    margin-right: 13rem;
    margin-left: 13rem;
    padding-right: 0rem;
    padding-left: 0rem;
    background-color: rgb(238, 255, 0);
    
  }
  /* .extra button {
    color: black;
    padding-bottom: 8%;
    background-color: yellow;
    
  } */
  .features-h1 h1 {
    background-color:black;
  }

  /* .home-button {
    background-color:black;
    
  } */

  .bg-img {
    display: flex;
    justify-content: center;
    width: 50%;

  }.bg-img {
    width: 100%;
  }
  /* .bm-img h4 {
    /*font-size: xxx-large; */
  
  .container input {
    width: 20%;
    background-color: rgb(45, 32, 165);
    display: flex;
    flex-direction: column;
  }
  .container label {
    color: transparent;
  }
  .login-header {
    background-color: black;
  }
  .login-header h1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60%;
    padding-left: 16rem;

  }
  .container h4 {
    color: rgb(13, 45, 66);
    font-size: x-large;
    font-weight: bolder;
  }
  
  .extra button {
    color: darkgoldenrod;
    padding-bottom: 6rem;
    padding-top: 1rem;
  }
.images {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  /* max-width: 100%; */
  background-color: rgb(5, 147, 190);
}
.images img {
  width: 140px;
  height: 140px;
  display: flex;
  justify-content: center;

}




.images h2 {

  color: black;
  font-size: 20px;
  padding: 5%;
  background-color: transparent;
 
}
/* .images h2 {
  color: red;
 
} */
.nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

.nav a{
  border: 2px solid rgb(229, 245, 6);
  padding: 13px;
  display: flex;
  justify-content: center;
  width: 50%;
  margin: 20px;
  font-size: x-large;
  align-items: center;
  

}
.navbar {
  display: flex;
  align-items: center;
  justify-content: center;
  
  
}





}

/**********************************************@media 200px******************************************************/
@media(max-width: 200px) {
  .intro h2 {
    color: brown;
    display: flex;
    justify-content: center;
    width: 50%;
    margin-right: 13rem;
    margin-left: 13rem;
    
    padding-left: 20rem;
    
  }
  .first-one h1 {
    color: rgb(247, 72, 19);
    background-color: rgb(24, 24, 20);
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  
  }
  .images img {
    display: flex;
    /* margin: 6%; */
    width: 9%;
    background-color: yellow;
    color: rgb(250, 23, 23);
    height: 80px;
  }
  .images {
    color:black;
    background-color: cornsilk;
  }
  .intro p {
    color:palevioletred;
    display: flex;
    justify-content: center;
    width: 50%;
    margin-right: 13rem;
    margin-left: 13rem;
    
    padding-left: 20rem;

    

  }
  .h-helper h3 {
    color: black;
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .h-helper h2 {
    color:burlywood;
    /* display: flex;
    align-items: center;
    justify-content: center; */
    width: 100%;
   /* padding-right: 50rem; */
   margin:0.50%;
   
   
  }

  body {
    
    background-color: cornsilk
  }
 .navbar nav  a {
   color:rgb(204, 17, 17);
 }

  .intro button {

    color: rgb(133, 108, 8);
    display: flex;
    justify-content: center;
    width: 55%;
    margin-right: 13rem;
    margin-left: 13rem;
    padding-right: 0rem;
    padding-left: 0rem;
    background-color: lime;
    
  }
  /* .extra button {
    color: black;
    padding-bottom: 8%;
    background-color: yellow;
    
  } */
  .features-h1 h1 {
    background-color:black;
  }

  /* .home-button {
    background-color:black;
    
  } */

  .bg-img {
    display: flex;
    justify-content: center;
    width: 50%;

  }.bg-img {
    width: 100%;
  }
  /* .bm-img h4 {
    /*font-size: xxx-large; */
  
  .container input {
    width: 20%;
    background-color: rgb(45, 32, 165);
    display: flex;
    flex-direction: column;
  }
  .container label {
    color: transparent;
  }
  .login-header {
    background-color: black;
  }
  .login-header h1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60%;
    padding-left: 16rem;

  }
  .container h4 {
    color: rgb(13, 45, 66);
    font-size: x-large;
    font-weight: bolder;
  }
  
  .extra button {
    color: darkgoldenrod;
    padding-bottom: 6rem;
    padding-top: 1rem;
  }
.images {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  /* max-width: 100%; */
  background-color: rgb(5, 147, 190);
}
.images img {
  width: 140px;
  height: 140px;
  display: flex;
  justify-content: center;

}


.images h2 {
  color: black;
  font-size: 20px;
  padding: 5%;
}
/* .images h2 {
  color: red;
 
} */
.nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

.nav a{
  border: 3px solid rgb(182, 8, 8);
  padding: 13px;
  display: flex;
  justify-content: center;
  width: 50%;
  margin: 20px;
  font-size: x-large;
  align-items: center;
  

}
.navbar {
  display: flex;
  align-items: center;
  justify-content: center;
  
  
}





}

/***********************************************@media 100********************************************************/
@media(max-width: 100px) {
  .intro h2 {
    color: brown;
    display: flex;
    justify-content: center;
    width: 50%;
    margin-right: 13rem;
    margin-left: 13rem;
    
    padding-left: 20rem;
    
  }
  .first-one h1 {
    color: rgb(247, 72, 19);
    background-color: rgb(24, 24, 20);
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  
  }
  .images img {
    display: flex;
    /* margin: 6%; */
    width: 9%;
    background-color: yellow;
    color: rgb(250, 23, 23);
    height: 80px;
  }
  .images {
    color:black;
    background-color: cornsilk;
  }
  .intro p {
    color:palevioletred;
    display: flex;
    justify-content: center;
    width: 50%;
    margin-right: 13rem;
    margin-left: 13rem;
    
    padding-left: 20rem;

    

  }
  .h-helper h3 {
    color: black;
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .h-helper h2 {
    color:burlywood;
    /* display: flex;
    align-items: center;
    justify-content: center; */
    width: 100%;
   /* padding-right: 50rem; */
   margin:0.50%;
   
   
  }

  body {
    
    background-color: cornsilk
  }
 .navbar nav  a {
   color:rgb(204, 17, 17);
 }

  .intro button {

    color: rgb(133, 108, 8);
    display: flex;
    justify-content: center;
    width: 55%;
    margin-right: 13rem;
    margin-left: 13rem;
    padding-right: 0rem;
    padding-left: 0rem;
    background-color: lime;
    
  }
  /* .extra button {
    color: black;
    padding-bottom: 8%;
    background-color: yellow;
    
  } */
  .features-h1 h1 {
    background-color:black;
  }

  /* .home-button {
    background-color:black;
    
  } */

  .bg-img {
    display: flex;
    justify-content: center;
    width: 50%;

  }.bg-img {
    width: 100%;
  }
  /* .bm-img h4 {
    /*font-size: xxx-large; */
  
  .container input {
    width: 20%;
    background-color: rgb(45, 32, 165);
    display: flex;
    flex-direction: column;
  }
  .container label {
    color: transparent;
  }
  .login-header {
    background-color: black;
  }
  .login-header h1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60%;
    padding-left: 16rem;

  }
  .container h4 {
    color: rgb(13, 45, 66);
    font-size: x-large;
    font-weight: bolder;
  }
  
  .extra button {
    color: darkgoldenrod;
    padding-bottom: 6rem;
    padding-top: 1rem;
  }
.images {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  /* max-width: 100%; */
  background-color: rgb(5, 147, 190);
}
.images img {
  width: 140px;
  height: 140px;
  display: flex;
  justify-content: center;

}


.images h2 {
  color: black;
  font-size: 20px;
  padding: 5%;
}
/* .images h2 {
  color: red;
 
} */
.nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

.nav a{
  border: 3px solid rgb(182, 8, 8);
  padding: 13px;
  display: flex;
  justify-content: center;
  width: 50%;
  margin: 20px;
  font-size: x-large;
  align-items: center;
  

}
.navbar {
  display: flex;
  align-items: center;
  justify-content: center;
  
  
}





}