contact.css

*, *::before, *::after {

  box-sizing: border-box;
}

body {

  margin: 0;
}

:root {

  --tjg: #9931b0;
  --light: #b734d5;
  --contactBGtop: #FF80FF;
  --contactBGbottom: #6FE2FF;
  --tritop: #C0C1FF;
  --tribottom: #E4F6FF;
  --smtri: rgb(230, 190, 232);
  
}

.bg{
    height: 100vh;
    width: 100vw;
    background-image: linear-gradient(var(--contactBGtop), var(--contactBGbottom));
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
 }

 /* left hand side*/
 .contents-cont {

  width: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10vw;
 }

 .triangle{
  position: absolute;
  margin-top: -300px;
  margin-left: 550px;
  width: 0;
  height: 0;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  border-bottom: 150px solid var(--tritop);
  transform: rotate(25deg);
  animation: MoveUpDownRotate 5s ease-in-out infinite;
}

.triangle1{
  position: absolute;
  margin-top: 700px;
  margin-left: 300px;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid rgb(241, 240, 255);
  transform: rotate(25deg);
  animation: MoveUpDownRotate 4s ease-in-out infinite;
}

.triangle2{
  position: absolute;
  margin-top: 750px;
  margin-left: -500px;
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 60px solid var(--smtri);
  transform: rotate(25deg);
  animation: MoveUpDownRotate 7s ease-in-out infinite;
}


 .circle1 {
  position: absolute;
  margin-top: -400px;
  margin-left: 430px;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background: linear-gradient(rgb(147, 188, 255), rgb(110, 148, 228));
  animation: MoveUpDown 5s linear infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 1.5s;
 }


 .circle2 {
  position: absolute;
  margin-top: -800px;
  margin-left: -640px;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background: linear-gradient(#FF5BEE, #ed0fd7);
  animation: MoveUpDown 5s linear infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
 }

 .circle3 {
  position: absolute;
  margin-top: 700px;
  margin-left: 200px;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: linear-gradient(rgb(191, 216, 255), rgb(161, 188, 247));
  animation: MoveUpDown 5s linear infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 2s;
 }

 .circle4 {
  position: absolute;
  margin-top: 850px;
  margin-left: -440px;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: linear-gradient(rgb(191, 216, 255), rgb(161, 188, 247));
  animation: MoveUpDown 5s linear infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
 }

 .star1{

  width: 1.5rem;
  z-index: 2;
  position: absolute;
  margin-top: -22rem;
  margin-left: 1.5rem;
  animation: Twinkle 2s infinite;
 }

 .star2{

  width: 1.7rem;
  z-index: 2;
  position: absolute;
  margin-top: -19rem;
  margin-left: -5rem;
  animation: Twinkle 2s infinite;
  animation-delay: 1s;
 }

 .star3{
  width: 1.7rem;
  z-index: 2;
  position: absolute;
  margin-top: -14rem;
  margin-left: -7rem;
  animation: Twinkle 2s infinite;
  animation-delay: 2s;
 }

 .star4{

  width: 1.5rem;
  z-index: 2;
  position: absolute;
  margin-top: -16rem;
  margin-left: 4rem;
  animation: Twinkle 3s infinite;
 }

 .star5{

  width: 5rem;
  z-index: 2;
  position: absolute;
  margin-top: -31rem;
  margin-left: 4rem;
  animation: Twinkle 4s infinite;
 }


 .star6{

  width: 3rem;
  z-index: 2;
  position: absolute;
  margin-top: 6rem;
  margin-left: 15rem;
  animation: Twinkle 5s infinite;
 }

 .star7{

  width: 2rem;
  z-index: 2;
  position: absolute;
  margin-top: -11rem;
  margin-left: -15rem;
  animation: Twinkle 6s infinite;
 }


 .left {
  width: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
 }

 .right {

  z-index: 1;
 }

.fn, .ln, .em {

  margin-bottom: 30px;
  margin-top: 10px;
}

 .cform {

  max-width: 60vw;
  min-width: 130%;
  border: 5px solid #ab69cf;
  text-align: center;
  Background: #8a399a;
 }
  

 .sub-text {

    text-align: center;
    color: #ffffff;
    line-height: 2px;
    font-weight: 100;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

 }

 .contact {
  text-align: center;
  
 }

 p {

  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-size: 250%;
  font-weight: 600;
  padding: 0;
  margin: 10px;
  color: white;
 }

 /* Style inputs with type="text", select elements and textareas */
input {
  font-size: 20px;
  width: 80%; /* Full width */
  padding: 12px; /* Some padding */ 
  margin-top: -70px; /* Add a top margin */
  margin-bottom: 40px; /* Bottom margin */
  resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */
  background-color: transparent;
  color: black;
  border: 0;
  border-bottom: 4px solid #ab69cf;
}

textarea {
  background-color: transparent;
  color: white;
  border: 3px solid #ab69cf;
  max-width: 80%;
  min-width: 80%;
  height: 10vw;
  margin-bottom: 50px;

}

::placeholder{

  color: #fdc1f7;
  font-size: 27px;
  font-weight: 600;
  font-family: Arial, Helvetica, sans-serif;
  padding: 0;
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: var(--tritop);
  color: #ab69cf;
  font-size: 30px;
  font-weight: 600;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: #f15ee3;
  color: #ffffff;
  border: 1px solid #ffffff;
}

.envelope{

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: -10rem;
  max-width: 19rem;
}

.env-front {

  max-width: 19rem;
  margin-top: 12rem;
  z-index: 2;
}

.env-back {

  max-width: 19rem;
  margin-top: 12rem;
  position: absolute;
  z-index: 1;
}

.env-flap {

  max-width: 19rem;
  margin-top: 12rem;
  position: absolute;
  z-index: 1;
  margin-top: -3.4rem;
  animation: raise 3s linear;
}

.logo {

  max-width: 15rem;
  margin-top: -23rem;
  margin-left: -7.5rem;
  position: absolute;
  animation: MoveUpDown 3s ease-in-out infinite, raise 3s linear;
  z-index: 1;
}