styles.css

/*================= CONFIGURAÇÃO ===================*/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  outline: 0;
}
html {
  /* a cada 1rem será considera 10px */
  font-size: 62.5%;
  font-family: 'Roboto', sans-serif;
}

/*================= VARIÁVEIS CSS ===================*/

:root {
  --color-background-body: #44475a;
  --color-background-section: #21222c;
  --color-background-card: #282a36;

  --color-button: #3cc45e;
  --color-button-hover: #50fa7b;

  --color-text-name: #50fa7b;
  --color-text-post: #ff79c6;
  --color-icons: #f8f8f2;
  --color-text-info: #f1fa8c;
  --color-text-ocupation: #8be9fd;
}

body {
  background: var(--color-background-body);
}

/*================= HEADER - FORMULÁRIO ===================*/
header {
  width: 90%;
  max-width: 114.8rem;
  height: auto;
  margin: auto;

  background: var(--color-background-section);
  border-radius: 12px;

  padding: 4.2rem;
  margin-top: 7.2rem;
}

header h2 {
  color: var(--color-text-post);
  margin-bottom: 2.4rem;
  font-weight: 900;
}

.div-form form {
  width: 100%;
  display: flex;
  flex-direction: column;

  flex-wrap: wrap;

  height: 22.8rem;
  gap: 1rem;
}

.div-form form input {
  height: 3rem;
  width: 50%;
  background: var(--color-background-body);
  border: none;
  border-radius: 0.5rem;

  padding: 0 1.8rem;

  font-weight: 600;

  transition: all 0.3s ease 0s;

  color: var(--color-text-post);
}

.div-form form input:hover {
  background: #54576e;
}

.div-form form input::placeholder {
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.2rem;
}

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px var(--color-background-body) inset;
  -webkit-text-fill-color: var(--color-text-post);
  font-weight: 600;
}

.button-form {
  display: flex;
  justify-content: flex-end;
  

}

.button-form button {
  min-width: 25.3rem;
  height: 2.8rem;

  background: var(--color-button);
  border-radius: 0.5rem;
  color: var(--color-background-card);

  font-weight: 700;
  font-size: 1.2rem;

  border: none;

  align-self: flex-end;
  transition: all 0.3s ease 0s;

  cursor: pointer;
}

.div-form form button:hover {
  background: var(--color-button-hover);
}

/*================= SECTION CARDS ===================*/

.cards {
  width: 90%;
  height: auto;
  max-width: 114.8rem;
  margin: auto;

  background: var(--color-background-section);
  border-radius: 12px;

  margin-top: 3.3rem;
  margin-bottom: 7.2rem;
  padding: 2.4rem;

  display: flex;
  flex-wrap: wrap;
  gap: 3.4rem;
  justify-content: center;
}

.card {
  width: 30rem;
  background-color: var(--color-background-card);
  height: 53.6rem;
  border-radius: 10px;

  display: flex;
  flex-direction: column;
  transition: all 0.3s ease 0s;

  position: relative;
}

.card:hover {
  transform: translateY(-7px);
}

.banner {
  background-color: var(--color-background-card);
  height: 20rem;
  border-radius: inherit;

  overflow: hidden;

  width: 100%;

  box-shadow: 0 4px 8px var(--color-background-section);

  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.banner img {
  height: inherit;

  border-radius: inherit;
}

.img-github img {
  width: 45%;
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);

  border-radius: 50%;

  border: 4px solid var(--color-background-body);
  box-shadow: 0 4px 8px var(--color-background-section);
}

.apresentacao {
  display: flex;
  align-items: center;
  flex-direction: column;

  margin-top: 8rem;
}

.apresentacao h2 {
  font-size: 2.4rem;
  color: var(--color-text-name);
  text-align: center;
}

.apresentacao h3 {
  font-size: 1.2rem;
  color: var(--color-text-info);
}

.info {
  display: flex;
  flex-direction: column;

  padding-left: 4rem;
  gap: 2rem;
  margin-top: 2.4rem;
}

.info a {
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease 0s;
}

.info a:hover {
  text-decoration: none;
  color: var(--color-text-info);
}

.info i {
  color: var(--color-icons);
  font-size: 1.8rem;
}

.info span {
  font-size: 1.4rem;
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  margin-left: 1rem;
  color: var(--color-text-ocupation);
}

.redes {
  margin-top: 3rem;
  font-size: 1.6rem;

  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
}

.redes a {
  color: var(--color-icons);
  transition: all 0.3s ease 0s;
}

.redes a:hover {
  color: var(--color-text-info);
}

/*================= MEDIA QUERIES ===================*/

@media screen and (max-width: 767px) and (min-width: 280px){
  
  
  .div-form form {
    flex-direction: column;
    height: auto;
  }

  .div-form form input {
    height: 2.8rem;
    width: 100%;
  }
  
.button-form{
  width: inherit;
  margin-top: 1.4rem;
}

  .button-form button {
    width: 100%;
    min-width: 16.8rem;
    height: 2.8rem;
  }
}