/* Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Set Color Variables */
:root{
    --logo-green: #a8c996;
    --logo-white: #ffffff;
    --soft-pink: #f9c6d1;
    --lemon-cream: #fff6b3;
    --sky-blue: #b3e5f9;
    --mist-gray: #f5f5f5;
    --dove-gray: #6e6e6e;
    --crimson: #d993a0;
    --pale-mint: #d7e8cf;
    --peach-pop: #ffb07c;
    --sand: #edece8;
}

/* Set Global Styles */
html {
    font-family: 'Courier New', monospace, 'Arial', sans-serif;
    background-color: var(--web-sand);
}

body {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(5, 1fr);
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: none;
    z-index: 1000;
}

/* Set Header Styles*/
header {
    grid-column: 1 / 4;
    grid-row: 1 / 4;
    display: flex;
    align-items: center;
    z-index: 1000;
    height: 60vh;
    width: 38vw;
}

.header--logo, .header--logo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.header--logo img:hover {
    cursor: pointer;
    transform: scale(1.05);
}

/* Set 404 Styles*/
.main--error {
    grid-column: 4 / 7;
    grid-row: 1 / 6 ;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1001;
    height: 100vh;
    width: 38vw;
}

.main--error img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Set Footer Styles */
footer, footer img {
    grid-column: 6 / 9;
    grid-row: 1 / 6;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    height: 100vh;
    width: 38vw;
}

/* Set Mobile Responsiveness */
@media (max-width: 768px) {
  body {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(8, 1fr);
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: none;
    z-index: 1000;
  }

header{
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    display: flex;
    align-items: center;
    height: 25vh;
    width: 40vw;
}

.main--error{
    grid-column: 1 / 4;
    grid-row: 4 / 7;
    height: 38vh;
    width: 60vw;
}

footer {
    grid-column: 1 / 6;
    grid-row: 1 / 9;
    min-height: 100dvh; /* Use dynamic viewport height (fixes iPhone cropping) */
    height: auto;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}


footer img {
  width: 90vw;
  height: auto;
  max-height: 90dvh;   /* Prevents overflow vertically on iOS */
  object-fit: contain;
}