@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

/*//RESET*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea {
  font: inherit;
}

/*//VARIABLES*/
:root {
  /*FONTS*/
  --FF: "Poppins", sans-serif;
  --FF: "Poppins", sans-serif;
  --FS: clamp(1rem, 2.2vh, 2.5rem);

  /*COLORS*/
  --BGCOLOR-FADE: whitesmoke;
  --BGCOLOR: whitesmoke;
  --BGIMAGE: url(stripes3.png);
  --HD-BGIMAGE: url(newbg6.png);
  --BODY-BGCOLOR: #fff;
  --BORDER-COLOR: #333;
  --BUTTON-COLOR: #fff;
  --FONT-COLOR: #000;
  --HD-FCOLOR: whitesmoke;
  --MAIN-BGIMAGE: url(1.1bg.avif);
  --INPUT-BGCOLOR: #f5f5f5;
  --PCHD-BGCOLOR: rgb(155, 154, 154);
  --BUTTON-BDCOLOR: #0f0f0f;
  --CHECKBOX-WORDS-COLORS: #777777;

  /*BORDER*/
  --HD-BORDER: 2px solid black;
  --MAINBORDER: 2px solid whitesmoke;
  --FORM-BDBOTTOM: 1px solid black;
}

/*GENERAL STYLES*/

html {
  background-color: var(--BGCOLOR-FADE);
  background-image: var(--BGIMAGE);
  font-family: var(--FF);
  font-size: var(--FS);
}

body {
  display: flex;
  min-height: 100%;
  margin: 0 auto;
  justify-content: center;
  margin-top: 5%;
  padding: 1rem;
  flex-flow: wrap;
}
/*GENERAL STYLES*/

/*HEADER*/

header {
  border: var(--HD-BORDER);
  background-image: var(--HD-BGIMAGE);
  color: var(--HD-FCOLOR);
  background-size: cover;
  min-height: 430px;
  min-width: 440px;
}

.we,
.hear {
  font-family: inherit;
  font-size: 2rem;
  margin-left: 3rem;
}

#head {
  margin-top: 1rem;
}

.desi {
  padding-top: 0.6rem;

  border: 2px solid white;
  color: black;
  background-color: rgb(241, 241, 241);
}

.design {
  display: flex;
  margin-left: 2.3rem;
  margin-top: 0.8rem;
  font-size: xx-small;
}
.gn {
  padding-top: 0.6rem;
}

.stop {
  display: inline;
  margin-left: -0.6rem;
  font-weight: 800;
  color: rgb(250, 231, 148);
}
/*HEADER*/

/*MAIN*/
main {
  border: var(--MAINBORDER);
  min-width: 450px;
  min-height: 450px;
  background-image: var(--MAIN-BGIMAGE);
  line-height: 1.5;
  padding: 0rem 0rem 3rem 0rem;
}

.cont {
  text-align: center;
  margin-top: 20px;
  font-family: "Open Sans", sans-serif;
  font-size: xx-large;
}

form {
  margin-left: 2.5rem;
  margin-top: 0.9rem;
  line-height: 1.8;
}

.first {
  display: block;
  font-weight: 500;
}

#help,
#email,
#number,
#name {
  border: none;
  border-bottom: var(--FORM-BDBOTTOM);
  width: 80%;
  background-color: var(--INPUT-BGCOLOR);
}

::placeholder {
  color: var(--PCHD-BGCOLOR);
}

input:focus {
  border: none;
  outline: none;
  color: var(--CHECKBOX-WORDS-COLORS);
}

input[type="checkbox"] {
  appearance: none;
  width: 15px;
  height: 15px;
  background-color: white;
  border: 1.5px solid #333;
  border-radius: 4px;
  display: inline-block;
  position: relative;
  cursor: pointer;
}
/* input[type="checkbox"]:checked::before {
  content: "✔";
  font-size: 16px;
  color: white;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
} */

