@charset "UTF-8"; @font-face { font-family: "Fjalla One"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/fjalla/fjalla-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/poppins/poppins-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Poppins"; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/poppins/poppins-italic-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/poppins/poppins-500.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/poppins/poppins-600.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/poppins/poppins-700.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 900; font-display: swap; src: url(/fonts/poppins/poppins-900.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Poppins"; font-style: italic; font-weight: 900; font-display: swap; src: url(/fonts/poppins/poppins-italic-900.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --page-width: 1280px; } /*** The new CSS reset - version 1.8.4 (last updated 14.2.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 */ *:where( :not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *) ) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { 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; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* 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; } :root { --hover: #ff0028; } .main__content { width: min(95vw, var(--page-width, var(--post-page-width))); padding: 0 15px; margin: 4.5vw auto 25px; font-family: "Poppins", sans-serif; word-break: break-word; } .main__content a { color: blue; text-decoration: underline; } .main__content a:hover { color: var(--hover); } .main__content p:not(.inner-text) { margin-top: 15px; } .header__container { max-height: 100px; border-bottom: 1px solid #000; } .header__container--inner { width: min(95vw, var(--page-width, var(--post-page-width))); display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 15px; gap: 15px; margin: auto; height: 60px; } @media screen and (min-width: 43.75em) { .header__container--inner { align-items: center; justify-content: stretch; } } @media screen and (min-width: 71.25em) { .header__container--inner { display: grid; grid-template-columns: auto 300px; } } .header__left { display: flex; align-items: end; flex: 1 0 93%; } .header__right { display: flex; justify-content: end; width: 50%; } @media screen and (min-width: 43.75em) { .header__right { width: 100%; align-self: end; } } .header__logo { display: inline-block; width: clamp(180px, 35.8vw, 250px); } .header__logo--container { display: flex; position: relative; margin-left: 10px; } .strawberryfeed-logo { width: min(100%, 80px); } .nav__main { width: 100%; font-family: "Fjalla One", sans-serif; text-transform: capitalize; } .nav__main--container { display: none; } @media screen and (min-width: 43.75em) { .nav__main--container { display: block; } } .menu__primary { display: flex; justify-content: space-between; } .menu__submenu { display: none; position: absolute; left: 0; z-index: 100; width: 100%; } .submenu__more:hover .menu__submenu { display: block; } .menu__link:hover { color: var(--hover); } .submenu { display: flex; justify-content: space-around; background: rgb(223, 223, 223); padding: 25px 0; margin: 10px 0 0 0; } .nav__mobile--container { display: block; text-align: right; height: 100%; position: relative; } @media screen and (min-width: 43.75em) { .nav__mobile--container { display: none; } } .menu__mobile { position: fixed; left: 100%; top: 60px; padding: 25px 35px; text-align: left; width: 100%; height: calc(100dvh - 60px); background: rgb(223, 223, 223); transition: all 0.5s ease; z-index: 100; font-family: "Fjalla One", sans-serif; } .menu__item--mobile { padding: 5px; } .menu__link--mobile { color: #6f6e6e; font-size: 19px; } .mobile__logo--container { margin-bottom: 45px; position: relative; } .mobile__logo--container .header__logo { padding: 5px 0 0 5px; } .hamburger { width: 25px; height: 4px; border-radius: 20px; background: #000; position: relative; } .hamburger::before, .hamburger::after { content: ""; width: 100%; height: 100%; border-radius: 20px; position: absolute; background: #000; left: 0; transition: all 0.2s; } .hamburger::before { top: -8px; } .hamburger::after { top: 8px; } .hamburger__container { cursor: pointer; height: 100%; position: absolute; z-index: 1000; right: 0; top: 0; } .hamburger__container.active .hamburger { transition: all 0.3s 0.3s; rotate: 45deg; background: grey; width: 30px; } .hamburger__container.active .hamburger::before, .hamburger__container.active .hamburger::after { top: 0; } .hamburger__container.active .hamburger::before { background: grey; } .hamburger__container.active .hamburger::after { rotate: 90deg; background: grey; transition: rotate 0.3s 0.3s; } .hamburger__container.active + .menu__mobile { left: 0; top: 60px; } .search__btn { display: none; margin-left: 15px; cursor: pointer; } @media screen and (min-width: 43.75em) { .search__btn { display: flex; } } .search__btn, .search__icon { width: 15px; height: 15px; justify-self: end; } .search__container { display: none; background: lightgrey; height: 60px; } .search__container.active { display: flex; justify-content: center; align-items: center; } .search__inner--container { width: min(95vw, var(--page-width, var(--post-page-width))); padding: 0 15px; } .search__form-container { background: white; border: 1px solid var(--hover); padding: 8px; display: flex; position: relative; } .search__form-input { width: 100%; } .search__form-button { width: 40px; height: 100%; padding: 0 10px; position: absolute; right: 0; top: 0; background: var(--hover); border-left: 1px solid var(--hover); display: flex; cursor: pointer; } .search__form-button:hover { background: white; } .search__form-button:hover .search__form-icon path { fill: var(--hover); } .search__form-icon path { fill: white; } .mobile__search--container { margin-bottom: 10px; } .mobile__search--inner { background: white; } .mobile__search--form { background: white; padding: 8px; border: 1px solid var(--hover); display: flex; position: relative; } .mobile__search--form_button { height: 100%; width: 40px; position: absolute; right: 0; top: 0; padding: 0 10px; background: var(--hover); border-left: 1px solid var(--hover); display: flex; } .mobile__search--form_icon path { fill: white; } .inner-subheader { font-weight: 700; margin-top: 10px; } .inner-text { margin: 5px 0; } .footer__container { display: flex; justify-content: center; align-items: center; min-height: 150px; color: white; background: var(--hover); font-family: "Fjalla One", sans-serif; margin-top: auto; } .footer__container--inner { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 10px; } .menu__footer { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; } .homepage__body { display: flex; flex-direction: column; min-height: 100dvh; } .top__container { display: grid; grid-template-columns: auto; gap: 20px; } @media screen and (min-width: 71.25em) { .top__container { grid-template-columns: auto 300px; } } table { width: 100%; border: 1px solid #262626; border-spacing: 2px; margin: 10px 0; border-collapse: separate; } td { border: 1px solid #262626; padding: 5px; } /*# sourceMappingURL=style.css.map */