:root {
    --primary-color-h: 348;
    --primary-color-s: 83%;
    --primary-color-l: 47%;
    --animation-gap: 0.175s;
    --animation-length: 0.45s;
    --animation-start: 0s;
    --play-intro: 1;
    /*--primary-color-h: 195;
    --primary-color-s: 100%;
    --primary-color-l: 50%;*/
    --primary-color: hsl(var(--primary-color-h), var(--primary-color-s), var(--primary-color-l));
    --lighter-primary-color: hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) + 15%));
    --lightest-primary-color: hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) + 30%));

    --darker-primary-color: hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) - 5%));
    --darkest-primary-color: hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) - 10%));
    --secondary-color-h: calc(var(--primary-color-h) + 30);
    --secondary-color-s: var(--primary-color-s);
    --secondary-color-l: var(--primary-color-l);
    --secondary-color: hsl(var(--secondary-color-h), var(--secondary-color-s), var(--secondary-color-l));
    --lightest-secondary-color: hsl(var(--secondary-color-h), var(--secondary-color-s), calc(var(--secondary-color-l) + 30%));
    --lighter-secondary-color: hsl(var(--secondary-color-h), var(--secondary-color-s), calc(var(--secondary-color-l) + 15%));
    --tertiary-color-h: calc(var(--secondary-color-h) + 30);
    --tertiary-color-s: var(--secondary-color-s);
    --tertiary-color-l: var(--secondary-color-l);
    --tertiary-color: hsl(var(--tertiary-color-h), var(--tertiary-color-s), var(--tertiary-color-l));
}

body:not(:has(:target)):has(div.loading) {
    --animation-start: 2s;
}

html {
    scroll-padding-top: 70px;
}

/* montserrat-300 - latin */
@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    src: url('./fonts/montserrat-v31-latin-300.woff2') format('woff2');
}

/* montserrat-300italic - latin */
@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 300;
    src: url('./fonts/montserrat-v31-latin-300italic.woff2') format('woff2');
}

/* montserrat-regular - latin */
@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url('./fonts/montserrat-v31-latin-regular.woff2') format('woff2');
}

/* montserrat-italic - latin */
@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 400;
    src: url('./fonts/montserrat-v31-latin-italic.woff2') format('woff2');
}

/* montserrat-600 - latin */
@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    src: url('./fonts/montserrat-v31-latin-600.woff2') format('woff2');
}

/* montserrat-600italic - latin */
@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 600;
    src: url('./fonts/montserrat-v31-latin-600italic.woff2') format('woff2');
}

/* montserrat-800 - latin */
@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 800;
    src: url('./fonts/montserrat-v31-latin-800.woff2') format('woff2');
}

/* montserrat-800italic - latin */
@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 800;
    src: url('./fonts/montserrat-v31-latin-800italic.woff2') format('woff2');
}

/* libre-baskerville-regular - latin */
@font-face {
    font-display: swap;
    font-family: 'Libre Baskerville';
    font-style: normal;
    font-weight: 400;
    src: url('./fonts/libre-baskerville-v24-latin-regular.woff2') format('woff2');
}

/* libre-baskerville-italic - latin */
@font-face {
    font-display: swap;
    font-family: 'Libre Baskerville';
    font-style: italic;
    font-weight: 400;
    src: url('./fonts/libre-baskerville-v24-latin-italic.woff2') format('woff2');
}

/* libre-baskerville-700 - latin */
@font-face {
    font-display: swap;
    font-family: 'Libre Baskerville';
    font-style: normal;
    font-weight: 700;
    src: url('./fonts/libre-baskerville-v24-latin-700.woff2') format('woff2');
}

/* libre-baskerville-700italic - latin */
@font-face {
    font-display: swap;
    font-family: 'Libre Baskerville';
    font-style: italic;
    font-weight: 700;
    src: url('./fonts/libre-baskerville-v24-latin-700italic.woff2') format('woff2');
}




