/* CSS Document */

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/fontawesome.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/regular.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/brands.min.css");

/* --------- */
/* CSS Reset */
/* --------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  line-height: min(40px, 1.6em);
}

body {
  -webkit-font-smoothing: antialiased;
  font-size: 18px;
  font-family: 'system-ui', 'Tahoma', sans-serif;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* --------- */
/* Reset End */

/* Begin code below... */

/* Entire Wrapper of Elements */
body {
  background-color: #F0EDEE;
  color: #222222;
}

#under-construction-group {
  display: flex;
  min-height: 95vh;
  width: max-content;
  margin: auto;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  gap: 1.94em;
  padding: 3ch 0;
}

/* Image Element Wrapper */
#under-construction-group>#under-construction-image-container {
  display: block;
  min-height: 8em;
  min-width: 8em;
  max-width: 12em;
  max-height: 12em;
}

/* Image Element */
#under-construction-group>#under-construction-image-container>img#under-construction-image {
  display: inline-block;
  height: 100%;
  width: 100%;
}

#under-construction-group>#under-construction-message-container {
  display: flex;
  flex-flow: column nowrap;
  gap: 1ch;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#under-construction-group>#under-construction-cta-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2ch;
}

#under-construction-group>#under-construction-cta-container>#under-construction-form-container {
  display: flex;
  flex-flow: column nowrap;
}

#under-construction-group>#under-construction-cta-container>#under-construction-form-container>form.under-construction-form {
  display: flex;
  flex-flow: column nowrap;
}

#under-construction-group>#under-construction-cta-container>#under-construction-form-container>form.under-construction-form>fieldset.ucf-fld-grp {
  display: flex;
  border-radius: 1ch 1ch 0 0;
  flex-flow: column nowrap;
}

#under-construction-group>#under-construction-cta-container>#under-construction-form-container>form.under-construction-form>fieldset.ucf-fld-grp>input {
  background-color: #eaeaea;
  border-radius: 1ch;
  border: 1px solid #cfcfcf;
  padding: 0.4ch 1ch;
}

#under-construction-group>#under-construction-cta-container>#under-construction-form-container>form.under-construction-form>fieldset.ucf-fld-grp>input:focus,
#under-construction-group>#under-construction-cta-container>#under-construction-form-container>form.under-construction-form>fieldset.ucf-fld-grp>textarea:focus {
  border: 1px solid #4f4f4f;
  background-color: #fafafa;
}

#under-construction-group>#under-construction-cta-container>#under-construction-form-container>form.under-construction-form>fieldset.ucf-fld-grp>textarea {
  min-height: 20ch;
  background-color: #eaeaea;
  border: 1px solid #cfcfcf;
  border-radius: 1ch;
  padding: 0.4ch 1ch;
  font-size: 16px;
}

#under-construction-group>#under-construction-cta-container>#under-construction-form-container>form.under-construction-form>fieldset.ucf-btn-grp {
  display: grid;
  grid-auto-flow: column;
  gap: 1ch;
  border-radius: 0 0 1ch 1ch;
}

#under-construction-group>#under-construction-cta-container>#under-construction-form-container>form.under-construction-form>fieldset.ucf-btn-grp>button {
  cursor: pointer;
  padding: 0.2ch 0.35ch;
  background-color: #efefef;
  border: 1px solid #afafaf;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5ch;
  border-radius: 1ch;
  text-decoration: none;
  color: inherit;
}

#under-construction-group>#under-construction-cta-container>#under-construction-form-container>form.under-construction-form>fieldset.ucf-btn-grp>button:hover {
  background-color: #d9d9d9;
  transform: scale(0.985, 0.985);
  transform-origin: center;
}

#under-construction-group>#under-construction-cta-container>aside>ul {
  padding: 0 1ch;
}

#under-construction-group>#under-construction-cta-container>aside>ul>li {
  list-style-type: "-";
  padding-top: 1ch;
  padding-left: 2.33ch;
}

#under-construction-group>#under-construction-cta-container>aside>ul>li>a {
  padding: 0.2ch 0.35ch;
  background-color: #efefef;
  border: 1px solid #afafaf;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5ch;
  border-radius: 1ch;
  text-decoration: none;
  color: inherit;
}

#under-construction-group>#under-construction-cta-container>aside>ul>li>a>* {
  padding: 0.03ch 0.35ch;
}

#under-construction-group>#under-construction-cta-container>aside>ul>li>a:hover {
  background-color: #d9d9d9;
  transform: scale(0.985, 0.985);
  transform-origin: center;
}

#under-construction-group>#under-construction-cta-container>aside>ul>li>a:hover>.ucf-socials-text {
  text-decoration: underline;
}







/* Mobile Layout */
@media screen and (max-width: 1000px) {
  #under-construction-group {
    width: revert;
    padding: 3ch;  
  }
  #under-construction-group>#under-construction-cta-container {
    display: flex;
    flex-flow: column nowrap;
  }
}

/* Desktop Fixes */
@media screen and (min-width: 1001px) {
  #under-construction-group {
    min-height: revert;
  }
  #under-construction-group>#under-construction-image-container{
    height: auto;
    max-height: revert;
    min-height: revert;
    margin: auto;
  }
  #under-construction-message-container>h1 {
    display: none;
  }
}