@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@1,500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Fasthand&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Alkatra&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Trispace&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Delicious+Handrawn&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alkatra&display=swap');
body{
  background-image: url(images/contact\ us\ color.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
h1 {
  font-size: 8rem;
  align-items: center;
  text-align: center;
  justify-content: center;
  font-family: "Roboto Condensed", sans-serif;
  position: relative;
  bottom: 5rem;
}
p {
  font-size: 0.3rem;
  align-items: left;
  text-align: left;
  justify-content: left;
  font-family: "Roboto Condensed", sans-serif;
}
h6 {
  font-size: 3rem;
  align-items: center;
  text-align: center;
  justify-content: center;
  position: relative;
  bottom: 14rem;
  font-family: "Roboto Condensed", sans-serif;
}
label {
  display: block;
  position: relative;
  align-items: center;
  text-align: center;
  justify-content: center;
  font-size: 3rem;
  bottom: 19rem;
  font-family: "Ubuntu", sans-serif;
  background: #121FCF;
background: linear-gradient(to right, #121FCF 0%, #00FF00 25%, #FF2BF1 50%, #00DDFF 75%, #CF1512 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 5px 5px 0px black;
}
input {
    position: relative;
    left: 22rem;
    display: block;
    align-items: center;
    text-align: center;
    justify-content: center;
    font-size: 2rem;
    bottom: 19rem;
    font-family: "Fasthand", cursive;
    border-color: rgb(131, 58, 180);
  }
  textarea {
    position: relative;
    left: 15rem;
    display: block;
    align-items: center;
    text-align: center;
    justify-content: center;
    font-size: 2rem;
    bottom: 19rem;
    font-family: "Fasthand", cursive;
    border-color: rgb(131, 58, 180);
    width:50rem;
  }
  #submit {
    background: #eda4e2;
    background-image: -webkit-linear-gradient(top, #eda4e2, #ff0000);
    background-image: -moz-linear-gradient(top, #eda4e2, #ff0000);
    background-image: -ms-linear-gradient(top, #eda4e2, #ff0000);
    background-image: -o-linear-gradient(top, #eda4e2, #ff0000);
    background-image: linear-gradient(to bottom, #eda4e2, #ff0000);
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0px;
    position: relative;
    text-shadow: 3px 2px 0px #666666;
    -webkit-box-shadow: 4px 4px 0px #666666;
    -moz-box-shadow: 4px 4px 0px #666666;
    box-shadow: 4px 4px 0px #666666;
    font-family: Georgia;
    color: #ffedff;
    font-size: 40px;
    padding: 18px;
    border: solid #000000 4px;
    text-decoration: none;
    width: 50.5rem;
    bottom: 18rem;
    left:15rem;
    right: 40rem;
  }
  
  #submit:hover {
    background: #0000f7;
    background: linear-gradient(to bottom, #b4e0e6, #00eeff);;
    box-shadow: 6px 6px 0px #666666;
    font-size: 42px;
    text-decoration: none;
    transition: 200ms;
  }
  a {
    text-decoration: none;
    color: white;
  }
  .logo a span {
    color: white;
    position: relative;
    top: 3px;
    font-size: 60px;
    cursor: pointer;
  }
  .logo a span:hover {
    color: green;
    position: relative;
    top: 4px;
    font-size: 61px;
    cursor: pointer;
    transition: 3s;
  }
  .logo a h2 {
    position: relative;
    top: -96px;
    left: 57px;
    font-size: 45px;
    cursor: pointer;
  }
  .logo a h2:hover {
    color: rgb(255, 217, 0);
    position: relative;
    top: -97px;
    font-size: 39px;
    cursor: pointer;
    transition: 20s;
  }
  .logo a {
    position: relative;
    cursor: pointer;
  }
  .heading {
    width: 1%;
  }
  .LoginLogout {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 1000px;
    text-shadow: 3px 2px 3px #ffffff;
    -webkit-box-shadow: 1px 1px 3px #666666;
    -moz-box-shadow: 1px 1px 3px #666666;
    box-shadow: 1px 1px 3px #666666;
    font-family: Courier New;
    color: #000000;
    font-size: 25px;
    background: #ff0000;
    padding: 10px 0px 10px 0px;
    border: solid #ffffff 2px;
    text-decoration: none;
    cursor: pointer;
    animation-name: userdata;
    animation-duration: 5s;
    animation-iteration-count: infinite;
  }
  
  .LoginLogout:hover {
    color: yellow;
    transition: 1s;
    background: #cfdee7;
    text-decoration: none;
  }
  @keyframes userdata {
    0% {
      background-color: red;
    }
    10% {
      background-color: rgb(255, 102, 0);
    }
    20% {
      background-color: rgb(255, 187, 0);
    }
    30% {
      background-color: rgb(115, 255, 0);
    }
    40% {
      background-color: rgb(0, 255, 179);
    }
    50% {
      background-color: rgb(17, 0, 255);
    }
    60% {
      background-color: rgb(204, 0, 255);
    }
    70% {
      background-color: rgb(255, 0, 149);
    }
    80% {
      background-color: rgb(255, 0, 34);
    }
    90% {
      background-color: rgb(0, 255, 234);
    }
    99% {
      background-color: rgb(255, 123, 0);
    }
    100% {
      background-color: red;
    }
  }
  .LoginLogout {
    position: absolute;
    align-items: center;
    top: 1%;
    bottom: 26%;
    width: 13%;
    height: 10%;
    margin-left: 85%;
    font-family: 'Alkatra', cursive;
  }
  .ret {
    width: 60%;
    height: 15;
    display: flex;
    padding: 15;
    position: absolute;
    top: 12px;
    left: 360px;
    letter-spacing: 0px;
  }
  .ret a{
    font-size: 40px;
    color: black;
    text-shadow: 3px 2px 0px whitesmoke;
      background-color: transparent;
  letter-spacing: 1px;
  font-family: 'Delicious Handrawn', cursive;
  }  
  .home:hover {
    color: rgb(0, 255, 21);
    transition: 1s;
  }
  
  .shop:hover {
    color: yellow;
    transition: 1s;
  }
  
  .team:hover {
    color: rgb(0, 238, 255);
    transition: 1s;
  }
  
  .ctus:hover {
    color: rgb(255, 81, 0);
    transition: 1s;
  }
  
  .sprt:hover {
    color: rgb(255, 0, 34);
    transition: 1s;
  }