@charset "UTF-8";

/* FONTS */
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on December 29, 2010 06:15:34 AM America/New_York */
@font-face {
    font-family: 'AngelinaRegular';
    src: url('../fonts/angelina-webfont.eot');
    src: local('☺'), url('../fonts/angelina-webfont.woff') format('woff'), url('../fonts/angelina-webfont.ttf') format('truetype'), url('../fonts/angelina-webfont.svg#webfontOsIWwBqf') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* MAIN LAYOUT */

html {
    height: 100vh;
    height: 100dvh;
}
body {
    display: grid;
    grid-template:
        "header"
        "nav"
        "main"
        "footer";
    grid-template-rows: 150px min-content 1fr auto;
    grid-gap: 0 4.4%;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    line-height: 1.5;
    font-family: Figtree, sans-serif;/*Antic, Tahoma, Geneva, sans-serif;*/
    font-size: 16px;
    font-weight: 300;
}

h1, h2, h3, h4, h5, h6 {
    font-family: AngelinaRegular, "Palatino Linotype", 'Book Antiqua', Palatino, serif;
    font-weight: normal;
    font-style: normal;
}

/* HEADER */

header {
    top: 0;
    background: transparent url(../images/BannerBackdrop.jpg) top center no-repeat;
    display: grid;
    place-content: center;
    z-index: 100;
    & h1 {
        color: #000000;
        font-family: "Ultra","Palatino Linotype", 'Book Antiqua', Palatino, serif;
        font-size: clamp(3rem, 2.5273rem + 2.3636vw, 4.3rem);
        font-weight: normal;
        letter-spacing: -2px;
        line-height: 1em;
        text-align: center;
        text-shadow: 1px 1px 1px rgba(255,255,255,0.65);
        margin: 0;
    }
    & a {
        text-decoration: none;
        color: inherit;
    }
}
body > nav {
    display: grid;
    grid-auto-flow: column;
    align-content: flex-start;
    justify-items: center;
    background-color: #333;
    background-image: linear-gradient(#333, #555);
    & a {
        padding: 0.25em 1em 0.25em 1em;
        text-decoration: none;
        font-size: .9em;
        border-top: 0.25em solid transparent;
        border-bottom: 0.25em solid transparent;
        font-weight: 400;
        &:hover {
            border-bottom: 0.25em solid red;
        }
        & span {
            color: white;
            text-shadow: 1px 1px 1px black;
        }
    }
    &.diary #diary,
    &.results #results,
    &.videos #videos,
    &.about #about {
        border-bottom: 0.25em solid red;
    }
}
main {
    height: 100%;
    overflow: auto;
    background-color: #becdec;
    & ol {
        margin: 0;
        padding: 0;
        & li {
            list-style-type: none;
            max-width: 1200px;
            margin: auto;
            & article {
                position: relative;
                background-color: white;
                margin: 1em 2em;
                padding: 0.5em 2em 0.5em;
                border: 1px solid #333;
                border-radius: 1em;
                & h2 {
                    margin: 0;
                    padding-left: 4rem;
                    font-size: 2.25rem;
                    line-height: 1.2;
                    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
                    border-bottom: 2px solid black;
                }
                & p {
                    margin: 1.5em 0 0;
                    &.author {
                        font-size: .9rem;
                        text-align: right;
                        margin: 0;
                    }
                }
                & time {
                    position: absolute;
                    margin: 0 .5rem 0 -3rem;
                    padding: 0.5rem;
                    background-color: #edc4b3;
                    border-radius: 5px;
                    transform: rotate(-15deg);
                    font-size: .9em;
                }
                & a {
                    color: black;
                    background-color: #ecc3b1;
                    cursor: pointer;
                }
                & .embedded-video {
                    display: block;
                    width: 95%;
                    margin: 0 auto;
                    border: none;
                    aspect-ratio: 16/9;
                }
                & footer {
                    display: grid;
                    grid-template: "comment viewhide" "comments comments";
                    grid-template-columns: minmax(0, max-content) 1fr;
                    grid-gap: .5em;
                    font-size: 0.9rem;
                    & a {
                        background-color: transparent;
                        color: red;
                        text-decoration: none;
                        white-space: nowrap;
                        &.makecomment {
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                        &:hover {
                            text-decoration: underline;
                        }
                    }
                    & .viewhide {
                        border-left: 0.5px solid black;
                        padding-left: .5em;
                        & .hide {
                            display: none;
                        }
                        & .view {
                            display: inline;
                        }
                        &:focus-within {
                            & .view {
                                display: none;
                            }
                            & .hide {
                                display: inline;
                            }
                        }
                    }
                    & ul {
                        grid-area: comments;
                        display: none;
                        padding: 0;
                        & li {
                            background-color: #f9f9f0;
                            border-radius: 0px;
                            border: none;
                            border-top: 1px solid #70809f;
                            font-size: 12px;
                            padding: .5em;
                            & p {
                                margin: 0;
                                &.commentauthor {
                                    font-weight: 800;
                                    color: rgba(0, 0, 0, .5);
                                    text-align: right;
                                }
                            }
                        }
                    }
                    &:has(.viewhide:focus-within) {
                        & ul {
                            display: block;
                        }
                    }
                }
            }
            & .submitcomment {
                position: absolute;
                display: grid;
                place-items: center;
                top: 0;
                left: 0;
                width: 100dvw;
                height: 100dvh;
                background-color: rgba(0, 0, 0, 0.75);
                z-index: 100;
                display: none;
                & form {
                    display: grid;
                    grid-auto-flow: row;
                    grid-gap: .5em;
                    width: 300px;
                    padding: 20px;
                    border-radius: 10px;
                    background-color: #becdec;
                    & h2 {
                        margin: 0;
                    }
                }
                &:has(:active, :focus, :focus-within) {
                    display: grid;
                }
            }
            &:has(.makecomment:focus-within) {
                & .submitcomment {
                    display: grid;
                }
            }
        }
    }
    & nav {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        justify-content: space-between;
        max-width: 1200px;
        padding: 2rem;
        margin: auto;
        font-size: clamp(1.25rem, 0.5rem + 3vw, 2rem);
        font-weight: 300;
        & a {
            color: rgba(0, 0, 0, .5);
            text-decoration: none;
            &:visited {
                color: rgba(0, 0, 0, .5);
            }
        }
    }

    &:has(.diary) {
        display: grid;
        place-items: center;
        & .diary {
            width: 90%;
            height: 90%;
        }
    }

    &:has(.resultstable) {
        display: grid;
        place-items: center;
        grid-auto-flow: row;
        grid-auto-rows: max-content;
        & h2 {
            font-size: 2.25rem;
            text-align: center;
        }
        & p {
            @media (min-width: 800px) { width: 60%; }
            @media (min-width: 533px) and (max-width: 799px) { width: 480px; }
            @media (max-width: 532px) { width: 90%; }
        }
        & .resultstable {
            background-color: #ffffff;
            width: 90%;
            text-align: center;
            display: block;
            height: max-content;
            overflow-x: auto;
            overflow-y: hidden;
            & tbody {
                display: grid;
                min-width: fit-content;
                &.cols-9 { grid-template-columns: repeat(9, auto); }
                &.cols-10 { grid-template-columns: repeat(10, auto); }
                &.cols-20 { grid-template-columns: repeat(20, auto); }
            }
            & tr {
                display: contents;
            }
            & .resultshead td {
                background-color: #becdec;
                &:not(:first-child),
                &.not-first {
                    writing-mode: tb-rl;
                }
            }
            & td {
                display: grid;
                place-items: center;
                padding: .25em .5em;
                &:first-child:not(.not-first) {
                    position: sticky;
                    left: 0;
                }
                &.rowspan-2 { grid-row: span 2; }
                &.colspan-2 { grid-column: span 2; }
            }
            & .resultsband {
                background-color: #00cc33;
            }
            & .resultsus td {
                background-color: #f5ed65;
            }
        }
    }

    &:is(.aboutus) {
        padding: 0 5%;
        & h3 {
            font-size: 2em;
            text-align: left;
            &:first-of-type {
                margin-top: 10px;
            }
        }
        & #map {
            float: right;
            width: 50%;
            margin: 10px 2%;
            & img {
                width: fit-content;
            }
        }
        & a {
            color: black;
            background-color: #ecc3b1;
            cursor: pointer;
            text-decoration: none;
            &:hover {
                text-decoration: underline;
            }
        }
    }

    &:is(.videos) {
        display: grid;
        padding: 0 5%;
        & h1 {
            text-align: center;
            font-size: 3rem;
        }
        & h2 {
            text-align: center;
            font-size: 2.5rem;
        }
        & h3 {
            font-size: 2rem;
        }
        & :is(ul, ol) {
            padding: 0;
        }
        & .video-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-gap: .5em;
            & li {
                display: grid;
                place-items: center;
                & a {
                    position: relative;
                    display: block;
                    & span {
                        position: absolute;
                        bottom: 0;
                        display: block;
                        width: 100%;
                        background-color: rgba(255, 255, 255, .5);
                        color: black;
                        font-size: .8rem;
                        text-decoration: none;
                        text-shadow: 0 0 2px white;
                        text-align: center;
                    }
                }
            }
        }
    }

    &:is(.contactus) {
        & form {
            width: 600px;
            margin: 0 auto;
            & > * {
                width: 100%;
            }
            & :is(input, textarea, select) {
                padding: 5px;
                font-size: 1rem;
            }
            & input[type=submit] {
                width: 150px;
            }
            & #thanks {
                font-size: 3em;
                margin: 2em 0;
            }
        }
    }
}
body > footer {
    display: grid;
    grid-auto-flow: row;
    grid-auto-rows: 1rem;
    justify-items: center;
    color: white;
    background-image: linear-gradient(#555, #333);
    font-size: 0.75em;
    text-shadow: 1px 1px 1px black;
    & a {
        color: red;
    }
}

/*@media (max-width: 600px) {
    .resultstable .resultshead td:not(:first-child) {
        writing-mode: tb-rl;
    }
}*/