body {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center center;
}

#header-row {
    text-align: center;
    margin-top: 10%;
    justify-content: center;
    align-items: baseline;
    margin-bottom: 40px;
}

h1#sexy-name {
    display: inline-block;
    margin-bottom: 0px;
}

#sexy-name a {
    text-decoration: none;
    color: black;
}

#github-star-container {
    margin-left: 5px;
    display: inline-block;
}

a.logo {
    text-decoration: none;
}

.container {
    min-height: 100% !important;
    position: relative !important;
    opacity: 0.9;
    padding: 0 20px 20px 20px;
}

#footer {
    position: fixed;
    bottom: 5px;
    height: 20px;
    width: 100%;
    font-size: small;
    color: grey;
}

#footer a {
    color: grey;
}

#footer .left {
    position: absolute;
    left: 10px;
}

#footer .right {
    position: absolute;
    right: 10px;
    text-align: right;
}

.crumbs { display: block; }

.crumbs li { display: inline; }

.crumbs li.first { padding-left: 8px; }

.crumbs li a,
.crumbs li a:link,
.crumbs li a:visited {
    color: #666666;
    display: block;
    float: left;
    font-size: 12px;
    margin-left: -13px;
    padding: 7px 17px 11px 25px;
    position: relative;
    text-decoration: none;
}

.crumbs li a {
    background-repeat: no-repeat;
    background-position: 100% 0;
    position: relative;
}

.crumbs li a:hover {
    color: #333333;
    background-position: 100% -48px;
    cursor: pointer;
}

.crumbs li a:active {
    color: #333333;
    background-position: 100% -96px;
}

.crumbs li.first a span {
    height: 29px;
    width: 3px;
    border-left: 1px solid #d9d9d9;
    position: absolute;
    top: 0;
    left: 0;
}

#searchbox {
    width: 96%;
    margin-bottom: 0px;
}

div.padding {
    height:300px;
}
#moneyField { position: relative; }
#moneyField > i {
    position: absolute;
    display: block;
    transform: translate(0, -50%);
    top: 50%;
    pointer-events: none;
    width: 25px;
    text-align: center;
    font-style: normal;
    right: 0;
}
#moneyField input {
    height: 26px;
    border: 1px solid #D1D1D1;
    border-radius: 4px;
    box-shadow: none;
    background: #fff;
    padding: 6px 15px 6px 0;
    text-align: right;
}

.section-header {
    margin: 0 1rem;
}

#searchbox {
    box-sizing: border-box;
    height: 48px;
    width: 100%;
}
#searchbox-wrapper {
    margin: 0 1rem;
    display: block;
}
.semester>li {
    list-style-type: none;
    border-bottom: 1px solid #dedede;
    margin: 0;
    padding: 1rem 1rem 1rem 1rem;
    position: relative;
}
.semester>li:last-child {
    border-bottom: none;
    margin-bottom: 3rem;
}
.semester>li:hover {
    background-color: #f6f6f6;
}
.semester>h4 {
    padding: 0 1rem;
}

h1 > sup, h2 > sup, h3 > sup, h4 > sup, h5 > sup {
    text-transform: none;
}

h3 {
    font-weight: 300;
    font-size: 2.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #222;
    text-transform: uppercase;
    letter-spacing: 5px;
}

h4 {
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 700;
}

.subsection {
    padding: 0 1rem;
}

@media (min-width: 550px) {
    .section-header {
        margin: 0 1%;
        padding: 0 1rem;
    }
    .subsection {
        padding: 0 2%;
    }
    #searchbox-wrapper {
        margin: 0 1rem;
        padding: 0 2%;
    }
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #0b0c10;
        color: #e5e6e7;
    }
    #searchbox {
        color: #e5e6e7;
        background-color: #1f2833;
        border-color: #45a29e;
    }
    #searchbox:focus {
        border-color: #66fcf1;
    }
    h3 {
        border-bottom-color: #888;
    }
    .semester>li {
        border-color: #45a29e;
    }
    .semester>li:hover {
        background-color: #1f2833;
    }
    mark {
        background-color: #66fcf1;
    }
    #sexy-name {
        color: #fff;
    }
    a, a:link, a:visited {
        color: #66fcf1;
    }
    a:hover, a:active, a:focus {
        color: #ccfffc;
    }
    img {
        filter: grayscale(30%);
    }
    [data-balloon]::after {
            background-color: rgba(31, 40, 51, 0.8);
            border: 1px solid #66fcf1;
            border-bottom: 0px;
            border-radius: 0px;
            font-weight: 500;
            color: #e5e6e7;
    }
    [data-balloon-pos="up"]::before {
        background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(31%2C%2040%2C%2051%2C%200.8)%22%20stroke%3D%22%2366fc141%22%20stroke-width%3D%221%22%20transform%3D%22rotate(0)%22%20d%3D%22M2.658%2C0.000%20C-13.615%2C0.000%2050.938%2C0.000%2034.662%2C0.000%20C28.662%2C0.000%2023.035%2C12.002%2018.660%2C12.002%20C14.285%2C12.002%208.594%2C0.000%202.658%2C0.000%20Z%22%2F%3E%3C%2Fsvg%3E");
        background-size:100% auto;
        color: #e5e6e7;
    }
}
.pin {
    opacity: 0;
    cursor: pointer;
    height: 1.2em;
}
.pincontainer {
    display: flex;
    gap: 1em;
    flex-direction: row;
    flex-wrap: wrap;
}
li:hover .pin, li.hover .pin {
    opacity: 1;
}
.card {
    border: solid 1px black;
    padding: 1em;
    flex-basis: 200px;
    flex-grow: 1;
    overflow: hidden;
    text-align: center;
}
.unpin {
    height: 1.2em;
    float: right;
    opacity: 0;
}
.card:hover .unpin, .card.hover .unpin {
    opacity: 1;
}
.cardheader{
    font-size: 2rem;
}
.placeholder {
    width: 200px;
    height: 0;
    margin-left: 1em;
    margin-right: 1em;
    flex-basis: 200px;
    flex-grow: 1;
}

@media (prefers-color-scheme: dark) {
    .pin, .unpin {
        filter: invert(1) !important;
    }
    .card {
        border-color: #e5e6e7;
    }
}

#othersSection{
    display: none;
}