input[type="checkbox"]:checked {
  background-color: #171718;
  border-color: #080808;
}

fieldset {
  border: none;
  /* margin-top: 0.5rem;
  display: flex;
  flex-direction: row;
  flex-flow: wrap;
  column-gap: 1rem; */
}

.last_labels {
  color: var(--CHECKBOX-WORDS-COLORS);
}

.button {
  border: none;
  width: 80%;
  background-color: var(--BUTTON-BDCOLOR);
  height: 2.3rem;
  border-radius: 10px;
  color: var(--HD-FCOLOR);
}

/*MAIN*/

/* MEDIA QUERIES */

/* Tablet (481px to 768px) */
@media screen and (min-width: 481px) and (max-width: 768px) {
  body {
    padding: 0.75rem;
    margin-top: 3%;
  }
  header {
    min-height: 300px;
    min-width: 100%;
    background-size: cover;
    background-position: center;
  }
  .design {
    margin-left: 1.5rem;
    font-size: 0.9rem;
  }
  .desi,
  .gn {
    padding-top: 0.4rem;
  }
  .we,
  .hear {
    font-size: 1.5rem;
    margin-left: 1.5rem;
  }
  .stop {
    margin-left: -0.5rem;
  }
  #head {
    margin-top: 0.8rem;
  }
  main {
    min-width: 100%;
    padding: 0 1rem 2rem;
  }
  .cont {
    font-size: 1.8rem;
    margin-top: 1rem;
  }
  form {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    line-height: 1.6;
  }
  #help,
  #email,
  #number,
  #name {
    width: 90%;
    padding: 0.6rem;
    font-size: 0.95rem;
  }
  ::placeholder {
    font-size: 0.95rem;
  }
  .first {
    font-size: 0.95rem;
    margin-bottom: 0.3rem;
  }
  fieldset {
    margin-top: 0.8rem;
  }
  .checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
  }
  input[type="checkbox"] {
    width: 18px;
    height: 18px;
  }
  .last_labels {
    font-size: 0.95rem;
    margin-left: 0.5rem;
  }
  .button {
    width: 60%;
    height: 2.2rem;
    font-size: 0.95rem;
    border-radius: 8px;
  }
}

/* Mobile (up to 480px) */
@media screen and (max-width: 480px) {
  body {
    padding: 0.5rem;
    margin-top: 2%;
  }
  header {
    min-height: 200px;
    min-width: 100%;
    background-size: cover;
    background-position: center;
  }
  .design {
    margin-left: 1rem;
    font-size: 0.7rem;
  }
  .desi,
  .gn {
    padding-top: 0.3rem;
  }
  .we,
  .hear {
    font-size: 1rem;
    margin-left: 1rem;
  }
  .stop {
    margin-left: -0.3rem;
    font-size: 1rem;
  }
  #head {
    margin-top: 0.5rem;
  }
  main {
    min-width: 100%;
    min-height: 350px;
    padding: 0 0.5rem 1.5rem;
  }
  .cont {
    font-size: 1.3rem;
    margin-top: 0.8rem;
  }
  form {
    margin-left: 1rem;
    margin-right: 1rem;
    line-height: 1.4;
  }
  #help,
  #email,
  #number,
  #name {
    width: 100%;
    padding: 0.5rem;
    font-size: 0.85rem;
  }
  ::placeholder {
    font-size: 0.85rem;
  }
  .first {
    font-size: 0.85rem;
    margin-bottom: 0.2rem;
  }
  fieldset {
    margin-top: 0.6rem;
  }
  .checkbox-group {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
  }
  input[type="checkbox"] {
    width: 20px;
    height: 20px;
  }
  .last_labels {
    font-size: 0.85rem;
    margin-left: 0.4rem;
  }
  .button {
    width: 100%;
    height: 2rem;
    font-size: 0.85rem;
    border-radius: 6px;
  }
}