.ubuntu-light {
  font-family: "Ubuntu", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.ubuntu-regular {
  font-family: "Ubuntu", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.ubuntu-medium {
  font-family: "Ubuntu", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.ubuntu-bold {
  font-family: "Ubuntu", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.ubuntu-light-italic {
  font-family: "Ubuntu", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.ubuntu-regular-italic {
  font-family: "Ubuntu", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.ubuntu-medium-italic {
  font-family: "Ubuntu", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.ubuntu-bold-italic {
  font-family: "Ubuntu", sans-serif;
  font-weight: 700;
  font-style: italic;
}

/* Variables */
:root {
    --primary-color: #008FBD; /* Example primary color */
    --secondary-color: #5AA11E; /* Example secondary color */
    --font-family: 'Ubuntu', sans-serif; /* Default font family */
    --background-colour:#f8f8f8; 
    --background-footer:#041322;
    --standard-padding:10px 20px 30px;
    --standard-width:55%;
    --responsive-width:90%;
}
body {
    font-family: var(--font-family);
    background-color: var(--background-colour);
    background-image: url('../images/Headerlogo.png'),url('../images/Background.jpg');
    background-position: top center;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
}
main {
  position: relative;
    width: var(--standard-width);
    margin: 360px auto 10px;
    padding: var(--standard-padding);
    background-color:rgb(178 190 181 / 80%);
    border-radius: 30px;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
main::before, main::after {
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.3);
    top:3px;
    bottom:10px;
    left:0;
    right:0;
    -moz-border-radius:30px;
    border-radius:30px;
}
main::after {
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
    -moz-transform:skew(8deg) rotate(3deg);
    -ms-transform:skew(8deg) rotate(3deg);
    -o-transform:skew(8deg) rotate(3deg);
    transform:skew(8deg) rotate(3deg);
}

main h1, main h2, main h3, main h4, main h5, main h6 {
    color: var(--primary-color);
    font-family: var(--font-family);
}
main h1 span, main h2 span, main h3 span, main h4 span, main h5 span, main h6 span {
    color: var(--secondary-color);
}
main p {
    color: #333;
    line-height: 1.6;
    font-family: var(--font-family);
    font-size: 1.2rem;
}
footer {
    background-color: var(--background-footer);
    color: #fff;
    text-align: center;
    padding: 10px 0;
    display:grid;
    grid-template-areas:
        "contact social"
        "copy copy";
        grid-template-columns: 1fr 1fr;
}

footer a{
    color: #fff;
    text-decoration: none;
    margin: 0 10px;
}
#contact {
    grid-area: contact;
  min-width: 0;
  padding: 0 20px;
}

#contact h2 {
  margin: 0 0 12px;
  font-size: 1.4rem;
}

.contact-form {
  max-width: 420px;
  margin: 0 auto;
  text-align: left;
}

.form-field {
  margin-bottom: 12px;
}

.form-field label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
}

.form-field label span {
  font-size: 0.85rem;
  font-weight: 400;
}

.form-field input,
.form-field textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  border: 2px solid #b7c3cc;
  border-radius: 4px;
  background: #fff;
  color: #17212b;
  font: inherit;
}

.form-field textarea {
  min-height: 120px;
  resize: vertical;
}

.form-field input:focus-visible,
.form-field textarea:focus-visible,
.contact-form button:focus-visible,
footer a:focus-visible {
  outline: 3px solid #ffd166;
  outline-offset: 3px;
}

.contact-form button {
  min-height: 44px;
  padding: 10px 18px;
  border: 0;
  border-radius: 4px;
  background: var(--secondary-color);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.contact-form button:hover {
  background: #477f18;
}

.form-status {
  max-width: 420px;
  margin: 12px auto 0;
  line-height: 1.5;
}

.form-status:focus {
  outline: 3px solid #ffd166;
  outline-offset: 3px;
}

.form-status a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
#social-media {
    grid-area: social;
    display: flex;
    justify-content: center;
}

#social-media ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
}

#social-media ul li {
    margin: 0 10px;
    font-size: 1.5rem;
}

#social-media ul li img {
    width:50px;
}
#copy {
    grid-area: copy;
    margin-top: 10px;
}
.assistive-text { height: 1px; width: 1px; position: absolute; overflow: hidden; top: -10px; }

@media (max-width: 700px) {
  main {
    box-sizing: border-box;
    width: calc(100% - 32px);
    margin-top: 180px;
  }

  main::before,
  main::after {
    display: none;
  }

  footer {
    grid-template-areas:
      "contact"
      "social"
      "copy";
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 24px 12px;
  }

  #social-media {
    flex-direction: column;
  }

  #social-media ul {
    justify-content: center;
  }
}
@media (max-width: 1496px) {
    body {
        background-size: 200%, auto;
    }
}
@media (max-width: 1116px) {
  main {
    margin-top: 253px;
    width: var(--responsive-width);
  }
}
@media (max-width: 826px) {
  main {
    margin-top: 186px;
  }
}
@media (max-width: 550px) {
  main {
    margin-top: 150px;
  }
}