@import url(imports/general.css);

main {
    min-height: 90vh;
}

main h1 {
    text-shadow:
    1pt 1pt 0 white,
    -1pt 1pt 0 white,
    -1pt -1pt 0 white,
    1pt -1pt 0 white;
}

.page-title {
    width: 100vw;
    display: flex;
    flex-direction: column;
}

.card-container {
    padding: 5vw;
    display: flex;
    flex-wrap: wrap;
}

a.card-link {
    height: fit-content;
    width: fit-content;
    color: inherit;
    text-decoration: none;
}

.card {
    height: max(284px,calc(10vw * (1 + 2.236067977499789696409173668731276235440618359611525724270897245410520925637804899414414408378782274969508176150773783504253267724447073863586360121533452708866778173191879165811276645322639856580535761350417533785003423392414064442086432539097252592627228876299517402440681611775908909498492371390729728898482088641542689894099131693577019748678884425089754132956183176921499977424801530434115035957668332512498815178139408000562420855243542235556106306342820234093331982933959746352271201341749614202635904737885504389687061135660045757139956595566956917564578221952500060539231234005009286764875529722056766253666074485853505262330678494633422242317637277026632407680104443315825733505893098136226343198686471946989970180818952426445962034522141192232912598196325811104170495807048120403455994943506855551855572512388641655010262436312571024449618789424682903404474716115455723201737676590460918529575603577984398054155380779064393639723028756062999482213852177348592453515121046345555040707227872) / 2));
    width: max(176px,10vw);
    margin: 10pt;
    border: 4pt solid var(--block-outline-color);
    box-sizing: content-box;
    box-shadow: 2pt 2pt 5pt rgba(0, 0, 0, 0.9);
    background-color: var(--base-color);
}

.card-image-container {
    height: max(calc(284px /7 *5),calc(10vw * (1 + 2.236067977499789696409173668731276235440618359611525724270897245410520925637804899414414408378782274969508176150773783504253267724447073863586360121533452708866778173191879165811276645322639856580535761350417533785003423392414064442086432539097252592627228876299517402440681611775908909498492371390729728898482088641542689894099131693577019748678884425089754132956183176921499977424801530434115035957668332512498815178139408000562420855243542235556106306342820234093331982933959746352271201341749614202635904737885504389687061135660045757139956595566956917564578221952500060539231234005009286764875529722056766253666074485853505262330678494633422242317637277026632407680104443315825733505893098136226343198686471946989970180818952426445962034522141192232912598196325811104170495807048120403455994943506855551855572512388641655010262436312571024449618789424682903404474716115455723201737676590460918529575603577984398054155380779064393639723028756062999482213852177348592453515121046345555040707227872) / 2 /7 *5));
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.card-image-container img {
    height: 100%;
}

.card-bottom-bar {
    height: max(calc(284px /7 *2),calc(10vw * (1 + 2.236067977499789696409173668731276235440618359611525724270897245410520925637804899414414408378782274969508176150773783504253267724447073863586360121533452708866778173191879165811276645322639856580535761350417533785003423392414064442086432539097252592627228876299517402440681611775908909498492371390729728898482088641542689894099131693577019748678884425089754132956183176921499977424801530434115035957668332512498815178139408000562420855243542235556106306342820234093331982933959746352271201341749614202635904737885504389687061135660045757139956595566956917564578221952500060539231234005009286764875529722056766253666074485853505262330678494633422242317637277026632407680104443315825733505893098136226343198686471946989970180818952426445962034522141192232912598196325811104170495807048120403455994943506855551855572512388641655010262436312571024449618789424682903404474716115455723201737676590460918529575603577984398054155380779064393639723028756062999482213852177348592453515121046345555040707227872) / 2 /7 *2));
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top: 4pt solid var(--block-outline-color);
    justify-content: center;
    overflow: hidden;
}

.card-bottom-bar p {
    margin: 0;
    text-align: center;
}

.card-bottom-bar p:first-child {
    font-size: 150%;
    font-weight: bold;
}
.card-bottom-bar p:nth-child(2) {
    font-size: 70%;
    color: grey;
}
.card-bottom-bar p:nth-child(2)::before {
    content: "By ";
}