/*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; -webkit-box-sizing: border-box; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-webkit-input-placeholder { color: unset; } ::-moz-placeholder { color: unset; } :-ms-input-placeholder { color: unset; } ::-ms-input-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; -webkit-box-sizing: border-box; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } html { --background-color: #ffffff; --font-color: #000000; background-color: var(--background-color); color: var(--font-color); font-family: "Noto Sans JP", sans-serif; font-size: 2.6666666667vw; } @media screen and (min-width: 768px) { html { font-size: 1.3020833333vw; } } @media screen and (min-width: 1024px) { html { font-size: 0.5208333333vw; } } html.dark { --background-color: #000000; --font-color: #ffffff; } img { width: 100%; -o-object-fit: cover; object-fit: cover; } a { display: block; } .header { padding: 1rem 2rem; background-color: #1bb4d4; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; } @media screen and (min-width: 768px) { .header { padding: 1.4rem 3rem; } } @media screen and (min-width: 1024px) { .header { padding: 1.6rem 3.2rem; } } .header.dark { background-color: var(--background-color); } .header.dark::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: var(--font-color); } .header__home-link { padding: 10px 0; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } @media (any-hover: hover) { .header__home-link:hover { opacity: 0.7; } } .header__logo { width: 15rem; } @media screen and (min-width: 768px) { .header__logo { width: 17rem; } } @media screen and (min-width: 1024px) { .header__logo { width: clamp(170px, 20rem, 200px); } } .header__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; gap: 1.6rem; } @media screen and (min-width: 768px) { .header__list { gap: 2.4rem; } } @media screen and (min-width: 1024px) { .header__list { gap: 3.2rem; } } .header__link { padding: 10px 0; color: #ffffff; font-weight: 700; font-size: clamp(11px, 1.1rem, 12px); position: relative; } .header__link::before { content: ""; position: absolute; bottom: 5px; left: 0; width: 100%; height: 1px; background-color: #ffffff; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: center; transform-origin: center; -webkit-transition: -webkit-transform 0.3s ease-out; transition: -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out; transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; } @media (any-hover: hover) { .header__link:hover::before { -webkit-transform: scaleX(1); transform: scaleX(1); } } @media screen and (min-width: 768px) { .header__link { font-size: clamp(12px, 1.2rem, 14px); } } @media screen and (min-width: 1024px) { .header__link { font-size: clamp(14px, 1.6rem, 16px); } } .footer { padding: 3.2rem 0 1.6rem; background-color: #1bb4d4; position: relative; } @media screen and (min-width: 768px) { .footer { padding: 4.8rem 0 2.4rem; } } @media screen and (min-width: 1024px) { .footer { padding: 5.6rem 0 3.2rem; } } .footer.dark { background-color: var(--background-color); } .footer.dark::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background-color: var(--font-color); } .footer__inner { padding: 0 2rem; } @media screen and (min-width: 768px) { .footer__inner { padding: 0 3rem; } } @media screen and (min-width: 1024px) { .footer__inner { padding: 0; margin-inline: auto; width: 90%; max-width: 1100px; } } .footer__box-wrapper { margin-bottom: 2.4rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 2.4rem; } @media screen and (min-width: 768px) { .footer__box-wrapper { margin-bottom: 3.2rem; gap: 3.2rem; } } @media screen and (min-width: 1024px) { .footer__box-wrapper { margin-bottom: 4rem; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 0; } } .footer__left-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0.4rem; } @media screen and (min-width: 768px) { .footer__left-box { gap: 1rem; } } @media screen and (min-width: 1024px) { .footer__left-box { gap: 1.6rem; } } .footer__home-link { padding: 10px 0; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } @media (any-hover: hover) { .footer__home-link:hover { opacity: 0.7; } } .footer__logo { width: 20rem; } @media screen and (min-width: 768px) { .footer__logo { width: 24rem; } } @media screen and (min-width: 1024px) { .footer__logo { width: clamp(240px, 28rem, 280px); } } .footer__text { color: #ffffff; font-weight: 700; font-size: clamp(11px, 1.1rem, 12px); } @media screen and (min-width: 768px) { .footer__text { font-size: clamp(12px, 1.2rem, 13px); } } @media screen and (min-width: 1024px) { .footer__text { font-size: 14px; } } .footer__list { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 2.4rem; } @media screen and (min-width: 768px) { .footer__list { gap: 3.2rem; } } @media screen and (min-width: 1024px) { .footer__list { gap: 4rem; } } .footer__link { padding: 10px 0; color: #ffffff; font-weight: 700; font-size: clamp(12px, 1.2rem, 14px); position: relative; } .footer__link::before { content: ""; position: absolute; bottom: 5px; left: 0; width: 100%; height: 1px; background-color: #ffffff; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: center; transform-origin: center; -webkit-transition: -webkit-transform 0.3s ease-out; transition: -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out; transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; } @media (any-hover: hover) { .footer__link:hover::before { -webkit-transform: scaleX(1); transform: scaleX(1); } } @media screen and (min-width: 768px) { .footer__link { font-size: clamp(14px, 1.4rem, 15px); } } @media screen and (min-width: 1024px) { .footer__link { font-size: clamp(15px, 1.6rem, 16px); } } .footer__copyright { display: block; color: #ffffff; font-size: 10px; text-align: center; } @media screen and (min-width: 768px) { .footer__copyright { font-size: 11px; } } @media screen and (min-width: 1024px) { .footer__copyright { font-size: 12px; text-align: right; } } .container { padding: 0 2rem; } @media screen and (min-width: 768px) { .container { padding: 0 3rem; } } @media screen and (min-width: 1024px) { .container { padding: 0; margin-inline: auto; width: 90%; max-width: 1100px; } } .top { margin-bottom: 2.4rem; margin-top: 2.4rem; position: relative; } @media screen and (min-width: 768px) { .top { margin-bottom: 3.2rem; } } @media screen and (min-width: 1024px) { .top { margin-bottom: 4rem; } } @media screen and (min-width: 768px) { .top { margin-top: 3.2rem; } } @media screen and (min-width: 1024px) { .top { margin-top: 4rem; } } .top__title { text-align: center; font-weight: 700; font-size: clamp(22px, 2.2rem, 26px); } @media screen and (min-width: 768px) { .top__title { font-size: clamp(26px, 2.6rem, 30px); } } @media screen and (min-width: 1024px) { .top__title { font-size: clamp(30px, 3.4rem, 34px); } } .top__dark-mode-button { padding: unset; margin: unset; font: unset; -webkit-appearance: unset; -moz-appearance: unset; appearance: unset; background-color: unset; border: unset; cursor: pointer; position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: block; width: 64px; height: 34px; border-radius: 100vmax; background-color: #ffb000; border: 2px solid #ffb000; } .top__dark-mode-button::before { content: ""; position: absolute; left: 0; top: 50%; -webkit-transform: translate(2px, -50%); transform: translate(2px, -50%); height: 24px; aspect-ratio: 1/1; border-radius: 100vmax; background-color: #ffffff; background-image: url(../images/light.svg); background-size: 70%; background-position: center; background-repeat: no-repeat; -webkit-transition: background-image 0.3s ease-out, -webkit-transform 0.3s ease-out; transition: background-image 0.3s ease-out, -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out, background-image 0.3s ease-out; transition: transform 0.3s ease-out, background-image 0.3s ease-out, -webkit-transform 0.3s ease-out; } .top__dark-mode-button:checked { background-color: var(--background-color); border: 2px solid var(--font-color); } .top__dark-mode-button:checked::before { -webkit-transform: translate(32px, -50%); transform: translate(32px, -50%); background-image: url(../images/dark.svg); } @media screen and (min-width: 768px) { .top__dark-mode-button { width: 80px; height: 44px; } .top__dark-mode-button::before { height: 34px; } .top__dark-mode-button:checked::before { -webkit-transform: translate(37px, -50%); transform: translate(37px, -50%); } } .prefectures { margin-bottom: 2.4rem; display: grid; place-content: center; } @media screen and (min-width: 768px) { .prefectures { margin-bottom: 3.2rem; } } @media screen and (min-width: 1024px) { .prefectures { margin-bottom: 4rem; } } .prefectures__title { margin-bottom: 0.8rem; font-weight: 700; font-size: clamp(14px, 1.4rem, 16px); text-align: center; } @media screen and (min-width: 768px) { .prefectures__title { margin-bottom: 1.6rem; font-size: clamp(16px, 1.6rem, 20px); } } @media screen and (min-width: 1024px) { .prefectures__title { margin-bottom: 2rem; font-size: clamp(18px, 2rem, 20px); } } .prefectures__select-wrapper { position: relative; } .prefectures__select-wrapper::after { content: ""; pointer-events: none; position: absolute; top: 50%; right: 0.8rem; width: 0.6rem; aspect-ratio: 1; border-left: 2px solid var(--font-color); border-bottom: 2px solid var(--font-color); -webkit-transform: translateY(-50%) rotate(-45deg); transform: translateY(-50%) rotate(-45deg); -webkit-transform-origin: center; transform-origin: center; } @media screen and (min-width: 768px) { .prefectures__select-wrapper::after { right: 1.2rem; width: 1rem; } } @media screen and (min-width: 1024px) { .prefectures__select-wrapper::after { right: 1.6rem; width: 1.4rem; } } .prefectures__select { cursor: pointer; border: 1px solid var(--font-color); padding: 0.8rem 4rem 0.8rem 0.8rem; font-size: clamp(14px, 1.4rem, 16px); } @media screen and (min-width: 768px) { .prefectures__select { padding: 1rem 4.4rem 1rem 1rem; font-size: clamp(16px, 1.6rem, 20px); } } @media screen and (min-width: 1024px) { .prefectures__select { padding: 1.2rem 4.8rem 1.2rem 1.2rem; font-size: clamp(18px, 2rem, 20px); } } .prefectures__option { background-color: var(--background-color); color: var(--font-color); } .prefectures__option[selected][disabled] { display: none; } .recent { margin-bottom: 2.4rem; } @media screen and (min-width: 768px) { .recent { margin-bottom: 3.2rem; } } @media screen and (min-width: 1024px) { .recent { margin-bottom: 4rem; } } .recent__title { margin-bottom: 0.8rem; font-weight: 700; font-size: clamp(14px, 1.4rem, 16px); } @media screen and (min-width: 768px) { .recent__title { margin-bottom: 1.6rem; font-size: clamp(16px, 1.6rem, 20px); } } @media screen and (min-width: 1024px) { .recent__title { margin-bottom: 2rem; font-size: clamp(18px, 2rem, 20px); } } .recent__table { display: grid; grid-template-columns: [heading] -webkit-max-content repeat(2, 1fr); grid-template-columns: [heading] max-content repeat(2, 1fr); grid-template-rows: [date] 1fr [weather] 2fr [wave] 1fr [pops] 1fr [temps-max] 1fr [temps-min] 1fr; } .recent__group { display: contents; } .recent__heading { grid-column: heading; padding: 0.6rem; border-top: 1px solid var(--font-color); border-left: 1px solid var(--font-color); font-weight: 700; font-size: clamp(12px, 1.2rem, 13px); } @media screen and (min-width: 768px) { .recent__heading { padding: 0.8rem; font-size: clamp(13px, 1.3rem, 14px); } } @media screen and (min-width: 1024px) { .recent__heading { padding: 10px; font-size: 13px; } } .recent__heading:last-of-type { border-bottom: 1px solid var(--font-color); } .recent__note { font-weight: 400; font-size: 10px; } @media screen and (min-width: 768px) { .recent__note { font-size: 11px; } } @media screen and (min-width: 1024px) { .recent__note { font-size: 12px; } } @media screen and (min-width: 1024px) { .recent__br { display: none; } } .recent__high { color: #ff2d11; } .recent__low { color: #0095ff; } .recent__date, .recent__weather, .recent__wave, .recent__pops, .recent__temps-max, .recent__temps-min { padding: 0.6rem; display: grid; place-content: center; border-top: 1px solid var(--font-color); border-left: 1px solid var(--font-color); font-size: clamp(11px, 1.1rem, 12px); position: relative; } .recent__date.disabled::before, .recent__weather.disabled::before, .recent__wave.disabled::before, .recent__pops.disabled::before, .recent__temps-max.disabled::before, .recent__temps-min.disabled::before { content: ""; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, calc(-50% + 3px)); transform: translate(-50%, calc(-50% + 3px)); width: 50%; height: 2px; background-color: var(--font-color); } .recent__date.disabled::after, .recent__weather.disabled::after, .recent__wave.disabled::after, .recent__pops.disabled::after, .recent__temps-max.disabled::after, .recent__temps-min.disabled::after { content: ""; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, calc(-50% - 3px)); transform: translate(-50%, calc(-50% - 3px)); width: 50%; height: 2px; background-color: var(--font-color); } @media screen and (min-width: 768px) { .recent__date, .recent__weather, .recent__wave, .recent__pops, .recent__temps-max, .recent__temps-min { padding: 0.8rem; font-size: clamp(12px, 1.2rem, 13px); } } @media screen and (min-width: 1024px) { .recent__date, .recent__weather, .recent__wave, .recent__pops, .recent__temps-max, .recent__temps-min { padding: 10px; font-size: 13px; } } .recent__date:last-of-type, .recent__weather:last-of-type, .recent__wave:last-of-type, .recent__pops:last-of-type, .recent__temps-max:last-of-type, .recent__temps-min:last-of-type { border-right: 1px solid var(--font-color); } .recent__date:nth-of-type(1), .recent__weather:nth-of-type(1), .recent__wave:nth-of-type(1), .recent__pops:nth-of-type(1), .recent__temps-max:nth-of-type(1), .recent__temps-min:nth-of-type(1) { grid-column: 2/3; } .recent__date:nth-of-type(2), .recent__weather:nth-of-type(2), .recent__wave:nth-of-type(2), .recent__pops:nth-of-type(2), .recent__temps-max:nth-of-type(2), .recent__temps-min:nth-of-type(2) { grid-column: 3/4; } .recent__date { grid-row: date; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.5rem; } .recent__date-item.saturday { color: #0095ff; } .recent__date-item.sunday { color: #ff2d11; } .recent__weather { grid-row: weather; } .recent__weather-text { text-align: center; } .recent__wave { grid-row: wave; } .recent__pops { grid-row: pops; } .recent__temps-max { grid-row: temps-max; color: #ff2d11; } .recent__temps-min { grid-row: temps-min; color: #0095ff; border-bottom: 1px solid var(--font-color); } .weekly { margin-bottom: 2.4rem; overflow: scroll; } @media screen and (min-width: 768px) { .weekly { margin-bottom: 3.2rem; } } @media screen and (min-width: 1024px) { .weekly { margin-bottom: 4rem; } } @media screen and (min-width: 768px) { .weekly { overflow: auto; } } .weekly__title { margin-bottom: 0.8rem; font-weight: 700; font-size: clamp(14px, 1.4rem, 16px); } @media screen and (min-width: 768px) { .weekly__title { margin-bottom: 1.6rem; font-size: clamp(16px, 1.6rem, 20px); } } @media screen and (min-width: 1024px) { .weekly__title { margin-bottom: 2rem; font-size: clamp(18px, 2rem, 20px); } } .weekly__table { display: grid; grid-template-columns: [heading] -webkit-max-content repeat(6, -webkit-max-content); grid-template-columns: [heading] max-content repeat(6, max-content); grid-template-rows: [date] 1fr [weather] 2fr [reliability] 1fr [pops] 1fr [temps-max] 1fr [temps-min] 1fr; } @media screen and (min-width: 768px) { .weekly__table { grid-template-columns: [heading] -webkit-max-content repeat(6, 1fr); grid-template-columns: [heading] max-content repeat(6, 1fr); } } .weekly__group { display: contents; } .weekly__heading { grid-column: heading; padding: 0.6rem; border-top: 1px solid var(--font-color); border-left: 1px solid var(--font-color); font-weight: 700; font-size: clamp(12px, 1.2rem, 13px); } @media screen and (min-width: 768px) { .weekly__heading { padding: 0.8rem; font-size: clamp(13px, 1.3rem, 14px); } } @media screen and (min-width: 1024px) { .weekly__heading { padding: 10px; font-size: 13px; } } .weekly__heading:last-of-type { border-bottom: 1px solid var(--font-color); } @media screen and (min-width: 1024px) { .weekly__br { display: none; } } .weekly__high { color: #ff2d11; } .weekly__low { color: #0095ff; } .weekly__date, .weekly__weather, .weekly__reliability, .weekly__pops, .weekly__temps-max, .weekly__temps-min { padding: 0.6rem; display: grid; place-content: center; border-top: 1px solid var(--font-color); border-left: 1px solid var(--font-color); font-size: clamp(11px, 1.1rem, 12px); } @media screen and (min-width: 768px) { .weekly__date, .weekly__weather, .weekly__reliability, .weekly__pops, .weekly__temps-max, .weekly__temps-min { padding: 0.8rem; font-size: clamp(12px, 1.2rem, 13px); } } @media screen and (min-width: 1024px) { .weekly__date, .weekly__weather, .weekly__reliability, .weekly__pops, .weekly__temps-max, .weekly__temps-min { padding: 10px; font-size: 13px; } } .weekly__date:last-of-type, .weekly__weather:last-of-type, .weekly__reliability:last-of-type, .weekly__pops:last-of-type, .weekly__temps-max:last-of-type, .weekly__temps-min:last-of-type { border-right: 1px solid var(--font-color); } .weekly__date:nth-of-type(1), .weekly__weather:nth-of-type(1), .weekly__reliability:nth-of-type(1), .weekly__pops:nth-of-type(1), .weekly__temps-max:nth-of-type(1), .weekly__temps-min:nth-of-type(1) { grid-column: 2/3; } .weekly__date:nth-of-type(2), .weekly__weather:nth-of-type(2), .weekly__reliability:nth-of-type(2), .weekly__pops:nth-of-type(2), .weekly__temps-max:nth-of-type(2), .weekly__temps-min:nth-of-type(2) { grid-column: 3/4; } .weekly__date:nth-of-type(3), .weekly__weather:nth-of-type(3), .weekly__reliability:nth-of-type(3), .weekly__pops:nth-of-type(3), .weekly__temps-max:nth-of-type(3), .weekly__temps-min:nth-of-type(3) { grid-column: 4/5; } .weekly__date:nth-of-type(4), .weekly__weather:nth-of-type(4), .weekly__reliability:nth-of-type(4), .weekly__pops:nth-of-type(4), .weekly__temps-max:nth-of-type(4), .weekly__temps-min:nth-of-type(4) { grid-column: 5/6; } .weekly__date:nth-of-type(5), .weekly__weather:nth-of-type(5), .weekly__reliability:nth-of-type(5), .weekly__pops:nth-of-type(5), .weekly__temps-max:nth-of-type(5), .weekly__temps-min:nth-of-type(5) { grid-column: 6/7; } .weekly__date:nth-of-type(6), .weekly__weather:nth-of-type(6), .weekly__reliability:nth-of-type(6), .weekly__pops:nth-of-type(6), .weekly__temps-max:nth-of-type(6), .weekly__temps-min:nth-of-type(6) { grid-column: 7/8; } .weekly__date { grid-row: date; } .weekly__date.saturday { color: #0095ff; } .weekly__date.sunday { color: #ff2d11; } .weekly__weather { grid-row: weather; } .weekly__weather-text { text-align: center; } .weekly__reliability { grid-row: reliability; } .weekly__pops { grid-row: pops; } .weekly__temps-max { grid-row: temps-max; color: #ff2d11; } .weekly__temps-min { grid-row: temps-min; color: #0095ff; border-bottom: 1px solid var(--font-color); } .weekly .custom-scroll-hint-icon { background-color: #1bb4d4; } .overview { margin-bottom: 2.4rem; } @media screen and (min-width: 768px) { .overview { margin-bottom: 3.2rem; } } @media screen and (min-width: 1024px) { .overview { margin-bottom: 4rem; } } .overview__title { margin-bottom: 0.8rem; font-weight: 700; font-size: clamp(14px, 1.4rem, 16px); } @media screen and (min-width: 768px) { .overview__title { margin-bottom: 1.6rem; font-size: clamp(16px, 1.6rem, 20px); } } @media screen and (min-width: 1024px) { .overview__title { margin-bottom: 2rem; font-size: clamp(18px, 2rem, 20px); } } .overview__table { display: grid; grid-template-columns: [heading] -webkit-max-content [description] 1fr; grid-template-columns: [heading] max-content [description] 1fr; grid-template-rows: repeat(3, -webkit-max-content); grid-template-rows: repeat(3, max-content); } .overview__group { display: contents; } .overview__heading { grid-column: heading; padding: 0.6rem; border-left: 1px solid var(--font-color); border-top: 1px solid var(--font-color); font-weight: 700; font-size: clamp(12px, 1.2rem, 13px); } @media screen and (min-width: 768px) { .overview__heading { padding: 0.8rem; font-size: clamp(13px, 1.3rem, 14px); } } @media screen and (min-width: 1024px) { .overview__heading { padding: 10px; font-size: 13px; } } .overview__heading:last-of-type { border-bottom: 1px solid var(--font-color); } .overview__publisher, .overview__report-date-time, .overview__text { grid-column: description; padding: 0.6rem; border-left: 1px solid var(--font-color); border-right: 1px solid var(--font-color); border-top: 1px solid var(--font-color); font-size: clamp(12px, 1.2rem, 13px); } @media screen and (min-width: 768px) { .overview__publisher, .overview__report-date-time, .overview__text { padding: 0.8rem; font-size: clamp(13px, 1.3rem, 14px); } } @media screen and (min-width: 1024px) { .overview__publisher, .overview__report-date-time, .overview__text { padding: 10px; font-size: 13px; } } .overview__publisher:last-of-type, .overview__report-date-time:last-of-type, .overview__text:last-of-type { border-bottom: 1px solid var(--font-color); } .overview__publisher { grid-row: 1; } .overview__report-date-time { grid-row: 2; } .overview__text { grid-row: 3; }/*# sourceMappingURL=style.css.map */