/*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) 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; } a { text-decoration: none !important; color: #f8f7ff; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } button { border: 0px; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 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; } /* reset default text opacity of input placeholder */ ::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; } body { background-color: #191927; font-family: 'Poppins'; } header { width: 1140px; display: flex; margin: 0 auto; padding: 30px 0px 20px 0px; height: fit-content; align-items: center; justify-content: space-between; } header .logo img { height: 45px; -webkit-filter: drop-shadow(0px 0px 5px #00000073); filter: drop-shadow(0px 0px 5px #00000073); } header .menu { display: flex; } header .menu a { background-color: #262735; height: 50px; display: flex; padding: 10px 20px; margin: 0px 10px; border-radius: 10px; align-items: center; font-weight: 500; transition: 200ms; } header .menu a:hover { background-color: #13131d; color: #f8f7ff; transition: 200ms; } header .menu a.active { background-color: #13131d; color: #f8f7ff; } header .menu a:last-child { margin-right: 0px; } header .menu a svg { margin-right: 5px; } .body { width: 1140px; margin: 10px auto 0px auto; padding: 30px 40px; background-color: #262735; border-radius: 20px 20px 0px 0px; box-shadow: 0px 0px 20px 0px #00000073; } .body .text { font-size: 38px; font-weight: 500; display: flex; align-items: center; color: #f8f7ff; } .body .text>svg { margin-right: 5px; } .article { background-color: #191927; margin-bottom: 25px; border-radius: 10px; margin-right: 1%; } .article .title { padding: 20px; display: flex; justify-content: space-between; align-items: center; font-size: 22px; font-weight: 500; } .category { background-color: #262735; padding: 7px 20px; border-radius: 10px; font-size: 16px; letter-spacing: 1px; font-weight: bold; color: #f8f7ff; height: 100%; } .category_bg { background-color: #191927; } .article .meta { display: flex; padding: 20px 20px; border-top: 1px solid #262735; font-size: 14px; letter-spacing: 0.3px; color: #f8f7ff; } .article .meta .right { margin-left: auto; margin-right: 0px; } .pagination { display: flex; justify-content: center; margin-top: 30px; } .pagination a { background-color: #191927; font-weight: bold; color: #f8f7ff; border-radius: 100%; height: 40px; width: 40px; display: flex; justify-content: center; align-items: center; margin-right: 5px; transition: 300ms; } .pagination a:hover { background-color: #13131d; color: #f8f7ff; transition: 300ms; } .pagination a.active { background-color: #13131d; color: #f8f7ff; } footer { width: 1140px; margin: 0px auto; background-color: #262735; border-radius: 0px 0px 20px 20px; text-align: center; padding: 20px 0px; margin-bottom: 40px; box-shadow: 0px 10px 10px 0px #00000038; color: #f8f7ff; } .content { font-size: 18px; letter-spacing: .3px; } .content p { margin: 10px 0px; color: #f8f7ff; } .content strong { font-weight: bold; color: #f8f7ff; } .content h1 { font-size: 2em; margin-bottom: 10px; color: #f8f7ff; } .content h2 { font-size: 1.5em; margin-bottom: 10px; color: #f8f7ff; } .content h3 { font-size: 1.17em; margin-bottom: 10px; color: #f8f7ff; } .content h4 { font-size: 1em; margin-bottom: 10px; color: #f8f7ff; } .content h5 { font-size: .83em; margin-bottom: 10px; color: #f8f7ff; } .content h6 { font-size: .67em; margin-bottom: 10px; color: #f8f7ff; } .content img { display: block; } .content pre { background: #1d273b; color: #f8fafc; border-radius: 4px; white-space: pre; } .content pre code { padding: 15px 15px 10px 16px; width: 100%; display: block; overflow-x: scroll; } .content pre code::-webkit-scrollbar { width: 5px; height: 8px; } .content pre code::-webkit-scrollbar-thumb { background: #aaa; } .info { display: flex; justify-content: space-between; border-bottom: 1px solid #393a4d; padding-bottom: 10px; letter-spacing: 0.3px; margin-bottom: 10px; color: #f8f7ff; } .content_header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .content_header h1 { margin-bottom: 0px !important; } .categories ul { display: flex; flex-wrap: wrap; margin-bottom: 10px; } .categories ul li { margin-right: 1%; margin-bottom: 10px; width: 24%; } .categories ul li a { background-color: #191927; color: #f8f7ff; display: flex; justify-content: space-between; height: 45px; align-items: center; } .categories ul li a>span { margin-left: 5px; } .categories ul li a.active { background-color: #13131d; color: #f8f7ff; } .error-page { padding: 20px; display: flex; justify-content: space-between; align-items: center; font-size: 22px; font-weight: 500; } .body_title { display: flex; align-items: center; margin-bottom: 10px; color: #f8f7ff; } .search { margin-left: auto; width: 24%; position: relative; margin-right: 1%; } .search button { position: absolute; top: 11px; right: 15px; cursor: pointer; } .search input { background-color: #191927; border-radius: 10px; padding-left: 15px; width: 100%; height: 45px; } .home_page { width: fit-content; margin: 0px auto; position: relative; } .home_page .photo { background: url('../images/profil.jpeg'); height: 250px; width: 250px; border-radius: 100%; background-size: cover; background-position: center; } .home_page h1 { font-weight: 600; text-align: center; font-size: 32px; color: #f8f7ff; } .home_page h2 { text-align: center; font-size: 18px; color: #c3c3c3; margin-bottom: 10px; } .home_page ul { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 10px; } .home_page ul li { margin-right: 5px; } .home_page ul li:last-child { margin-right: 0px; } .home_page ul li a { height: 40px; width: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; } .instagram { transition: 500ms; background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); } .instagram:hover { transition: 500ms; transform: scale(1.1); } .home_page ul li a svg { color: #f8f7ff; height: 35px; width: 35px; } @media (max-width : 1000px) { header { width: 100%; padding: 10px 0px 0px 0px; display: block; text-align: center; } header .logo { display: block; margin-bottom: 10px; } header .logo img { height: auto; width: 80%; } header .menu a { padding: 5px 15px; font-size: 14px; width: 49%; justify-content: center; } header .menu a:last-child { margin-right: 10px; } .body { width: 95%; padding: 20px; } .body .text { font-size: 24px; margin-bottom: 15px; } .body .text>svg { height: 32px; margin-right: 2px; } .article { margin-bottom: 15px; } .article .title { font-size: 18px; } .category { font-size: 14px; } .article .meta { padding: 15px 20px; font-size: 13px; } .pagination { margin-top: 20px; } footer { width: 95%; margin: 0px auto; background-color: #f9fbfb; border-radius: 0px 0px 20px 20px; text-align: center; padding: 20px 0px; margin-bottom: 40px; } .categories ul li { width: 49%; } .error-page { flex-wrap: wrap; text-align: center; justify-content: center; } .error-page a { margin-bottom: 10px; } .body_title { flex-wrap: wrap; } .search { width: 100%; } } .hljs { display: block; overflow-x: auto; padding: .5em; color: #abb2bf; background: #191927 } .hljs-comment, .hljs-quote { color: #5c6370; font-style: italic } .hljs-doctag, .hljs-formula, .hljs-keyword { color: #c678dd } .hljs-deletion, .hljs-name, .hljs-section, .hljs-selector-tag, .hljs-subst { color: #e06c75 } .hljs-literal { color: #56b6c2 } .hljs-addition, .hljs-attribute, .hljs-meta-string, .hljs-regexp, .hljs-string { color: #98c379 } .hljs-built_in, .hljs-class .hljs-title { color: #e6c07b } .hljs-attr, .hljs-number, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-pseudo, .hljs-template-variable, .hljs-type, .hljs-variable { color: #d19a66 } .hljs-bullet, .hljs-link, .hljs-meta, .hljs-selector-id, .hljs-symbol, .hljs-title { color: #61aeee } .hljs-emphasis { font-style: italic } .hljs-strong { font-weight: 700 } .hljs-link { text-decoration: underline } pre { position: relative; } .copy-button { background-color: #262735; padding: 7px 20px; border-radius: 10px; font-size: 16px; letter-spacing: 1px; font-weight: bold; color: #f8f7ff; position: absolute; right: 10px; top: 10px; cursor: pointer; } .toastify { padding: 12px 20px; color: #f8f7ff; display: inline-block; background: -webkit-linear-gradient(315deg, #73a5ff, #5477f5); background: linear-gradient(135deg, #73a5ff, #5477f5); position: fixed; opacity: 0; transition: all .4s cubic-bezier(.215, .61, .355, 1); border-radius: 2px; cursor: pointer; text-decoration: none; max-width: calc(50% - 20px); z-index: 2147483647 } .toastify.on { opacity: 1 } .toast-close { background: 0 0; border: 0; color: #f8f7ff; cursor: pointer; font-family: inherit; font-size: 1em; opacity: .4; padding: 0 5px } .toastify-right { right: 15px } .toastify-left { left: 15px } .toastify-top { top: -150px } .toastify-bottom { bottom: -150px } .toastify-rounded { border-radius: 25px } .toastify-avatar { width: 1.5em; height: 1.5em; margin: -7px 5px; border-radius: 2px } .toastify-center { margin-left: auto; margin-right: auto; left: 0; right: 0; max-width: fit-content; max-width: -moz-fit-content } @media only screen and (max-width:360px) { .toastify-left, .toastify-right { margin-left: auto; margin-right: auto; left: 0; right: 0; max-width: fit-content } }