@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
* { font-family: 'Poppins', sans-serif; }

#skip-to-content { display: none; }
#skip-to-content:focus { display: block; position: absolute; top: 0; left: 0; padding: 1rem; background-color: #fff; border: 1px solid #000; z-index: 100; }

h1 { font-size: 2.5rem; font-weight: 300; margin-bottom: .5rem; }

h2, h3, h4 { margin-bottom: .5rem; }

.page-header { padding: 1rem; }

.page-header h1 { border-bottom: 1px solid #000; padding-bottom: 0.5rem; }

.project-tagline { font-weight: 200; margin-left: 0.5rem; font-style: italic; }

.icon { max-width: 25rem; height: auto; margin: 0 auto; }

.icon-text-hidden { display: none; }

.header-items { max-width: 100%; border-bottom: 1px solid #000; }

a { color: #000; font-weight: 700; }

.btn { padding: 0 0.5rem; }

.sign-up { margin: 1rem auto 0; width: fit-content; border: 1px solid #000; }

.sign-up > .btn { display: block; padding: 1rem; text-align: center; }

ul { list-style: none; padding: 0.5rem 0; padding-left: 1rem; }

.links-row { display: flex; justify-content: start; margin-bottom: 1rem; }
.links-row > * + * { margin-left: 1rem; }

.main-content { padding: 1rem; padding-top: 0; margin-bottom: 2rem; }

.cards-row { display: flex; flex-wrap: nowrap; overflow-x: scroll; padding: 1rem; padding-bottom: 0; margin-left: -1rem; margin-right: -1rem; }
.cards-row > * + * { margin-left: 1rem; }

.card { border-radius: 0.5rem; margin-bottom: 1rem; border-radius: 0.5rem; box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5); max-height: 200px; }

.verticard { border-radius: 0.5rem; margin-bottom: 1rem; border-radius: 0.5rem; box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5); max-height: 200px; display: flex; flex-direction: row; width: fit-content; }

.card-text { width: 200px; padding: 1rem; padding-bottom: 0; overflow-y: scroll; }

.card-content { border-left: 1px solid #000; padding: 0 0.5rem; background-color: rgba(0, 0, 0, 0.05); }

.card-author { font-size: 0.8rem; font-weight: 200; font-style: italic; }

.card-image { max-width: 200px; width: 200px; border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5em; aspect-ratio: 1/1; }

.links-row > a { text-transform: uppercase; }

@media (max-width: 600px) { .btn { padding: 0; }
  .card-image { border-top-left-radius: 0.5rem; border-bottom-right-radius: 0rem; width: none; }
  .card-text { height: 175px; }
  .verticard { flex-direction: column-reverse; max-width: 100%; max-height: none; } }