h1 {
  position:absolute;
  padding:0;
  margin:0;
  text-decoration:none; 
  z-index:2;
  font-size:50px;
  font-weight:bold;
  left:540px;
  top:200px;
  color:green;
  text-shadow: -3px 3px 6px rgba(0,0,0,0.73);
}
.transbox1 {
position:relative;
margin:0;
margin-bottom:100px;
Height:700px;
width:1100px;
left:400px;
top:100px;
border-style:solid;
border-color:white;
border-width:1px;
background-color: rgba(211, 211, 211, 0.7); /* 50% transparent white background */
-webkit-box-shadow: 0px 6px 53px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 6px 53px 0px rgba(0,0,0,0.75);
box-shadow: 0px 6px 53px 0px rgba(0,0,0,0.75);
}

.transbox2 {
  position:absolute;
  float:right;
  left:580px;
  top:10px;
  height:670px;
  width:500px;
  background-color: rgba(211, 211, 211, 0.8); /* 50% transparent white background */
  -webkit-box-shadow: 0px 2px 32px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 2px 32px 0px rgba(0,0,0,0.75);
box-shadow: 0px 2px 32px 0px rgba(0,0,0,0.75);
  z-index:1;
}
 #y2k{
  position:relative;
  width: 30%;
  right:130px;
  height:30px;
  padding: 15px 15px;
  overflow:hidden;
  z-index:3;
  margin: 6px 0;
  display: inline-block;
  border: 1px solid #ccc;
  cursor:pointer;
}
.b { 
position:absolute;
float:left;
}
.name1 {
 position:relative;
 top:150px;
 left:800px;
 z-index:3;
}

.pass1 {
 position:relative;
 justify-content:flex-start;
 top:190px;
 left:800px;
 z-index:3;
}