body {
    background-image: radial-gradient(#f4e1e5 1px, transparent 1px), radial-gradient(#f4e1e5 1px, transparent 1px);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
    background-color: rgba(157, 224, 245, 0);
}


p>a {
    color: var(--secondary-color);
    /*text-decoration: underline dashed;
    text-decoration: none;*/

}

@media not (prefers-reduced-motion) {
    p>a {
        transition: all linear 0.1s;
    }
}

@media (prefers-reduced-data: reduce) {}

p>a:hover {
    background-color: var(--lightest-secondary-color);
    color: black;
    border-radius: 2.5px;
    padding: 2.5px;
    margin: -2.5px;
}


app-horizbuttoncontainer {
    width: 100%;
    display: flex;
    flex-flow: row;
    justify-content: center;
    gap: 20px;
}

app-horizbuttoncontainer>* {
    width: 100%;
    align-self: center;
    padding: 10px;
    height: 50px;
    border-radius: 5px;
    background-color: cornflowerblue;
    text-decoration: none;
    color: white;
}

header {
    position: fixed;
    top: 10px;
    display: flex;
    flex-wrap: wrap;
    /* width: calc(100% - 20px); */
    left: 10px;
    right: 10px;
    background-color: white;
    padding: 10px;
    z-index: 10;

}

custom-bold {

    font-size: larger;
    font-weight: bolder;
}


@media screen and (max-width: 640px) {
    header>custom-bold {
        /*width: calc(100% - 30px);*/
        width: 640px;
        margin-right: calc(100%);
    }

}

@media screen and (max-width: 870px) {
    .hideonmoble {
        display: none;
    }
}


custom-light {

    font-size: medium !important;
    font-weight: lighter !important;

}

header>* {

    border-radius: 10px;
    color: black;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    font-weight: bolder;
}

header> :not(.headerdropdown-container) {
    margin-right: 10px;
}

h2 {
    text-transform: uppercase;
    font-weight: bolder;
}

header>a,
header>.headerdropdown-container>a,
header>.headerdropdown-container>.headerdropdown>a {
    text-decoration: none;
    color: unset;

    padding: 2.5px;
    margin: -2.5px;
    margin-right: 10px;

}

header>.headerdropdown-container>.headerdropdown>a {
    text-transform: none;
    width: 100%;
}

.headerdropdown-container>.headerdropdown>a:hover {
    background-color: var(--primary-color);
    color: rgb(255, 255, 255);

}

.headerdropdown-container>.headerdropdown>a {
    font-weight: lighter;
}

header>.headerdropdown-container {

    align-content: center;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: whitesmoke;
}

a.button,
div.button,
button {
    background-color: var(--primary-color);
    padding: 10px;
    border-radius: 0px;
    text-decoration: none;
    color: white;


}

@media not (prefers-reduced-motion) {

    a.button,
    div.button,
    button {
        transition: all 0.1s linear;
    }
}

a.button.arrow::after,
div.button.arrow::after,
button.arrow::after {
    content: " -->"
}

a.button:hover,
div.button:hover,
button:hover {
    background-color: var(--darker-primary-color);
    /* border-radius: 10px; */

}

a.button:active,
div.button:active,
button:active {
    background-color: var(--darkest-primary-color);
    /* border-radius: 5px; */

}

footer {
    background-color: white;
    padding: 10px;
    margin-top: 20px;
    margin-bottom: -10px;
    border-radius: 10px 10px 0 0;
    position: static;
}

main {
    min-height: 100vh;
}

article:not(.preview) {
    max-width: 700px;
    margin: auto;
}

custom-card>h3:not(:has(+ .underline))::after,
.underline::after,
.card>h3.underline::after {

    color: var(--primary-color);
    content: "";
    display: block;
    background-image: linear-gradient(to right, var(--secondary-color), var(--secondary-color));
    width: 3em;
    height: 2px;
    margin-bottom: 5px;
    margin-right: 10px;
    margin-top: 10px;

}

custom-card>h3:has(+ .underline),
.card>h3:has(+ .underline) {
    margin-bottom: 0pt;
}

custom-card>h3+.underline,
.card>h3+.underline {
    margin-top: 5px;
}

custom-card>h3+.underline::after,
.card>h3+.underline::after {
    color: var(--primary-color);
    content: "";
    display: block;
    background-image: linear-gradient(to right, var(--secondary-color), var(--secondary-color));
    width: 3em;
    height: 2px;
    margin-bottom: 5px;
    margin-right: 10px;
    margin-top: 10px;
}

custom-card.news,
.card.news {
    display: block;
    width: calc(100% - 20px);
    margin-bottom: 20px;
}

article.preview>p.date {
    color: var(--primary-color);
    font-family: 'Libre Baskerville';
    font-size: 1.2rem;
}

custom-card>p,
.card>p {
    font-family: 'Libre Baskerville';
}

.button,
button {
    font-weight: bolder;
}

custom-cards {
    display: flex;
    margin: auto;
    gap: 10px;
    max-width: max-content;
    max-width: 910px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 20px;
}

custom-card,
.card {
    background-color: white;
    padding: 10px;
    padding-bottom: 20px;
    width: 200px;

}

.article-preview {
    background-color: white;
    padding: 10px;
    padding-bottom: 20px;
    width: 100%;
    display: flex;
    flex-flow: column;
    text-decoration: none;
    color: black;
}

.article-preview>* {
    margin-top: 0;
    margin-bottom: 0;
}

.article-preview>.date {
    font-family: 'Libre Baskerville';
}

@media not (prefers-reduced-motion) {
    img.heroimg {
        background-image: url("images/Gilman_Hall_in_the_snow\,_Johns_Hopkins_University.jpg");
        width: calc(100% + 18px);
        margin: -10px;
        height: 400px;
        object-fit: cover;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-position-y: -190px;
    }
}

@keyframes slideInDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes hide {
    from {
        opacity: 0;

    }

    to {
        opacity: 0;
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
        transform: translateX(0%);
        z-index: 11;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;

    }

    90% {
        opacity: 1;
        transform: translateX(0%);
        z-index: 11;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;

    }

    to {
        opacity: 1;
        transform: translateX(100%);
        z-index: 0;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;

    }
}

.loading {
    display: none;
}

@media not (prefers-reduced-motion) {
    html {
        scroll-behavior: smooth;
    }

    .slideInDown {
        animation: var(--animation-length) slideInDown ease-out;
    }

    .slideInDown1 {
        animation: var(--animation-length) slideInDown calc(var(--animation-start) + var(--animation-gap) * 1) ease-out, calc(var(--animation-start) + var(--animation-gap) * 1) hide;
    }

    .slideInDown2 {
        animation: var(--animation-length) slideInDown calc(var(--animation-start) + var(--animation-gap) * 2) ease-out, calc(var(--animation-start) + var(--animation-gap) * 2) hide;
    }

    .slideInDown3 {
        animation: var(--animation-length) slideInDown calc(var(--animation-start) + var(--animation-gap) * 3) ease-out, calc(var(--animation-start) + var(--animation-gap) * 3) hide;
    }

    .slideInLeft1 {
        animation: var(--animation-length) slideInLeft calc(var(--animation-start) + var(--animation-gap) * 1) ease-out, calc(var(--animation-start) + var(--animation-gap) * 1) hide;
    }

    .slideInLeft2 {
        animation: var(--animation-length) slideInLeft calc(var(--animation-start) + var(--animation-gap) * 2) ease-out, calc(var(--animation-start) + var(--animation-gap) * 2) hide;
    }

    .slideInRight2 {
        animation: var(--animation-length) slideInRight calc(var(--animation-start) + var(--animation-gap) * 2) ease-out, calc(var(--animation-start) + var(--animation-gap) * 2) hide;
    }

    .slideInLeft3 {
        animation: var(--animation-length) slideInLeft calc(var(--animation-start) + var(--animation-gap) * 3) ease-out, calc(var(--animation-start) + var(--animation-gap) * 3) hide;
    }

    .slideInDown4 {
        animation: var(--animation-length) slideInDown calc(var(--animation-start) + var(--animation-gap) * 4) ease-out, calc(var(--animation-start) + var(--animation-gap) * 4) hide;
    }

    .slideInLeft4 {
        animation: var(--animation-length) slideInLeft calc(var(--animation-start) + var(--animation-gap) * 4) ease-out, calc(var(--animation-start) + var(--animation-gap) * 4) hide;
    }

    .slideInRight3 {
        animation: var(--animation-length) slideInRight calc(var(--animation-start) + var(--animation-gap) * 3) ease-out, calc(var(--animation-start) + var(--animation-gap) * 3) hide;
    }

    .slideInRight4 {
        animation: var(--animation-length) slideInRight calc(var(--animation-start) + var(--animation-gap) * 4) ease-out, calc(var(--animation-start) + var(--animation-gap) * 4) hide;
    }

    .slideInDown5 {
        animation: var(--animation-length) slideInDown calc(var(--animation-start) + var(--animation-gap) * 5) ease-out, calc(var(--animation-start) + var(--animation-gap) * 5) hide;
    }

    .slideInLeft5 {
        animation: var(--animation-length) slideInLeft calc(var(--animation-start) + var(--animation-gap) * 5) ease-out, calc(var(--animation-start) + var(--animation-gap) * 5) hide;
    }

    .slideInRight5 {
        animation: var(--animation-length) slideInRight calc(var(--animation-start) + var(--animation-gap) * 5) ease-out, calc(var(--animation-start) + var(--animation-gap) * 5) hide;
    }

    .slideInLeft6 {
        animation: var(--animation-length) slideInLeft calc(var(--animation-start) + var(--animation-gap) * 6) ease-out, calc(var(--animation-start) + var(--animation-gap) * 6) hide;
    }

    .slideInDown6 {
        animation: var(--animation-length) slideInDown calc(var(--animation-start) + var(--animation-gap) * 6) ease-out, calc(var(--animation-start) + var(--animation-gap) * 6) hide;
    }

    .slideInDown7 {
        animation: var(--animation-length) slideInDown calc(var(--animation-start) + var(--animation-gap) * 7) ease-out, calc(var(--animation-start) + var(--animation-gap) * 7) hide;
    }

    .slideInLeft7 {
        animation: var(--animation-length) slideInLeft calc(var(--animation-start) + var(--animation-gap) * 7) ease-out, calc(var(--animation-start) + var(--animation-gap) * 7) hide;
    }

    .slideInLeft8 {
        animation: var(--animation-length) slideInLeft calc(var(--animation-start) + var(--animation-gap) * 8) ease-out, calc(var(--animation-start) + var(--animation-gap) * 8) hide;
    }

    .slideInDown8 {
        animation: var(--animation-length) slideInDown calc(var(--animation-start) + var(--animation-gap) * 8) ease-out, calc(var(--animation-start) + var(--animation-gap) * 8) hide;
    }

    .slideInRight8 {
        animation: var(--animation-length) slideInRight calc(var(--animation-start) + var(--animation-gap) * 8) ease-out, calc(var(--animation-start) + var(--animation-gap) * 8) hide;
    }

    .slideInDown9 {
        animation: var(--animation-length) slideInDown calc(var(--animation-start) + var(--animation-gap) * 9) ease-out, calc(var(--animation-start) + var(--animation-gap) * 9) hide;
    }

    .slideInDown10 {
        animation: var(--animation-length) slideInDown calc(var(--animation-start) + var(--animation-gap) * 10) ease-out, calc(var(--animation-start) + var(--animation-gap) * 10) hide;
    }

    .headerbtn:hover+.headerdropdown {
        animation: calc(var(--animation-length)/4) animate-pop calc(var(--animation-start) + var(--animation-gap) * 0) ease-out, calc(var(--animation-start) + var(--animation-gap) * 0) hide;

    }

    .headerdropdown:hover,
    .headerdropdown:target {
        animation: var(--animation-length) animate-pop calc(var(--animation-start) + var(--animation-gap) * 0) ease-out, calc(var(--animation-start) + var(--animation-gap) * 0) hide;

    }

    header>.headerdropdown-container>.headerdropdown>a {
        transition: all 0.1s linear;
    }

    body:not(:has(:target)):has(div.loading) {
        .loading {
            opacity: 0;
            z-index: -1;
            display: flex;
            animation: 2s fade-out ease-in-out;
            position: fixed;

            z-index: 10;
            background-color: #eee;

            align-items: center;
            justify-content: center;
            flex-flow: column;
        }

        .loading>div {

            content: "";
            width: fit-content;
            font-size: 80px;
            font-family: system-ui, sans-serif;
            font-weight: bold;
            text-transform: uppercase;
            color: #0000;
            -webkit-text-stroke: 1px #000;
            background:
                conic-gradient(from -135deg at 100% 50%, var(--primary-color) 90deg, #0000 0) text no-repeat,
                conic-gradient(from -135deg at 1lh 50%, #0000 90deg, var(--secondary-color) 0) text no-repeat;
            animation: l6 2s ease-in-out infinite;
        }

        .loading>div.title:before {
            content: "Seán";
            animation: my-name var(--animation-start);
            font-size: 0px;
        }

        .loading>div.subtitle:after {

            animation: my-subtitle var(--animation-start);
            font-size: 0px;
            content: "SGA Senator";
            display: block;

        }
    }

    @keyframes my-name {
        from {
            font-size: 80px;

        }

        to {
            font-size: 80px;
        }
    }

    @keyframes my-subtitle {
        from {
            font-size: 40px;

        }

        to {
            font-size: 40px;
        }
    }

    /*https://css-loaders.com/filling/*/
    @keyframes l6 {
        0% {
            background-size: 0 200%;
            background-position: 0 0, 100% 0
        }

        50% {
            background-size: calc(60% + .5lh) 200%;
            background-position: 0 0, 100% 0
        }

        50.01% {
            background-size: calc(60% + .5lh) 200%;
            background-position: 0 100%, 100% 100%
        }

        100% {
            background-size: 0 200%;
            background-position: 0 100%, 100% 100%
        }
    }
}

img.icon {
    height: 50px;
    /* https://angel-rs.github.io/css-color-filter-generator/ */
}

*:nth-child(3n+1)>img.icon,
a:nth-child(3n+1)>*>img.icon {
    filter: brightness(0) saturate(100%) invert(27%) sepia(99%) saturate(6733%) hue-rotate(341deg) brightness(88%) contrast(95%);
}

*:nth-child(3n+2)>img.icon,
a:nth-child(3n+2)>*>img.icon {
    filter: brightness(0) saturate(100%) invert(35%) sepia(29%) saturate(3551%) hue-rotate(354deg) brightness(97%) contrast(95%);
}

*:nth-child(3n+3)>img.icon,
a:nth-child(3n+3)>*>img.icon {
    filter: brightness(0) saturate(100%) invert(86%) sepia(24%) saturate(6132%) hue-rotate(4deg) brightness(97%) contrast(85%);
}


@keyframes appear1 {

    from {
        opacity: 0.5;
        scale: 0.8;
    }

    32% {
        opacity: 1;
        scale: 1;
    }
}

@media not (prefers-reduced-motion) {
    .animate {
        animation: appear1 ease-in;
        animation-timeline: view();
    }

    custom-card,
    .card {
        animation: appear1 ease-in;
        animation-timeline: view();

    }
}

@media not (prefers-reduced-motion) {
    * {
        transition: background-color 0.1s linear;
    }
}

:root {
    --gradprog: 100%
}

.side-img {
    max-width: 200px;
    border-radius: 10px;
    height: 100%;
    object-fit: cover;
}

div.twocol {
    max-width: 700px;
    margin: auto;
    display: flex;
    gap: 20px;
}

@media screen and (max-width: 612px) {
    div.twocol {
        flex-flow: column;
        gap: 10px;
        justify-content: center;
    }

    div.twocol>img {
        align-self: center;
    }

}


@keyframes animate-pop {
    0% {
        opacity: 0;
        transform: scale(0.5, 0.5);
    }

    100% {
        opacity: 1;
        transform: scale(1, 1);
    }
}

.headerdropdown-container {
    position: relative;
    display: inline-block;
}

.headerdropdown {
    position: absolute;
    /* float: right; */
    flex-flow: column;
    display: none;
    opacity: 0;
    transition: all 0.5s linear;
    background-color: white;
    padding: 10px;
    margin-left: -10px;
    gap: 10px;
    width: 200px;
    --animation-start: 0s;

}

.headerbtn:hover+.headerdropdown {
    display: flex;
    opacity: 1;
    z-index: 3;
}

.headerdropdown:hover,
.headerdropdown:target {
    display: flex;
    opacity: 1;

}

.headerdropdown:target {
    z-index: 2;
}

.headerdropdown:hover {
    z-index: 3;
}

body:has(.headerdropdown:target, .headerdropdown:hover)>.menu-exit {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: black;
    opacity: 50%;
    z-index: 1;
}

body:not(:has(.headerdropdown:target))>.menu-exit {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    opacity: 50%;
    z-index: -1;
    transition: none;
}

.icon.menu {
    width: 15px;
    height: 15px;
    filter: brightness(0%) !important;
}

@media (prefers-color-scheme: dark) {
    .icon.menu {
        width: 15px;
        height: 15px;
        filter: invert(100%) !important;
    }

    .article-preview {
        background-color: black;
        color: white;
    }

    body {
        color: white;
        background-color: #121212;
        background-image: radial-gradient(hsl(347, 46%, 22%) 1px, transparent 1px), radial-gradient(hsl(347, 46%, 22%) 1px, transparent 1px);

    }

    .headerdropdown {
        background-color: black !important;
    }

    .loading {
        background-color: #121212 !important;


    }

    .loading>div {
        -webkit-text-stroke: 1px #fff !important;
    }

    header {
        background-color: #121212;
        color: #eee;
    }

    header>* {
        color: #eee;
    }

    custom-card,
    .card {
        color: #eee;
        background-color: black;
    }

    footer {
        background-color: black;
    }

    img.heroimg {
        filter: brightness(90%);
        transition: filter 0.1s linear;
    }
}
















@media (prefers-reduced-motion) {
    * {
        transition: none !important;
        animation: none !important;
    }
}