:root {
    --Dark-Orange: #fc5a16ff;
    --Light-Orange: #fd8d25ff;
    --Dark-Green: #3f7e29ff;
    --Light-Green: #83c93bff;
}

html, body {
  height: 100%; /* Make body fill the viewport */
  margin: 0;
}

body {
    font-family: Lexend;

    margin: 0;
    padding: 0;
    background-color: var(--Dark-Orange);
}

.header-logo {
    width: 175px;
    margin-bottom: 10px;
}

.header-top {
    border: none;
    border-bottom: 3px solid var(--Dark-Orange);
}

header {
    padding-top: 10px;
    background-color: var(--Light-Orange);
}

.button-grid {
    display: flex;
}

.button-grid button {
    font-family: Lexend;
    font-weight: 900;

    flex: 1;
    height: 50px;

    color: var(--Dark-Green);
    background-color: var(--Light-Green);

    border: none;
    border-bottom: 3px solid var(--Dark-Green);
}

.button-grid button:hover {
    color: var(--Light-Green);
    background-color: var(--Dark-Green);

    border: none;
    border-bottom: 3px solid var(--Light-Green);

    cursor: pointer;
}

.center-div {
    display: flex;
    justify-content: center;
}

.container {
    width: 100%;
    max-width: 1080px;
    
    margin: 20px 30px;
    padding: 10px;

    text-align: center;

    color: var(--Dark-Green);
    background-color: var(--Light-Green);

    border: 3px solid var(--Dark-Green);

    border-radius: 25px;

    max-width: 1080px;

    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.container:hover {
  transform: translateY(-5px);
  transition: box-shadow 0.3s ease, transform 0.3s ease;

  box-shadow: 0 5px 2px var(--Dark-Green);
}

.container hr {
    border: none;
    border-bottom: 3px solid var(--Dark-Green);
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--Light-Orange);
  padding: 5px;
  text-align: center;
}

footer {
  padding: 5px;
  text-align: center;
  background: #111;
}

.social-icons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.social-icons a {
  display: inline-block;
  margin: 8px;
  width: 40px;
  height: 40px;
}

.social-icons img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1); /* white icons */
  transition: transform 0.2s;
}

.social-icons img:hover {
  transform: scale(1.2);
}