.button {
  position:relative;
  background-color: red;
  z-index:2;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

.submit {
position:relative;
padding:5px;
margin:10px;
border-radius:10px;
border-color:black;
left:680px;
width:30%;
color:white;
font-weight:bold;
font-size:20px;
background-color:red;
top:230px;
z-index:3;
cursor:pointer;
}

.check1 {
position:relative;
padding:5px;
margin:10px;
width:23px;
color:white;
top:205px;
left:330px;
z-index:3;
}
h5 {
position:relative;
top:130px;
left:830px;
color:green;
}
.login2 {
float :left;
padding:0;
margin:0;
position:relative;
width:25px;
height:25px;
left:190px;
top:10px;
z-index:5;
background-color:black;
border-radius:12px;
}
.lock {
  float :left;
padding:0;
margin:0;
position:relative;
width:24px;
height:25px;
left:190px;
top:10px;
z-index:5;
}
.terms {
position:relative;
font-size:10px;
color:green;
left:300px;
top:340px;
z-index:3;
text-decoration:none;
text-align:center;
}

h3 {
position:relative;
text-decoration:none;
float:left;
left:210px;
top:50px;
padding:0;
margin:0;
color:green;
font-weight:bold;
font-size:40px;
text-shadow: -3px 3px 3px rgba(0,0,0,0.73);
}
.sign-up {
 position:relative;
 font-size:20px;
 top:-100px;
 left:720px;
 color:green; 
 z-index:6;
 text-decoration: none;
}


.hr-lines{
  position: relative;
  right: 450px;
  top:-260px;
  max-width: 400px;
  margin: 100px auto;
  text-align: center;
  text-decoration: none;
  list-style: none;
  font-size:20px;
  color:green;
}

.hr-lines:before{
  content:" ";
  height: 2px;
  width: 130px;
  background: red;
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
}

.hr-lines:after{
  content:" ";
  height: 2px;
  width: 130px;
  background: red;
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
}
.google {
 position:relative;
 width:150px;
 top:-350px;
 right:70px;
 border-style:solid;
 border-color:black;
 border-width:1px;
 border-radius:10px;
}
.apple {
  position:relative;
 width:150px;
 top:-350px;
 right:50px;
 border-style:solid;
 border-color:black;
 border-width:1px;
 border-radius:10px;
}
.link-wrap {
position:relative;
left:760px;
top:370px;
z-index:5;
}

.button:hover {
  opacity: 0.8;
}

.cancelbtn {
  position:relative;
  border-color:black;
  font-weight:bold;
  font-size:15px;
  left:820px;
  top: 430px;
  width: auto;
  z-index:3;
  border-radius:10px;
  padding: 2px 10px;
  background-color: #f44336;
}

  
.avatar {
  position:relative;
  overflow:hidden;
  padding:0;
  margin:0;
  top:-500px;
  left:150px;
  width:300px;
  height:300px;
  z-index:2;
}
.social a {
  position:relative;
  left:120px;
  max-width:60px;
  height:30px;
  margin-left:30px;
  padding:0;
  display: inline-block;
  top:-420px;
}
.social img {
  position:relative;
  Height:50px;
  width:50px;
}
.sm-links {
  position:relative;
  color:green;
  top:-435px;
  left:240px;
  font-family: 'cambriab'; /* Name your font family */
  src: url('C:\Users\spur\OneDrive\Documents\website.ttf');
  font-size:20px;
}

label  {
  position:relative;
  top:-5px;
  left:-120px;
  color:white;
  float:middle;
  z-index:3;
  color:black;
  font-size:20px;
}
 span {
  color:white;
  z-index:3;
}
 .psw {
  position:relative;
  float: center;
  color:green;
  top:110px;
  left:830px;
  padding:0;
  z-index:3;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  .span.psw {
     display: block; 
     float: none;
  }
  .cancelbtn {
     width: 20%;
     z-index:2;
  }
}
/*search */
.container {
  position: relative;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 300px;
  height: 100px;
  .search {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0px;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 30px;
    background: transparent;
    border-radius: 50%;
    transition: all 1s;
    z-index: 4;
    box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.4);
    // box-shadow: 0 0 25px 0 crimson;
    &:hover {
      cursor: pointer;
    }
    &::before {
      content: "";
      position: absolute;
      margin: auto;
      top: 22px;
      right: 0;
      bottom: 0;
      left: 22px;
      width: 12px;
      height: 2px;
      background: black;
      border: 1px solid white;
      transform: rotate(45deg);
      transition: all .5s;
    }
    &::after {
      content: "";
      position: absolute;
      margin: auto;
      top: -5px;
      right: 0;
      bottom: 0;
      left: -5px;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      border: 2px solid white;
      transition: all .5s;
    }
  }
  input {
    font-family: 'Inconsolata', monospace;
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 30px;
    outline: none;
    border: none;
    // border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    background: white;
    color: black;
    text-shadow: 0 0 10px green;
    padding: 0 80px 0 20px;
    border-radius: 30px;
    box-shadow: 0 0 25px 0 green,
                0 20px 25px 0 rgba(0, 0, 0, 0.2);
    // box-shadow: inset 0 0 25px 0 rgba(0, 0, 0, 0.5);
    transition: all 1s;
    opacity: 0;
    z-index: 5;
    font-weight: bolder;
    letter-spacing: 0.1em;
    &:hover {
      cursor: pointer;
    }
    &:focus {
      width: 300px;
      opacity: 1;
      cursor: text;
    }
    &:focus ~ .search {
      right: -250px;
      background: transparent;
      z-index: 6;
      &::before {
        top: 0;
        left: 0;
        width: 25px;
      }
      &::after {
        top: 0;
        left: 0;
        width: 25px;
        height: 2px;
        border: none;
        background: black;
        border-radius: 0%;
        transform: rotate(-45deg);
      }
    }
    &::placeholder {
      color: black;
      opacity: 0.5;
      font-weight: bolder;
    }
  }
}