html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #8e8e8e;
}

#scale-wrapper {
    width: 1600px;   /* original design width */
    height: 900px;   /* original design height */
    transform-origin: top left;
    /* scale uniformly based on smaller of viewport width/height */
    transform: scale(
        min(
            100vw / 1600,
            100vh / 900
        )
    );
}
.header-wrapper {
    display: flex;           /* horizontal layout */
    align-items: center;     /* vertically center logo and banner */
    width: 100vw;            /* full viewport width */
    height: 5rem;            /* height of logo/banner */
}

.head-banner {
    flex: 1;                 /* take remaining space to the right */
    height: 100%;
    background-color: #f44336;
    display: flex;           /* optional, for centering text */
    justify-content: center;
    align-items: center;
    text-align: center;
}

#home-logo {
    height: 5rem;            /* keeps original size */
    width: auto;
}


/* Sections container */
.sections {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.sections button {
    margin: 0 0.75vw; /* fixed gap in pixels */
}

/* Buttons */
button {
    background-color: #212121;
    height: auto; /* 2.5rem */
    width: 13vw; /* 15rem */
    outline: none;
    font-size: 1.4vw;
    font-weight: 700;
    color: white;
    border-radius: 28px; /* 1.75rem */
    border: none;
    box-shadow: 0 0.35rem rgba(0, 0, 0, 0.5); /* 0.35rem */
    transition: all 0.2s ease-in-out;
}

button:hover {
    background-color: #616161;
}

button:active {
    background-color: #616161;
    box-shadow: 0 5px #666;
    transform: translateY(4px); /* 0.25rem */
}


/*--------------Body---------------*/
.whoarewe {
    display: flex;
    flex-direction: row;     /* left vs right */
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1vw;
    padding: 1vw 1vw;
    background-color: white;
    border: 4px solid black;
    border-radius: 1rem;
    margin: 0.5rem;
    place-items: center;
}
.bio-group {
    display: flex;
    flex-direction: column; /* stack bios vertically */
    gap: 1vw;
}
.bio{ 
    position: relative; 
    background-color: #f44336; 
    color: white; 
    width: 45vw; 
    border-radius: 1rem; 
    padding: 10px; 
    font-family: sans-serif; 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    align-items: center; 
    border: 4px solid black; 
    border-radius: 1rem; }
.bio h2{
    font-size: 1.75vw;
    margin-top: 5px;
    margin-bottom: 5px;
}
.bio p{
    font-size: 1vw;
    font-weight: 700;
    margin-top: 5px;
    margin-bottom: 5px;
}
.owner-image{   
    position: relative;
    background-color: #f44336;
    color: white;
    width: 45vw;
    border-radius: 1rem;
    padding: 10px;
    font-family: sans-serif;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    border: 4px solid black;
    border-radius: 1rem;
    margin-left: auto;
}
#owner{
    width: 29.25vw;
    height: auto;
    border: 4px solid black;
    border-radius: 1rem;
}

.inline{
    background-color: white;
    display: flex;
    justify-content: center; /* center the group horizontally */
    align-items: stretch;    /* makes all child divs same height */
    gap: 0;
    border: 4px solid black;
    border-radius: 1rem;
    margin: 0.5rem;
}

.inline div{
    align-items: center;     /* horizontal alignment */
    text-align: center;
    width: 20vw;
    display: inline-block;
    vertical-align: top; /* ensures they align at the top */
    margin-right: 1vw;   /* optional spacing between divs */
    gap: 2vh; /* space between sections */
    margin: 10px;
}

.certifications{
    position: relative;
    background-color: #f44336;
    color: white;
    padding: 20px;
    font-family: sans-serif;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    border: 4px solid black;
    border-radius: 1rem;
}
.certifications h2{
    margin-bottom: 5px;
    font-size: 1.75vw;
}
.certifications ul{
    margin-top: 5px;
    margin-bottom: 0px;
    text-align: left;
    font-size: 1.25vw;
}

.education{
    position: relative;
    background-color: #f44336;
    color: white;
    padding: 10px;
    font-family: sans-serif;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    border: 4px solid black;
    border-radius: 1rem;
}
.education h2{
    margin-bottom: 5px;
    font-size: 1.75vw;
}
.education h3{
    margin-top: 5px;
    font-size: 1.25vw;
}

.contact{
    width: 40vw !important;
    text-align: center;
    position: relative;
    background-color: #f44336;
    color: white;
    padding: 10px;
    font-family: sans-serif;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 5px;
    border: 4px solid black;
    border-radius: 1rem;
}
.contact h1{
    margin: 0;
    font-size: 2.25vw;
}
.contact h2{
    margin: 0;
    font-size: 1.75vw;
}
.contact h3{
    margin: 0;
    font-size: 1.25vw;
}
.contact a{
    margin: 0;
    color: white;
}
.contact a:hover {
    text-decoration: underline !important;
    color: lightgrey !important;
}