header {
  background-color: rgb(112, 63, 192);
  color: white;
  padding: 1rem 2rem;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.32);
}

:root {
  --color-primary:rgba(112, 63, 192, 1);
  --color-secundary: rgb(40, 229, 160);
  --color-blue: rgb(40, 229, 160);
}

main {
  height: auto;
  width: 100%;
  display: flex;
  padding: 0 2rem;
  margin: 1rem 0;
}
main article {
  width: 50%;
  padding: 1rem;
}
main .create-event form {
  width: 60%;
}
main .create-event form .input-box {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
main .create-event form .input-box input {
  height: 2rem;
  width: 100%;
  padding: 0.6rem;
  font-size: 1rem;
  outline: none;
  border: 1px solid rgba(0, 0, 0, 0.614);
  border-radius: 0.3rem;
}
main .create-event form .input-box input:focus {
  border: 1.5px solid rgba(0, 0, 0, 0.596);
}
main .create-event form .imageEvent-box {
  margin: 2rem 0;
  padding: 0.5rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background-color: rgb(236, 236, 236);
  position: relative;
}
main .create-event form .imageEvent-box:hover {
  color: rgb(0, 80, 200);
}
main .create-event form .imageEvent-box label {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 1rem;
}
main .create-event form .imageEvent-box input {
  opacity: 0;
}
main .create-event form .textarea-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
main .create-event form .textarea-box textarea {
  width: 100%;
  resize: none;
  padding: 1rem;
  font-size: 1rem;
  outline: none;
  border: 1px solid rgba(0, 0, 0, 0.614);
  border-radius: 0.3rem;
}
main .create-event form .textarea-box textarea:focus {
  border: 1.5px solid rgba(0, 0, 0, 0.539);
}
main .create-event form button {
  width: 18rem;
  height: 2.5rem;
  background-color: rgb(40, 229, 161);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  margin-top: 2rem;
  width: 100%;
  text-transform: uppercase;
}
main .create-event form button:hover {
  box-shadow: 0 0px 0px 3px rgba(40, 229, 160, 0.299);
}
main .preview .preview-event {
  margin-top: 1rem;
  display: flex;
  gap: 2rem;
}
main .preview .preview-event img {
  width: 10rem;
  border-radius: 0.5rem;
}
main .preview .preview-event .date-event {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
main .preview .preview-event .date-event h3 {
  font-size: 1.5rem;
}
main .preview .preview-event .date-event .description {
  word-break: break-all;
}
main .preview .preview-buttons {
  margin-top: 6rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
main .preview .preview-buttons button, main .preview .preview-buttons a {
  width: 18rem;
  height: 2.5rem;
  background-color: rgb(40, 229, 161);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}
main .preview .preview-buttons button:hover, main .preview .preview-buttons a:hover {
  box-shadow: 0 0px 0px 3px rgba(40, 229, 160, 0.299);
}
main .preview .preview-buttons .preview-btn_viewAll {
  background-color: var(--color-primary);
  font-weight: 600;
  color: white;
}
main .preview .preview-buttons .preview-btn_viewAll:hover {
  box-shadow: 0 0px 0px 3px rgba(79, 27, 162, 0.299);
}
main .preview .preview-buttons .preview-btn_viewSite {
  background-color: transparent;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  color: rgb(91, 108, 206);
  gap: 0.5rem;
}
main .preview .preview-buttons .preview-btn_viewSite:hover {
  box-shadow: none;
  color: rgb(63, 63, 211);
}

@media (max-width: 700px) {
  main {
    flex-direction: column;
    padding: 0;
  }
  main article {
    width: 100%;
  }
  main .create-event form {
    width: 100%;
  }
  main .preview {
    text-align: center;
  }
  main .preview .preview-event {
    flex-direction: column;
    gap: 1rem;
  }
  main .preview .preview-event .date-event {
    text-align: left;
  }
  main .preview .preview-event .img-event {
    display: flex;
    justify-content: center;
  }
}
:root {
  --color-primary:rgba(112, 63, 192, 1);
  --color-secundary: rgb(40, 229, 160);
  --color-blue: rgb(40, 229, 160);
}

main {
  height: auto;
  width: 100%;
  display: flex;
  padding: 0 2rem;
  margin: 1rem 0;
}
main article {
  width: 50%;
  padding: 1rem;
}
main .create-event form {
  width: 60%;
}
main .create-event form .input-box {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
main .create-event form .input-box input {
  height: 2rem;
  width: 100%;
  padding: 0.6rem;
  font-size: 1rem;
  outline: none;
  border: 1px solid rgba(0, 0, 0, 0.614);
  border-radius: 0.3rem;
}
main .create-event form .input-box input:focus {
  border: 1.5px solid rgba(0, 0, 0, 0.596);
}
main .create-event form .imageEvent-box {
  margin: 2rem 0;
  padding: 0.5rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background-color: rgb(236, 236, 236);
  position: relative;
}
main .create-event form .imageEvent-box:hover {
  color: rgb(0, 80, 200);
}
main .create-event form .imageEvent-box label {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 1rem;
}
main .create-event form .imageEvent-box input {
  opacity: 0;
}
main .create-event form .textarea-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
main .create-event form .textarea-box textarea {
  width: 100%;
  resize: none;
  padding: 1rem;
  font-size: 1rem;
  outline: none;
  border: 1px solid rgba(0, 0, 0, 0.614);
  border-radius: 0.3rem;
}
main .create-event form .textarea-box textarea:focus {
  border: 1.5px solid rgba(0, 0, 0, 0.539);
}
main .create-event form button {
  width: 18rem;
  height: 2.5rem;
  background-color: rgb(40, 229, 161);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  margin-top: 2rem;
  width: 100%;
  text-transform: uppercase;
}
main .create-event form button:hover {
  box-shadow: 0 0px 0px 3px rgba(40, 229, 160, 0.299);
}
main .preview .preview-event {
  margin-top: 1rem;
  display: flex;
  gap: 2rem;
}
main .preview .preview-event img {
  width: 10rem;
  border-radius: 0.5rem;
}
main .preview .preview-event .date-event {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
main .preview .preview-event .date-event h3 {
  font-size: 1.5rem;
}
main .preview .preview-event .date-event .description {
  word-break: break-all;
}
main .preview .preview-buttons {
  margin-top: 6rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
main .preview .preview-buttons button, main .preview .preview-buttons a {
  width: 18rem;
  height: 2.5rem;
  background-color: rgb(40, 229, 161);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}
main .preview .preview-buttons button:hover, main .preview .preview-buttons a:hover {
  box-shadow: 0 0px 0px 3px rgba(40, 229, 160, 0.299);
}
main .preview .preview-buttons .preview-btn_viewAll {
  background-color: var(--color-primary);
  font-weight: 600;
  color: white;
}
main .preview .preview-buttons .preview-btn_viewAll:hover {
  box-shadow: 0 0px 0px 3px rgba(79, 27, 162, 0.299);
}
main .preview .preview-buttons .preview-btn_viewSite {
  background-color: transparent;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  color: rgb(91, 108, 206);
  gap: 0.5rem;
}
main .preview .preview-buttons .preview-btn_viewSite:hover {
  box-shadow: none;
  color: rgb(63, 63, 211);
}

@media (max-width: 700px) {
  main {
    flex-direction: column;
    padding: 0;
  }
  main article {
    width: 100%;
  }
  main .create-event form {
    width: 100%;
  }
  main .preview {
    text-align: center;
  }
  main .preview .preview-event {
    flex-direction: column;
    gap: 1rem;
  }
  main .preview .preview-event .date-event {
    text-align: left;
  }
  main .preview .preview-event .img-event {
    display: flex;
    justify-content: center;
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-size: 1rem;
  font-family: "Inter", sans-serif;
}

:root {
  --color-primary:rgba(112, 63, 192, 1);
  --color-secundary: rgb(40, 229, 160);
  --color-blue: rgb(40, 229, 160);
}/*# sourceMappingURL=main.css.map */