User:SecurityXP/styles.css

/* GLOBAL */ .page { font-size: 16px; }

.page * { margin: 0; padding: 0; box-sizing: border-box; font-size: 1em; line-height: 1.75; }

.page .ifmobile > .mobile:nth-child(2) { display: none; }

.page p { margin: 0.25em 0; }

.page ol { margin: 0.25em 0 0.25em 3.2em; }

.page ul, .page dl { margin: 0.25em 0 0.25em 1.6em; }

.page .heading { font-size: 3em; line-height: 1.5; }

.page .title { font-size: 1.25em; font-weight: bold; padding: 0.75em 0; }

.page .br { display: block; }

.page .hr { width: 100%; height: 0.3125em; }

.page .focus { display: inline-block; font-weight: bold; background-color: #ffa; }

.page .image { display: inline-block; position: relative; background-repeat: no-repeat; background-position: center; background-size: cover; margin: 1.25em; padding: 0; /* DO NOT DELETE */ }

.page .image::before { content: ""; display: block; padding: 37.5% 0; /* DO NOT DELETE */ visibility: hidden; /* FOR TEST */ }

.page .image::after { content: attr(title); position: absolute; left: 0; right: 0; bottom: 0; background-color: #007fff; background-color: rgba(0, 0, 0, 0.8); color: #007fff; font-size: 1em; text-align: center; line-height: 2.5em; opacity: 0; transition: opacity 0.5s; }

.page .image:hover::after { opacity: 1; }

.page .strikethrough { display: inline-block; position: relative; font-weight: bold; }

.page .strikethrough::before, .page .strikethrough::after { content: ""; position: absolute; top: 50%; width: 0; height: 0.15625em; background-color: #08ff94; cursor: pointer; transform: translateY(-50%); }

.page .strikethrough::before { left: 0; }

.page .strikethrough::after { right: 0; transition: width 0.5s cubic-bezier(0.75, -0.5, 0.25, 1.5); }

.page .strikethrough:hover::before { width: 100%; transition: width 0.5s cubic-bezier(0.75, -0.5, 0.25, 1.5); }

.page .strikethrough:hover::after { width: 100%; background-color: transparent; transition: none; }

.page .target { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -999; }

.page .target[data-prompt]:target { display: block; position: fixed; top: auto; left: 50%; right: auto; bottom: 0%; width: 100%; max-width: 25em; height: auto; background-color: #00c896; border: none; border-radius: 0.390625em; font-size: 0.8em; line-height: 1.75; color: #fff; text-align: center; margin: 0; padding: 0.9375em 1.25em; z-index: -999; transform: translate(-50%, 100%); animation-name: prompt; animation-duration: 5s; animation-iteration-count: 1; animation-timing-function: cubic-bezier(0.75, -0.5, 0.25, 1.5); animation-direction: alternate; }

@keyframes prompt { 0% {       bottom: 0; z-index: 999; transform: translate(-50%, 100%); }   5% {        bottom: 5%; transform: translate(-50%, 0%); }   95% {        top: auto; bottom: 5%; transform: translate(-50%, 0%); }   100% {        bottom: 0; z-index: 999; transform: translate(-50%, 100%); } }

.page .target[data-prompt]::before { content: attr(data-prompt); }

.page .target[data-prompt]::after { content: ""; }

.page .target[data-prompt]:target::after { position: absolute; top: 0; left: 0; width: 0; height: 0.3125em; background-color: #96e1c8; border: none; border-radius: 0.3125em; font-size: 1.25em; animation-name: prompt-bar; animation-duration: 5s; animation-iteration-count: 1; animation-timing-function: linear; animation-direction: normal; }

@keyframes prompt-bar { 0% {       width: 0; }   100% {        width: 100%; } }

.page .target ~ .tooltip[data-tooltip] { display: inline-block; position: relative; }

.page .target ~ .tooltip[data-tooltip]::before { content: attr(data-tooltip); position: absolute; left: 50%; bottom: 100%; width: auto; height: auto; min-width: max-content; max-width: 15em; background-color: #6200ee; background-color: rgba(0, 0, 0, 0.8); font-size: 1em; text-align: center; color: #fff; padding: 0.5em; border-radius: 0.5em; opacity: 0; visibility: hidden; transform: translateX(-50%); transition: visibility 0.5s, opacity 0.5s; }

.page .target:target ~ .tooltip[data-tooltip]::before { opacity: 1; visibility: visible; }

.page .tooltip > a, .page .tooltip > a:link, .page .tooltip > a:visited, .page .tooltip > a:hover, .page .tooltip > a:active { color: inherit; text-decoration: none; cursor: pointer; }

.page .ribbon { display: flex; flex-wrap: nowrap; width: 100%; }

.page .ribbon .core, .page .ribbon::before, .page .ribbon::after { display: block; flex: 1; height: 0.3125em; }

.page .ribbon .core, .page .hr { background-color: #fae1af; }

.page .ribbon::before { content: ""; background-color: #fac8c8; }

.page .ribbon::after { content: ""; background-color: #96e1c8; }

.page .info { display: flex; width: 100%; }

.page .info > * { flex: 1; }

.page .info > .grid { padding: 1.25em; }

.page .badge { display: inline-block; position: relative; width: 1.375em; height: 1.375em; font-size: 16px; vertical-align: middle; background-repeat: no-repeat; background-position: center; background-size: 60%; border: none; border-radius: 50%; margin: 0 0.5em; padding: 0; transform: translateY(-0.0859375em); }

.page .badge[data-tooltip] { cursor: pointer; }

.page .badge.box { border-radius: 25%; }

.page .badge.check { background-color: #00c896; /* File:OOjs UI icon check-invert.svg: https://commons.wikimedia.org/wiki/File:OOjs_UI_icon_check-invert.svg */ background-image: url(https://upload.wikimedia.org/wikipedia/commons/1/13/OOjs_UI_icon_check-invert.svg); }

.page .badge.cross { background-color: #c80000; /* File:OOjs UI icon close-ltr-invert.svg: https://commons.wikimedia.org/wiki/File:OOjs_UI_icon_close-ltr-invert.svg */ background-image: url(https://upload.wikimedia.org/wikipedia/commons/0/0b/OOjs_UI_icon_close-ltr-invert.svg); }

.page .badge[data-tooltip]::before { content: attr(data-tooltip); position: absolute; top: 150%; top: calc(100% + 0.5em); left: 50%; transform: translateX(-50%); width: auto; height: auto; min-width: max-content; max-width: 15em; font-size: 0.8em; text-align: center; color: #fff; padding: 0.25em 1em; border-radius: 0.5em; opacity: 0; visibility: hidden; transition: visibility 0.5s, opacity 0.5s; }

.page .badge.check[data-tooltip]::before { background-color: #00c896; }

.page .badge.cross[data-tooltip]::before { background-color: #c80000; }

.page .badge[data-tooltip]:hover::before { opacity: 1; visibility: visible; }

.page blockquote { max-width: 50em; height: auto; background-color: #E1E1E1; border-left: 0.3125em solid #969696; border-radius: 0.3125em; margin: 1em auto; padding: 0.5em 2.5em; }

.page blockquote, .page blockquote *:not(blockquote) { font-size: 16px; font-style: italic; font-family: "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif !important; line-height: 2em; }

.page blockquote *:not(blockquote) { border: none; margin: 0; padding: 0; }

.page .hue-rotate { animation-name: hue-rotate; animation-duration: 15s; animation-iteration-count: infinite; animation-timing-function: linear; animation-direction: normal; }

@keyframes hue-rotate { 0% {       filter: hue-rotate(0deg); }   100% {        filter: hue-rotate(360deg); } }

.page .bookmark { position: relative; }

.page .mark { display: inline-block; position: absolute; top: 1em; left: -0.5em; width: auto; height: 1.75em; background-color: #c83232; border: none; border-radius: 0 0.875em 0.875em 0; color: #fff; font-size: 16px; font-weight: bold; line-height: 1.75em; padding: 0 1em 0 2em; margin: 0; box-shadow: 0em 0.15625em 0.3125em 0em #000; }

.page .mark::before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; border-width: 0 0.5em 0.5em 0; border-style: solid; border-color: transparent #963232 transparent transparent; box-sizing: content-box; z-index: -1; }

.page .beep { font-size: 0.8em; text-align: right; }

/* CUSTOMIZED */ flex: 2; display: flex; flex-direction: column; justify-content: center; width: 100%; padding: 2.5em; }
 * 1) intro {

filter: blur(0.025em); }
 * 1) username {

/* File:A curious kitten (Pixabay).jpg: https://commons.wikimedia.org/wiki/File:A_curious_kitten_(Pixabay).jpg */ background-image: url(https://upload.wikimedia.org/wikipedia/commons/7/75/A_curious_kitten_%28Pixabay%29.jpg); }
 * 1) kitten {

width: 100%; padding: 1.25em; }
 * 1) expertise {

flex: 2; }
 * 1) toolbox {

flex: 2; }
 * 1) contact {

/* RESPONSIVE */ @media only screen and (max-width: 768px) { .page { font-size: 16px; }   .page .ifmobile > .nomobile { display: none; }   .page .ifmobile > .mobile { display: initial; }   .page .br { display: block !important; }   .page .info { flex-direction: column; }   #intro { flex: 1; }   #introbox { order: 1; }   #toolbox { flex: 1; order: 2; } }

@media only screen and (min-width: 320px) {}

@media only screen and (min-width: 375px) {}

@media only screen and (min-width: 425px) {}

@media only screen and (min-width: 600px) {}

@media only screen and (min-width: 768px) { .page { font-size: 16px; } }

@media only screen and (min-width: 1024px) { .page { font-size: 16px; } }

@media only screen and (min-width: 1440px) {}

@media only screen and (min-width: 2560px) { .page { font-size: 24px; } }

/* CIRCULAR PROGRESS BAR: User:Pseudo Classes/Circular progress bar/styles.css */ .page .progress { text-align: center; user-select: none; }

.page .progress.half .circle .bar { clip: rect(auto, auto, auto, auto); }

.page .progress .circle .core, .progress.half .circle .filling { position: absolute; border-width: 1em; border-style: solid; border-color: #fae1af; width: 10em; height: 10em; clip: rect(0em, 5em, 10em, 0em); border-radius: 50%; transform: rotate(0turn); }

.page .progress.half .circle .core::after, .progress.half .circle .filling { transform: rotate(0.5turn); }

.page .progress .circle { position: relative; width: 10em; height: 10em; background-color: #e1e1e1; border-radius: 50%; margin: auto; }

.page .progress .circle > .label { display: block; position: absolute; width: 100%; top: 50%; font-size: 2.5em; font-weight: bold; line-height: 4em; color: #3c4761; white-space: nowrap; text-align: center; transform: translateY(-50%); transition: all 0.25s ease-in-out; z-index: 1; }

.page .progress .circle > .label > .symbol { font-size: 0.5em; vertical-align: super; line-height: 2.5em; }

.page .progress .circle > .label > .decimal { font-size: 0.5em; vertical-align: baseline; line-height: 2.5em; }

.page .progress .circle::after { content: ""; display: block; position: absolute; top: 1em; left: 1em; border-radius: 50%; background-color: #fff; width: 8em; height: 8em; transition: all 0.25s ease-in-out; }

.page .progress .circle .bar { position: absolute; width: 10em; height: 10em; clip: rect(0em, 10em, 10em, 5em); }

.page .progress[title="50%"] .circle .core { transform: rotate(0.5turn); border-color: #96e1c8; }

.page .progress[title="50%"] .circle .filling { border-color: #96e1c8; }

.page .progress[title="60%"] .circle .core { transform: rotate(0.6turn); border-color: #fae1af; }

.page .progress[title="60%"] .circle .filling { border-color: #fae1af; }

.page .progress[title="75.5%"] .circle .core { transform: rotate(0.755turn); border-color: #fac8c8; }

.page .progress[title="75.5%"] .circle .filling { border-color: #fac8c8; }

.page .progress .circle:hover { cursor: default; }

.page .progress .circle:hover > .label { line-height: 3.125em; font-size: 3.2em; }

.page .progress .circle:hover::after { top: 0.75em; left: 0.75em; width: 8.5em; height: 8.5em; }

.page .progress .caption { font-size: 1.171875em; font-weight: bold; line-height: 2.5; }

.page .introbox { position: relative; width: 3em; height: 3em; font-size: 16px; margin: 0.25em; padding: 0; float: right; clear: right; }

.page .introbox > .container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: auto; height: 100%; border: 0.0625em solid #afafaf; margin: 0; padding: 0; overflow: hidden; box-sizing: content-box; transition-property: left, right; transition-duration: 1s; transition-timing-function: cubic-bezier(0.75, -0.5, 0.25, 1.5); }

.page .target:target + .introbox > .container { left: -12em; right: 0; }

.page .introbox > .container > * { display: table; margin: 0; padding: 0; }

.page .introbox > .container > div { position: absolute; top: 0; right: 0; bottom: 0; width: 15em; height: 100%; font-size: 0.8em; line-height: 1; background-color: #fff; opacity: 0; transition: opacity 1s; }

.page .target:target + .introbox > .container > div { opacity: 1; }

.page .introbox > .container > a { position: relative; width: 3em; height: 100%; font-size: 1em; font-weight: 300; line-height: 1; color: initial; text-decoration: none; cursor: pointer; z-index: 1; }

.page .target:target + .introbox > .container > a { cursor: default; }

.page .introbox > .container > * > span { display: table-cell; width: 100%; height: 100%; text-align: center; vertical-align: middle; margin: 0; padding: 0; }

.page .introbox > .container > div > span { padding: 0 0.5em; }

.page .introbox > .container > a > span { background-color: #ffa; }

background-color: #fac8c8; }
 * 1) Gen + .introbox > .container > a > span {

background-color: #fae1af; }
 * 1) HTML + .introbox > .container > a > span {

background-color: #1dc48d; }
 * 1) CSS + .introbox > .container > a > span {