/*
Copyright (C) 2025 Kian Kasad and Henry Rovnyak

This file is part of the Purdue Hackers webring.

The Purdue Hackers webring is free software: you can redistribute it and/or
modify it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

The Purdue Hackers webring is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License
for more details.

You should have received a copy of the GNU Affero General Public License along
with the Purdue Hackers webring. If not, see <https://www.gnu.org/licenses/>.
*/

body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        avenir next,
        avenir,
        segoe ui,
        helvetica neue,
        Cantarell,
        Ubuntu,
        roboto,
        noto,
        helvetica,
        arial,
        sans-serif;
    margin: 0;
    padding: 32px 16px;
    color: #262426; /* From logo color */
    width: 100%;
    box-sizing: border-box;
}

main {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#titlesec {
    width: min-content;
    max-width: 100%;
}

#members {
    width: max-content;
    max-width: 100%;
    display: flex;
    flex-direction: column;
}

h1,
h2 {
    line-height: 0.8;
    margin-top: 0;
}

h1 {
    font-size: clamp(4em, 13vw, 16em);
    font-weight: 950; /* Extra Black */
    margin-bottom: 0.5em;
}

.nowrap {
    white-space: nowrap;
}

h1 svg {
    height: 0.8em;
    vertical-align: baseline;
    transform: translateY(4px);
}

h2 {
    font-size: clamp(2.5em, 2em + 2vw, 4em);
    font-weight: 800; /* Heavy */
}

p,
tbody {
    font-weight: 300;
}

section {
    margin-bottom: 32px;
}

#tablecontainer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

table {
    border-spacing: 0;
}

table td,
table th {
    padding-block: 4px;
    text-align: left;
    --padding-inline: 32px;
}

table :is(td, th):not(:last-child) {
    padding-inline-end: var(--padding-inline);
}

.alum-icon {
    padding-inline-start: 0.5em;
}

a:link {
    color: #2874a6;
}

#fun-selector {
    margin-top: 64px;
    text-align: right;
    flex-grow: 1;
    display: flex;
    align-items: flex-end;
}

#fun-selector > form {
    width: 100%;
}

/* For very small screens */
@media (max-width: 400px) {
    table :is(td, th) {
        --padding-inline: 24px;
    }
}

/* For small and medium screens */
@media (max-width: calc(80vw + 14em)) {
    main {
        flex-direction: column;
    }

    #titlesec {
        width: auto;
    }

    #tablecontainer {
        align-items: start;
        overflow-x: auto;
    }

    table {
        margin-inline: 12px;
    }
}