/* Entry point for your PostCSS build */ body { font-family: "Fira Sans", sans-serif; font-weight: 400; font-size: 16px; } h4 { font-size: 20px; font-weight: 600; } .body-container { max-width: 1024px; margin: 1rem auto; } .container { background-color: #e6f8ff; padding: 6rem 4rem; } header { display: flex; gap: 1rem; align-items: center; } .section-link { word-break: keep-all; white-space: nowrap; color: black; text-transform: uppercase; font-weight: 500; padding: 1rem 0.5rem; line-height: 2.125rem; text-underline-offset: 0.25rem; text-decoration-line: none; text-decoration-thickness: 0.125rem; } .section-link-active { text-decoration-line: underline; } .deadline-info-container { padding: 2rem 0; display: flex; flex-direction: column; gap: 2rem; } .extension-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; } .extension { align-self: stretch; color: black; background-color: white; padding: 1rem; display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .title-card-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3rem; } .title-card-container { text-decoration: none; align-self: stretch; color: black; background-color: white; padding: 1rem; } .questions-container { display: flex; flex-direction: column; gap: 3rem; } .question-card { color: black; background-color: white; padding: 1rem; } .question-kind-video { text-align: center; video { max-width: 100%; max-height: 50vh; } } .question-kind-simple:has(+ .answer-kind-connections) { text-align: center; margin-bottom: 0.5rem; font-weight: 600; } .answer-kind-simple { margin-top: 1rem; text-align: end; } .simple-answer-wide { width: 30rem; max-width: 100%; } .answer-kind-image { .answer-kind-image-container { text-align: center; img { max-width: 100%; max-height: 50vh; } } } .login-intro { background-color: white; padding: 1rem; form { display: flex; gap: 1rem; align-items: stretch; label { align-self: center; } } } input[type=submit] { background-color: #1abcff; border: none; padding: 0.5rem; font-size: 16px; } .politicians-listing { display: grid; grid-template-columns: 8vh 1fr; gap: 1rem; } .politician-image { max-width: 100%; align-self: center; } .politician-answer { align-self: stretch; display: flex; align-items: center; border: 1px solid black; padding: 0.5rem; cursor: grab; } .politician-answer-dragging { cursor: grabbing; } .acrostic-puzzle { overflow-x: auto; } .acrostic-row { display: flex; flex-direction: row; } .acrostic-offset,.acrostic-number { display: inline-block; width: 2rem; min-width: 2rem; height: 2rem; min-height: 2rem; border: 2px solid transparent; } .acrostic-input { padding: 0; width: 2rem; height: 2rem; text-transform: uppercase; text-align: center; } .acrostic-column { background-color: lightgrey; } .connections-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; } .connections-element { border: 1px solid black; margin: 0.5em; padding: 1em; text-align: center; word-break: keep-all; white-space: nowrap; cursor: grab; } .connections-element-dragging { cursor: grabbing; } @media (max-width: 1024px) { .body-container { max-width: 768px; } .title-card-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .body-container { max-width: 512px; } .title-card-grid { grid-template-columns: 1fr; } }