From 9af35f4f3b6fb94eebbbe33748a4074dd9f79199 Mon Sep 17 00:00:00 2001 From: ricoThaka <134652418+ricoThaka@users.noreply.github.com> Date: Thu, 14 Mar 2024 15:29:33 -0700 Subject: [PATCH] version2 --- marsblog.css | 1031 +++++++++++++++++++++++++++++++----------------- marsblog.html | 464 ++++++++++++++-------- marsblog1.css | 351 +++++++++++++++++ marsblog1.html | 170 ++++++++ 4 files changed, 1495 insertions(+), 521 deletions(-) create mode 100644 marsblog1.css create mode 100644 marsblog1.html diff --git a/marsblog.css b/marsblog.css index 3a4e94f..1c5514e 100644 --- a/marsblog.css +++ b/marsblog.css @@ -1,351 +1,680 @@ -@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;1,300;1,400&family=Noto+Emoji:wght@300;500&family=Quicksand:wght@300;500;600;700&family=Red+Hat+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,700&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Anybody:wght@900&family=Fredoka+One&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Rubik+Burned&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap'); - -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; -} -/* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; -} -body { - line-height: 1; -} -ol, ul { - list-style: none; -} -blockquote, q { - quotes: none; -} -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; -} -table { - border-collapse: collapse; - border-spacing: 0; -} -/* ---------------------------------- #StartStyle */ -body { - -} -pre {padding:15px; -color:white;} - - - - -html { - background: url(https://mars.nasa.gov/mars2020-raw-images/pub/ods/surface/sol/01073/ids/edr/browse/ncam/NLF_1073_0762203930_824ECM_N0501618NCAM02073_10_195J01_1200.jpg) no-repeat center center fixed; - line-height: 1.5; - -webkit-background-size: cover; - -moz-background-size: cover; - -o-background-size: cover; - background-size: cover; - -} -a, -a:hover, -a:visited a:hover { - color: #c9ff23; - padding: 10px; -} - -a { - color: #63c0f5; - text-shadow: 0 0 5px rgba(104, 182, 255, 0.5); -} -/* contentDiv */ -#content { - border-radius: 31px 31px 31px 31px; - max-width: 900px; - padding: 0px; - margin-bottom: 40px; - margin-right: auto; - margin-left: auto; - /* opera does not like 'margin:20px auto' */ - /* background: #666; */ - border: 19px solid #DB362D; - text-align:left; - /* part 2 of 2 centering hack */ - width: 50%; /* ie5win fudge begins */ - voice-family: "\"}\""; - voice-family:inherit; - overflow: hidden; - box-shadow: rgba(219,54,45, 0.4) 5px 5px, rgba(219,54,45, 0.3) 10px 10px, rgba(219,54,45, 0.2) 15px 15px, rgba(219,54,45, 0.1) 20px 20px, rgba(219,54,45, 0.05) 25px 25px; - font-family: "Comfortaa", -apple-system, Ubuntu, "Ariel Black", Verdana; - - } - - - img { - max-width: 100%; - max-height: 100%; - - box-shadow: rgba(219,54,45, 0.5) 0px 50px 100px -20px, rgba(0, 0, 0, 0.7) 0px 30px 60px -30px; -} - -.twoPanelSpread { - - - /* For browsers that do not support gradients */ - /* background-image: linear-gradient(to right, #e66250, #ff80cc); */ - margin: 0px; - padding: 0px; - background: url( https://raw.githubusercontent.com/ThakaRashard/bubblegumpop/gh-pages/img/810MATRiX.webp ) - center repeat; -} - -.row { - display: flex; - flex-direction: row; - flex-wrap: wrap; - width: 100%; -} -#headerMargins -{ - margin-bottom:-27px; - -} -.panelColumn { - display: flex; - flex-direction: column; - flex-basis: 100%; - flex: 1; - overflow: hidden; -} - - -.leftColumn { -/* background-color: #2470FF; */ - width: 100%; -} - -.leftColumn img { - - flex-shrink: 0; - min-width: 100%; - min-height: 100%; - display: flex; - justify-content: center; - align-items: center; - overflow: hidden - -} - -.rightColumn { - -} -.rightColumn img { - - flex-shrink: 0; - min-width: 100%; - min-height: 100%; - display: flex; - justify-content: center; - align-items: center; - overflow: hidden -} -.top-container { - - padding: 0px; - align-content: center; - border-radius: 31px 0px 31px 0px; - max-width: 900px; - padding: 15px; - margin-right: auto; - margin-left: auto; - /* opera does not like 'margin:20px auto' */ - /* background: #666; */ - width: 50%; /* ie5win fudge begins */ - text-align:left; -} - - -/* FLEX_BOX_FOR_3_IMAGES */ -.flex-container { - - display: flex; - align-items: stretch; - flex-flow: row nowrap; - flex-direction: row; - flex-wrap: nowrap; - justify-content: center; - align-content: stretch; - height: 100%; - padding: 15px; - gap: 5px; - - } - - .flex-container > div{ - - border: 1px solid #c9ff23; - border-radius: 1px; - padding: 8px; - } - -#row_image { - /* position: fixed; */ /* border-radius: 55px 55px 0px 0px; */ - width: 100%; - display: flex; - border-bottom: 10px solid #DB362D; - justify-content: center; - max-width: 100%; - padding: 0px; - max-height: 100%; - background-image: url("https://raw.githubusercontent.com/ThakaRashard/bubblegumpop/gh-pages/img/810MATRiX.webp"); - background: url( https://raw.githubusercontent.com/ThakaRashard/bubblegumpop/gh-pages/img/810MATRiX.webp ) - center repeat; - background-repeat: repeat; - } -*/ - -#round {border-radius: 31px 31px 0px 0px;} -img { - -} - - -.sticky { - position: fixed; - top: 0; - width: 100%; - border-bottom: 10px solid #DB362D; -} - -.sticky + .content { - padding-top: 102px; -} - - -.firstcharacter { - color: #fff; - text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0fa, - 0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa; - float: left; - font-size: 75px; - line-height: 60px; - padding-top: 7px; - padding-right: 8px; - padding-left: 3px; -} - -.neonText { - color: #fff; - text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0fa, - 0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa; - -} - -gradient-text { - - box-shadow: rgba(219,54,45, 0.4) 5px 5px, rgba(219,54,45, 0.3) 10px 10px, rgba(219,54,45, 0.2) 15px 15px, rgba(219,54,45, 0.1) 20px 20px, rgba(219,54,45, 0.05) 25px 25px; - -} -svg { - filter: drop-shadow(11px 1px 1px rgb(219 54 45 / 0.6)); -} - -@import "compass/css3"; -*, :before, :after { - box-sizing: border-box; -} -.unstyled { - list-style: none; - padding: 0; - margin: 0; -} -.unstyled a { - text-decoration: none; -} -.list-inline { - overflow: hidden; -} -.list-inline li { - float: left; -} -.header { - position: fixed; - left: 0; - top: 0; - bottom: 0; - width: 1117.5em; - background: #DB362D; -} - -.social-links { - border-bottom: solid 1px #DB362D; - - margin-bottom 15px; -} -.social-links li { - width: 25%; - border-left: solid 1px #DB362D; -} -.social-links li:first-child { - border: none; -} -.social-links a { - display: block; - height: 5.5em; - text-align: center; - color: white; - font: 0.75em/5.5em "Comfortaa", -apple-system, Ubuntu, "Ariel Black", Verdana; - -} -.social-links a:hover { - color: #DB362D; -} -.list-hover-slide li { - position: relative; - overflow: hidden; -} -.list-hover-slide a { - display: block; - position: relative; - z-index: 1; - background-repeat: no-repeat, repeat; - background-size: cover; - background-image: url("https://mars.nasa.gov/mars2020-raw-images/pub/ods/surface/sol/00443/ids/edr/browse/fcam/FLF_0443_0706278634_263ECM_N0250214FHAZ02008_10_085J01_1200.jpg"); - transition: 0.35s ease color; -} -.list-hover-slide a:before { - content: ''; - display: block; - z-index: -1; - position: absolute; - left: -100%; - top: 0; - width: 100%; - height: 100%; - border-right: solid 5px #c9ff23; - background: #DB360D; - transition: 0.35s ease left; -} -.list-hover-slide a.is-current:before, .list-hover-slide a:hover:before { - left: 0; -} +@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap') +@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;1,300;1,400&family=Noto+Emoji:wght@300;500&family=Quicksand:wght@300;500;600;700&family=Red+Hat+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Anybody:wght@900&family=Fredoka+One&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Rubik+Burned&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap'); + +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; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +/* ---------------------------------- #StartStyle */ +body { + +} +pre {padding:15px; +color:white;} + + + + +html { + background: url(https://raw.githubusercontent.com/ricoThaka/ricothaka.github.io/master/assets/MOSHED-2024-3-4-13-41-24.jpg) no-repeat 0 0 fixed; + background-size: cover; + line-height: 1.5; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; + +} +a, +a:hover, +a:visited a:hover { + color: #c9ff23; + padding: 10px; +} + +a { + color: #63c0f5; + text-shadow: 0 0 5px rgba(104, 182, 255, 0.5); +} +/* contentDiv */ +#content { + border-radius: 31px 31px 31px 31px; + max-width: 900px; + padding: 0px; + margin-bottom: 40px; + margin-right: auto; + margin-left: auto; + /* opera does not like 'margin:20px auto' */ + /* background: #666; */ + border: 19px solid #DB362D; + background: url(https://mars.nasa.gov/mars2020-raw-images/pub/ods/surface/sol/01046/ids/edr/browse/rcam/RRF_1046_0759804806_506ECM_N0495338RHAZ02420_01_295J01_800.jpg) no-repeat 0 0 fixed; + /* https://developer.mozilla.org/en-US/docs/Web/CSS/background-size */ + background-size: cover; + text-align:left; + /* part 2 of 2 centering hack */ + width: 50%; /* ie5win fudge begins */ + voice-family: "\"}\""; + voice-family:inherit; + overflow: hidden; + box-shadow: rgba(219,54,45, 0.4) 5px 5px, rgba(219,54,45, 0.3) 10px 10px, rgba(219,54,45, 0.2) 15px 15px, rgba(219,54,45, 0.1) 20px 20px, rgba(219,54,45, 0.05) 25px 25px; + font-family: "Comfortaa", -apple-system, Ubuntu, "Ariel Black", Verdana; + color: #c9ff23; + text-shadow: 0 0 5px rgba(104, 182, 255, 0.5); + } +img { + max-width: 100%; + max-height: auto; + + box-shadow: rgba(219,54,45, 0.5) 0px 50px 100px -20px, rgba(0, 0, 0, 0.7) 0px 30px 60px -30px; +} + +.twoPanelSpread { + + + /* For browsers that do not support gradients */ + /* background-image: linear-gradient(to right, #e66250, #ff80cc); */ + margin: 0px; + padding: 0px; + background: url( https://raw.githubusercontent.com/ThakaRashard/bubblegumpop/gh-pages/img/810MATRiX.webp ) + center repeat; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 100%; +} +#headerMargins +{ + margin-bottom:-27px; + +} +.panelColumn { + display: flex; + flex-direction: column; + flex-basis: 100%; + flex: 1; + overflow: hidden; +} + + +.leftColumn { +/* background-color: #2470FF; */ + width: 100%; +} + +.leftColumn img { + + flex-shrink: 0; + min-width: 100%; + min-height: auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden + +} + +.rightColumn { + +} +.rightColumn img { + + flex-shrink: 0; + min-width: 100%; + min-height: auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden +} +.top-container { + + padding: 0px; + align-content: center; + border-radius: 31px 0px 31px 0px; + max-width: 900px; + padding: 15px; + margin-right: auto; + margin-left: auto; + /* opera does not like 'margin:20px auto' */ + /* background: #666; */ + width: 50%; /* ie5win fudge begins */ + text-align:left; +} + + +/* FLEX_BOX_FOR_3_IMAGES */ +.flex-container { + + display: flex; + align-items: stretch; + flex-flow: row nowrap; + flex-direction: row; + flex-wrap: nowrap; + justify-content: center; + align-content: stretch; + + padding: 15px; + gap: 5px; + + } + + .flex-container > div{ + + border: 1px solid #c9ff23; + border-radius: 1px; + padding: 8px; + } + +#row_image { + /* position: fixed; */ /* border-radius: 55px 55px 0px 0px; */ + width: 100%; + display: flex; + border-bottom: 10px solid #DB362D; + justify-content: center; + max-width: 100%; + padding: 0px; + max-height: 100%; + background-image: url("https://raw.githubusercontent.com/ThakaRashard/bubblegumpop/gh-pages/img/810MATRiX.webp"); + background: url( https://raw.githubusercontent.com/ThakaRashard/bubblegumpop/gh-pages/img/810MATRiX.webp ) + center repeat; + background-repeat: repeat; + } +*/ + +#round {border-radius: 31px 31px 0px 0px;} +img { + +} + + +.sticky { + position: fixed; + top: 0; + width: 100%; + border-bottom: 10px solid #DB362D; +} + +.sticky + .content { + padding-top: 102px; +} + + +.firstcharacter { + color: #fff; + text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0fa, + 0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa; + float: left; + font-size: 75px; + line-height: 60px; + padding-top: 7px; + padding-right: 8px; + padding-left: 3px; +} + +.neonText { + color: #fff; + text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0fa, + 0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa; + +} + +gradient-text { + + box-shadow: rgba(219,54,45, 0.4) 5px 5px, rgba(219,54,45, 0.3) 10px 10px, rgba(219,54,45, 0.2) 15px 15px, rgba(219,54,45, 0.1) 20px 20px, rgba(219,54,45, 0.05) 25px 25px; + +} +svg { + filter: drop-shadow(11px 1px 1px rgb(219 54 45 / 0.6)); +} + +@import "compass/css3"; +*, :before, :after { + box-sizing: border-box; +} +.unstyled { + list-style: none; + padding: 0; + margin: 0; +} +.unstyled a { + text-decoration: none; +} +.list-inline { + overflow: hidden; +} +.list-inline li { + float: left; +} +.header { + position: fixed; + left: 0; + top: 0; + bottom: 0; + width: 1117.5em; + background: #DB362D; +} + +.social-links { + border-bottom: solid 1px #DB362D; + + margin-bottom 15px; +} +.social-links li { + width: 25%; + border-left: solid 1px #DB362D; +} +.social-links li:first-child { + border: none; +} +.social-links a { + display: block; + height: 4.5em; + text-align: center; + color: white; + font: 0.75em/5.5em "Comfortaa", -apple-system, Ubuntu, "Ariel Black", Verdana; + +} +.social-links a:hover { + color: #DB362D; +} +.list-hover-slide li { + position: relative; + overflow: hidden; +} +.list-hover-slide a { + display: block; + position: relative; + z-index: 1; + background-repeat: no-repeat, repeat; + background-size: cover; + background-image: url("https://mars.nasa.gov/mars2020-raw-images/pub/ods/surface/sol/00443/ids/edr/browse/fcam/FLF_0443_0706278634_263ECM_N0250214FHAZ02008_10_085J01_1200.jpg"); + transition: 0.35s ease color; +} +.list-hover-slide a:before { + content: ''; + display: block; + z-index: -1; + position: absolute; + left: -100%; + top: 0; + width: 100%; + height: 100%; + border-right: solid 5px #c9ff23; + background: #DB362D; + transition: 0.35s ease left; +} +.list-hover-slide a.is-current:before, .list-hover-slide a:hover:before { + left: 0; +} + + +/****************************STORYBOX****************/ + + +.storyBox{ +width: 100%; + display: flex; + +} + +.storyBox .card{ + position: relative; + cursor: pointer; +} + +.storyBox .card .face{ + width: 100%; + height: 200px; + transition: 0.5s; +} + +.storyBox .card .face.face1{ + position: relative; + background: #333; + display: flex; + justify-content: center; + align-items: center; + z-index: 1; + transform: translateY(100px); +} + +.storyBox .card:hover .face.face1{ + background: #c9ff23; + transform: translateY(0); + z-index: 1; +} + +.storyBox .card .face.face1 .storycontent{ + opacity: 0.2; + transition: 0.5s; +} + +.storyBox .card:hover .face.face1 .storycontent{ + opacity: 1; +} + +.storyBox .card .face.face1 .storycontent img{ + /* max-width: 100px; */ +} + +.storyBox .card .face.face1 .storycontent h3{ + margin: 10px 0 0; + padding: 0; + text-align: center; + font-size: 1.5em; +} + +.storyBox .card .face.face2{ + position: relative; + display: flex; + justify-content: center; + align-items: center; + padding: 20px; + box-sizing: border-box; + box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8); + transform: translateY(-100px); +} + +.storyBox .card:hover .face.face2{ + transform: translateY(0); +} + +.storyBox .card .face.face2 .storycontent p{ + margin: 0; + padding: 0; +} + +.storyBox .card .face.face2 .storycontent a{ + margin: 0 0 0 0; + display: inline-block; + text-decoration: none; + font-weight: 900; + color: #333; + padding: 5px; + border: 1px solid #333; +} + +.storyBox .card .face.face2 .storycontent a:hover{ + background: #333; + color: #fff; +} + + +/* VideoPlayer */ + +/* background-color: #c9ff23;*/ +figure { + max-width:1024px; + max-width:64rem; + width:100%; + height:100%; + max-height:494px; + max-height:30.875rem; + margin:20px auto; + margin:1.25rem auto; + padding:20px; + padding:1.051%; + background-color:#c9ff23; +} +figcaption { + display:block; + font-size:12px; + font-size:0.75rem; + color:#fff; +} + + +video { + width:100%; + background: rgb(217,4,121); + background: linear-gradient(270deg, rgba(217,4,121,1) 0%, rgba(254,245,1,1) 35%, rgba(0,212,255,1) 100%); + transition: 1s cubic-bezier(.25,.1,.2,3); +} + +video:hover { + + background: rgb(217,4,121); + background: linear-gradient(90deg, rgba(217,4,121,1) 0%, rgba(254,245,1,1) 35%, rgba(0,212,255,1) 100%); + +} + +/* controls */ +.controls, .controls > * { + padding:0; + margin:0; +} +.controls { + overflow:hidden; + background:transparent; + width:100%; + height:8.0971659919028340080971659919028%; /* of figure's height */ + position:relative; +} +.controls[data-state=hidden] { + display:none; +} +.controls[data-state=visible] { + display:block; +} +.controls > * { + float:left; + width:3.90625%; + height:100%; + margin-left:0.1953125%; + display:block; +} +.controls > *:first-child { + margin-left:0; +} +.controls .progress { + cursor:pointer; + width:75.390625%; +} +.controls button { + text-align:center; + overflow:hidden; + white-space:nowrap; + text-overflow:ellipsis; + border:none; + cursor:pointer; + text-indent:-99999px; + background:transparent; + background-size:contain; + background-repeat:no-repeat; +} +.controls button:hover, .controls button:focus { + opacity:0.5; +} +.controls button[data-state="play"] { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpFNDZDNDg2MEEzMjFFMjExOTBEQkQ4OEMzRUMyQjhERCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCNkU0NTY5NkE0MDcxMUUyQjgwQkYzQzhCMDZBRTU1NCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCNkU0NTY5NUE0MDcxMUUyQjgwQkYzQzhCMDZBRTU1NCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQzQ0QwNDBBMDJBNEUyMTFCOTZEQzYyRDgyRUVBOUZDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU0NkM0ODYwQTMyMUUyMTE5MERCRDg4QzNFQzJCOEREIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+kBUJ9AAAAXFJREFUeNrsmLtOAkEUhneQyiAdDTExGlYMBaW9oq/ge8jlUbwkthTY2EGBLehbKK0UxsQgVK7/SWbMZo3j3mbmxPAnXyi2+fIzZ3dmRBAEHucUPO6hBhUyNXAH3umxJRZgCBo/nCKCe+DVoliUN5LUCd46lFOMwk4iPCRCiDl+Ko5X3RJOm99OEcGAyVyIrFO8lEPE9jXTBNvgRq4ba6+ZuAs5nFMwy3NQdFOcRpBSBtfgk6ugykkebZoUpGyBqyxtmhZUaYFnzoKqzcukbdoUVDkGT5wFKSVwEadNV4IqR3+16VrQkxuSVRxBVzvqKija+tQl/fafyx00u7/YBxOOU0yttcEHx9fMPphy/JJQa50krdkUrIMHjruZDdBN25ppwYOsrZkSpNZ68hDFast/Bg7Bo4nDu+7g/m/Oxc6u3+YMnBY6wTEDwXvdbmYXvDi82aKrP183xZQd0LcsSktrIC9PvV+neH1HvRZ0kC8BBgADq2RhyZa7BQAAAABJRU5ErkJggg=='); +} +.controls button[data-state="pause"] { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpFNDZDNDg2MEEzMjFFMjExOTBEQkQ4OEMzRUMyQjhERCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCNzE0QzJGQUE0MDcxMUUyQjgwQkYzQzhCMDZBRTU1NCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCNzAxODM5QUE0MDcxMUUyQjgwQkYzQzhCMDZBRTU1NCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQzQ0QwNDBBMDJBNEUyMTFCOTZEQzYyRDgyRUVBOUZDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU0NkM0ODYwQTMyMUUyMTE5MERCRDg4QzNFQzJCOEREIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+r7sqzQAAANdJREFUeNrs2MEKwjAMBuDGswd9C/UdPHvy6Ft6UTyKr6RDcceawDpKHZsE2kb4Az87GOiHNLCFvPfOcs2c9ZJ/MKSrDefCaeXnQmm7M9dfpgQoDY+CsDRy9moMeKqICznGJoqHhIie/JhXvnUNmxa9KQF6I3NBfzPFANYC7uTKRtkqeyZLOyQ0dLcVPRgSAAEEEEAAAQQQwJ9ftzQ92YAHzjLKXtmT7YUVX3UA5gK+DJiaMeDNAPCaToyl9dvdTazfpMIC810QJmed3cACk7CjBrByfQQYAHwMIXlfZRgfAAAAAElFTkSuQmCC'); +} +.controls button[data-state="stop"] { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpFNDZDNDg2MEEzMjFFMjExOTBEQkQ4OEMzRUMyQjhERCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCNzAxODM5M0E0MDcxMUUyQjgwQkYzQzhCMDZBRTU1NCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCNzAxODM5MkE0MDcxMUUyQjgwQkYzQzhCMDZBRTU1NCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQzQ0QwNDBBMDJBNEUyMTFCOTZEQzYyRDgyRUVBOUZDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU0NkM0ODYwQTMyMUUyMTE5MERCRDg4QzNFQzJCOEREIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+KkF/7gAAAOFJREFUeNrsmMsKwjAQRTNdu/ELpAUR/AVdC/6nu66kK/0hFXyBj22cQCohQqDUJFO4A4cusphDmFvaIa21klyFkl7mBltszZgt8zTHiXgzDTP/cfIEp8wtoZjP3UiGBOuMci2N60RuSIjoyo9x5ql7sdPo6+QJaiG5oMGkGIKpBddmVHuy7NKwa0gK+yronYNYIdGYQQhCEIIQhCAEIThoQZIuuPpDz0XMD1b81SHFsQUvApweIcGdAMG9nxh3u1UyJ5Vvs3VmqtD6zdSE2TCHhGJH27P0L42wo4Zg5voIMAB0bCBXvSa7VQAAAABJRU5ErkJggg=='); +} +.controls button[data-state="mute"] { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpFNDZDNDg2MEEzMjFFMjExOTBEQkQ4OEMzRUMyQjhERCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBMzYxQThBMUE0MDcxMUUyQjgwQkYzQzhCMDZBRTU1NCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBMzYxQThBMEE0MDcxMUUyQjgwQkYzQzhCMDZBRTU1NCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQzQ0QwNDBBMDJBNEUyMTFCOTZEQzYyRDgyRUVBOUZDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU0NkM0ODYwQTMyMUUyMTE5MERCRDg4QzNFQzJCOEREIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+ohJkMQAAAjNJREFUeNrsmM8rRFEUx8ePxo8YokmJpMiGkIWU8mNJIZRkKcWGnfwDNgoh2ZB/gWzsKXakiSaUskP5LaMxz/fWmTqd3rx5Y96dod6pT3r33td83HPfvee9DMMwPH85MlxBV9AVjBNKkJNEzInrcpCbtI9DguMgIn8LfINrsA16QXY6BPtAmISkoETJjqmllSrBbvDJBHjcgFAM0X3g1y3YDJ7ED8tQKW0DC+BBjL0E1boEa8Cdyczw6AJV7LoYrNBa5ZKlTgtW0Foy4ghG287BLMij9hHwwfp3nRQsAmcx5OI9JFegkfr6xUwOOyGYD44s5OTNB+BZ9Ks120D9K2KWM+0KroGvOCJ2BFV4wQR4YWMuQA5l45G1d9oVDP9Szmr6VWpf2bhpal9mbet2BQ0Ngipm2LhTautkbSfpFixgm3qEUuxj976bCWamsC55o/XnoaOunNbmG3sI8+RNqRR0rNzSleJCkWLfX0vxOG0vHtrsVXpbWH/Q7CYzwYgGuSYwz6436e8Aazuym+KNJPZCGWrGJsUeGN2oi8VG3eHEUXecgOChOEEMEqqn/lXWHkjkqLMKfxLFgpq5OpZaXiwMOl1u3SYgGKBTxMsqGV5u7egoWGttFKzqGKsUJ8mSScFaoqvkb7VR8quHoR0sgnsxNij+AW0vTaEYgncWa3VPlvo6XzuHEnjtVCkdTceL+1QMwTBJbYEekJWuLwtmnz7K2NH269rA/brlCrqC/13wR4ABACa7olAORNxuAAAAAElFTkSuQmCC'); +} +.controls button[data-state="unmute"] { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpFNDZDNDg2MEEzMjFFMjExOTBEQkQ4OEMzRUMyQjhERCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBMzk2MTA2OUE0MDcxMUUyQjgwQkYzQzhCMDZBRTU1NCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBMzk2MTA2OEE0MDcxMUUyQjgwQkYzQzhCMDZBRTU1NCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQzQ0QwNDBBMDJBNEUyMTFCOTZEQzYyRDgyRUVBOUZDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU0NkM0ODYwQTMyMUUyMTE5MERCRDg4QzNFQzJCOEREIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+LD0czAAAARZJREFUeNrsly8LAkEQxW/lksUgGMxWs8VgEdRgEMwmv4Lfw2TwawgaxGI2WQ0Gm0WDBv+db3SFK4K3nnMjzIMfF/exzHs7Z4Ig8CQr5QmXGlSDf2fQGONKz8kh1UwUHNUBt6hnPc5jMNgEl+ddyDNYAQcy52rQRD2U5ulDFcEcZELjZKSkuACmYXOSaiYPxiAnsQfpxib2BsUVdRqM7Owl+pL0wemVzBCU1nLc8+KS4jM+vuOjwJJi32OUbjNqUA3+wOBVusGB3e9YFOe6RU/dDJSSLup3OoIaWEoOyQ40wFpyijegCraSa2YF6mAvuQcXoGVXM7FFTaluf9WdTD/uXdcfd67dbgiyLEWty4IaVIPCdBdgAJkkaR2v57S0AAAAAElFTkSuQmCC'); +} +.controls button[data-state="volup"] { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpFNDZDNDg2MEEzMjFFMjExOTBEQkQ4OEMzRUMyQjhERCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCNzU1OEJFREE0MDcxMUUyQjgwQkYzQzhCMDZBRTU1NCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCNzU1OEJFQ0E0MDcxMUUyQjgwQkYzQzhCMDZBRTU1NCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQzQ0QwNDBBMDJBNEUyMTFCOTZEQzYyRDgyRUVBOUZDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU0NkM0ODYwQTMyMUUyMTE5MERCRDg4QzNFQzJCOEREIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+1Pk2GwAAAQ9JREFUeNrsmL0KwjAQgHMOiogIPoLSQR9CcdDRxclXLIrg2mdSsYK41HjBVEJsM6XNld7BR6GF9mu4y8+BlFJQjo6gHmoEc3REyAG5qcc1cUViZPrnZAnOahazuSATl+A5oFxObDqBWSQA8MRLP3DWpeg0+jlZgpJIXUBjqrg1gmuVIRY7Hy/2lYNQ8vMZ5Rx8cw6yYNsENwVTCZRUsFndOQNkrNlXMc2A54HJKC91Peo52PUt+KBeJENk4fG7SwprsdA7ZN4PsiALVrny+BJcFdzbUtry87GzMYIvAk6pSzAhIJjYCWl2t+YibPtN9QkjV/tNheoRnvRQ1yV2R47i2zwVpe03rmIWDBAfAQYAByYx7rBsQ/AAAAAASUVORK5CYII='); +} +.controls button[data-state="voldown"] { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpFNDZDNDg2MEEzMjFFMjExOTBEQkQ4OEMzRUMyQjhERCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCNzU1OEJGMUE0MDcxMUUyQjgwQkYzQzhCMDZBRTU1NCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCNzU1OEJGMEE0MDcxMUUyQjgwQkYzQzhCMDZBRTU1NCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQzQ0QwNDBBMDJBNEUyMTFCOTZEQzYyRDgyRUVBOUZDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU0NkM0ODYwQTMyMUUyMTE5MERCRDg4QzNFQzJCOEREIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+B37OGAAAANpJREFUeNrs2MEKwjAMBuDGk0efwSGCr6FXfU/FHeZV30hQ50U8dSmsMiLUCV0b5Q/87DDYPspCRshaazTXyGgvd4I+bc05e87V3U6UC2fLKd5MArhIDJM5c6Yh4CEjzmfXNVG3SYjowZdx5q+uZtPkZRJAq6Qv6Ge6GEAAAQQQwP61csMmUpZ9X/rNqKPYEw2j7p+BNARwHek7dM/YDNEk+B9EkwAIIIAAfgY+FZjuIeBJAfAo555cv91Mvs2W2xMWofWbR1btUaeC1ZySM5OHRthRA5i5GgEGAJmoHqaNWADvAAAAAElFTkSuQmCC'); +} +.controls button[data-state="go-fullscreen"] { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpFNDZDNDg2MEEzMjFFMjExOTBEQkQ4OEMzRUMyQjhERCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCM0M2OUNCREE0MDcxMUUyQjgwQkYzQzhCMDZBRTU1NCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCM0M2OUNCQ0E0MDcxMUUyQjgwQkYzQzhCMDZBRTU1NCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQzQ0QwNDBBMDJBNEUyMTFCOTZEQzYyRDgyRUVBOUZDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU0NkM0ODYwQTMyMUUyMTE5MERCRDg4QzNFQzJCOEREIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+cU+iTAAAAZBJREFUeNrs2D9OwzAUBvC6iMMgBgYGpLIxIqYS0cPQKkOIuBErZ2DiDnQoHVBpaQnPEpUs13+e/T5LHfKkb6mr+BfHbh2rrusGx1yqB0pLA83ojyKpBd09xa5/4EkE1oAxaUoBa+CDa7jAIfOCv5R3IPCVskXPQX3BBwDuhvKFesRrMNKF2+UC9Zy7onw6kBMQTg/ArTknuUBzQSCQXpzRb8MFularBBkaObvvhgP0VQ4yiHMtUgkwFRnFlQCGkFUqrhTQhZxTLoz2e8omhisJNJE2zkZ6cRzgwXZLKZWK/Ka8edo1ckV5CQGT9oOJQMh2L1TDwZGXFDimXAbazykj9I6aW9X/Ilh4kBr3QVlSrnMXSS6wsn5GbOQet2/3IksAbZwLMGZ8pwhQ4344HTNvBAr04UaS0c4BtiAcC2n1/cjdsLYgXBRp9DtN3fK3IBxnJKe5L007EC6EXKFe3JfifwU/UgzcgHAmcos8WTil3AGBZ5STEqdbzwDcrOTplhQ5Sz1+609Ye2APjNSfAAMAv4p3Pa/O/tsAAAAASUVORK5CYII='); +} +.controls button[data-state="cancel-fullscreen"] { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpFNDZDNDg2MEEzMjFFMjExOTBEQkQ4OEMzRUMyQjhERCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCM0M2OUNCOUE0MDcxMUUyQjgwQkYzQzhCMDZBRTU1NCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCMzlFNDkzMUE0MDcxMUUyQjgwQkYzQzhCMDZBRTU1NCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQzQ0QwNDBBMDJBNEUyMTFCOTZEQzYyRDgyRUVBOUZDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU0NkM0ODYwQTMyMUUyMTE5MERCRDg4QzNFQzJCOEREIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+1VELOwAAAadJREFUeNrs2EtOwzAQBuAEOAEIKsQluAAbGqSGHRIrEKveoQEWNOF0SFyGZ6GkwowlWwpm7IwdT8kiI/2LWk39yY4faiqESPpcG0nPq/fARE5xM0btrIGw7fQ4gJeQJ8gRI24MeYac+wIvICv5fcgrE1Li3lUftUZSgAeQhXpQMCGbOJ03yC51BM8gSyYkhpN95b7voA+yQtpukLbMgjsNWSRUZKXa/2wQBjJzjVwosA1ZNdowoMwtFRcKtCHNzzagsDybk/ZlItCGpAJJuK5AjVx1ANYuHAb0PYsPIZsdtpgt9RvRzuIEWa1dp1hYtqBOU3zf0qEvUK/uVmBqotI0/ffb1XBhHYBIlQyL5Dr2NlNGBBZcJ0kZAVhwniQP6qgLrS/II9dJMoF8RhhBee06jj3FGK72ANYIchwLiOFkByeQOQFYqCv9koL0BeYOnK65AzgzfgtDZqFACk7XHdI2Q9pakVTgxAPnW7lruinAfcgHE86FfIHsUUdwCvlmwmFIubde+b6DU/V3BAeuiVxoXMgqHq3hwjLyulEP98EBOAB/148AAwA7RI/R8UopbwAAAABJRU5ErkJggg=='); +} +.controls progress { + display:block; + width:100%; + height:81%; + margin-top:2px; + margin-top:0.125rem; + border:none; + overflow:hidden; + -moz-border-radius:2px; + -webkit-border-radius:2px; + border-radius:2px; + color:#0095dd; /* Internet Explorer uses this value as the progress bar's value colour */ +} +.controls progress[data-state="fake"] { + background:#e6e6e6; + height:65%; +} +.controls progress span { + width:0%; + height:100%; + display:inline-block; + background-color:#2a84cd; +} + +.controls progress::-moz-progress-bar { + background-color:#0095dd; +} +/* Chrome requires its own rule for this, otherwise it ignores it */ +.controls progress::-webkit-progress-value { + background-color:#0095dd; +} + +/* fullscreen */ +html:-ms-fullscreen { + width:100%; +} +:-webkit-full-screen { + background-color:transparent; +} +video:-webkit-full-screen + .controls { + background:#ccc; /* required for Chrome which doesn't heed the transparent value set above */ +} +video:-webkit-full-screen + .controls progress { + margin-top:0.5rem; +} + +/* hide controls on fullscreen with WebKit */ +figure[data-fullscreen=true] video::-webkit-media-controls { + display:none !important; +} +figure[data-fullscreen=true] { + max-width:100%; + width:100%; + margin:0; + padding:0; + max-height:100%; +} +figure[data-fullscreen=true] video { + height:auto; +} +figure[data-fullscreen=true] figcaption { + display:none; +} +figure[data-fullscreen=true] .controls { + position:absolute; + bottom:2%; + width:100%; + z-index:2147483647; +} +figure[data-fullscreen=true] .controls li { + width:5%; +} +figure[data-fullscreen=true] .controls .progress { + width:68%; +} + +/* Media Queries */ +@media screen and (max-width:1024px) { + figure { + padding-left:0; + padding-right:0; + height:auto; + } + .controls { + /* we want the buttons to be proportionally bigger, so give their parent a set height */ + height:30px; + height:1.876rem; + } +} +@media screen and (max-width:42.5em) { + .controls { + height:auto; + } + .controls > * { + display:block; + width:16.6667%; + margin-left:0; + height:40px; + height:2.5rem; + margin-top:2.5rem; + } + .controls .progress { + /*display:table-caption;*/ /* this trick doesn't work as elements are floated and the layout doesn't work */ + position:absolute; + top:0; + width:100%; + float:none; + margin-top:0; + } + .controls .progress progress { + width:98%; + margin:0 auto; + } + .controls button { + background-position:center center; + } + figcaption { + text-align:center; + margin-top:0.5rem; + } +} \ No newline at end of file diff --git a/marsblog.html b/marsblog.html index 2a7d693..9b53619 100644 --- a/marsblog.html +++ b/marsblog.html @@ -1,170 +1,294 @@ - - - - - (-(-_(-_-)_-)-) Thaka's MarsBlog (-(-_(-_-)_-)-) - - - - - -
- - - -
- -
- - -
- -
- - - - - - -
-

GeeksforGeeks

-

Embedding the PDF file Using Object Tag

- - -
- - - -
Future · Future - Jumpin on a Jet
- - -

Main heading

-

Subheading

-

Sub-subheading

-

sub-sub-subheading

-
sub-sub-sub-subheading
-
sub-sub-sub-sub-subheading
- - - Future i got in trouble with them male dancers an im really distracted about the scope... can i use this instumental someday for a #NasaMars presentation im working on? ? ? (Thugga) -
alilmilk · Future - Red Carpet (feat. Young Thug) [Prod. By Wheezy]
- - - Hi hun, i dont want u to feel like rentpath wherever we make it to the lab. Help me accept you for all you are - #Shaadi -
Kash Doll · No Lames (feat. Summer Walker)
- The Global CTX Mosaic - of Mars - USGS-NASA Planetary Geologic Mapping Program ::Interactive Maps: Mars - - - - -
- -
-
-
-
- - - - - - -
CassBeats · 4. Jadakiss - Keep It 100
- Girl in a jacket -
-
Jiah · halo
-
-
-
-
- ##BUBBLEGUM_POP##IS_HERE_TO_STAY -
-
-
-
- Girl in a jacket - -
-
-
-
- - -
body {
-      margin: 0px 0px 0px 0px;
-      padding: 0px 0px 0px 0px;
-      font-family: verdana, arial, helvetica, sans-serif;
-      color: #ccc;
-      background-color: #333;
-      text-align: center;
-      /* part 1 of 2 centering hack */
-      }
-    #content {
-      width: 400px; 
-      padding: 10px;
-      margin-top: 20px;
-      margin-bottom: 20px;
-      margin-right: auto;
-      margin-left: auto; 	
-      /* opera does not like 'margin:20px auto' */
-      background: #666;
-      border: 5px solid #ccc;
-      text-align:left; 
-      /* part 2 of 2 centering hack */
-      width: 400px; /* ie5win fudge begins */
-      voice-family: "\"}\"";
-      voice-family:inherit;
-      width: 370px;
-      }
-    html>body #content {
-      width: 370px; /* ie5win fudge ends */
-      }
-    
- -

[full css]

- -
- - - - - - + + + + + (-(-_(-_-)_-)-) Thaka's MarsBlog (-(-_(-_-)_-)-) + + + + + +
+ + + +
+ +
+ + +
+ +
+ + + + + + + + + + js-dos api + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +

Ghost in the Shell

+
+ +
+ + +
+ + + +
+ + + + +
+
+ © 攻殻機動隊 | + Ghost in the Shell: SAC_03 +
+
+ + + + +
+ +
+
+
+
+ + +
+
+
+
+
+

Aesop's Fables is a collection of tales by the Greek storyteller Aesop. Most of the tales included here were translated and edited by Reverend George Fyler Townsend (1814-1900) in England and published under the title, Aesop's Fables.

+ Read More##LiT_To_Go## +
+
+ + + + +
Future · Future - Jumpin on a Jet
+ + +

Main heading

+

Subheading

+

Sub-subheading

+

sub-sub-subheading

+
sub-sub-sub-subheading
+
sub-sub-sub-sub-subheading
+ + + Future i got in trouble with them male dancers an im really distracted about the scope... can i use this instumental someday for a #NasaMars presentation im working on? ? ? (Thugga) +
alilmilk · Future - Red Carpet (feat. Young Thug) [Prod. By Wheezy]
+ + + Hi hun, i dont want u to feel like rentpath wherever we make it to the lab. Help me accept you for all you are - #Shaadi +
Kash Doll · No Lames (feat. Summer Walker)
+ The Global CTX Mosaic + of Mars + USGS-NASA Planetary Geologic Mapping Program ::Interactive Maps: Mars + + + + +
+ +
+
+
+
+ + + + + + +
CassBeats · 4. Jadakiss - Keep It 100
+ Girl in a jacket +
+
Jiah · halo
+
+
+
+
+ ##BUBBLEGUM_POP##IS_HERE_TO_STAY +
+
+
+
+ Girl in a jacket + +
+
+
+
+ + +
body {
+        margin: 0px 0px 0px 0px;
+        padding: 0px 0px 0px 0px;
+        font-family: verdana, arial, helvetica, sans-serif;
+        color: #ccc;
+        background-color: #333;
+        text-align: center;
+        /* part 1 of 2 centering hack */
+        }
+    #content {
+        width: 400px; 
+        padding: 10px;
+        margin-top: 20px;
+        margin-bottom: 20px;
+        margin-right: auto;
+        margin-left: auto; 	
+        /* opera does not like 'margin:20px auto' */
+        background: #666;
+        border: 5px solid #ccc;
+        text-align:left; 
+        /* part 2 of 2 centering hack */
+        width: 400px; /* ie5win fudge begins */
+        voice-family: "\"}\"";
+        voice-family:inherit;
+        width: 370px;
+        }
+    html>body #content {
+        width: 370px; /* ie5win fudge ends */
+        }
+    
+ +

[full css]

+ +
+ + + + + \ No newline at end of file diff --git a/marsblog1.css b/marsblog1.css new file mode 100644 index 0000000..3a4e94f --- /dev/null +++ b/marsblog1.css @@ -0,0 +1,351 @@ +@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;1,300;1,400&family=Noto+Emoji:wght@300;500&family=Quicksand:wght@300;500;600;700&family=Red+Hat+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Anybody:wght@900&family=Fredoka+One&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Rubik+Burned&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap'); + +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; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +/* ---------------------------------- #StartStyle */ +body { + +} +pre {padding:15px; +color:white;} + + + + +html { + background: url(https://mars.nasa.gov/mars2020-raw-images/pub/ods/surface/sol/01073/ids/edr/browse/ncam/NLF_1073_0762203930_824ECM_N0501618NCAM02073_10_195J01_1200.jpg) no-repeat center center fixed; + line-height: 1.5; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; + +} +a, +a:hover, +a:visited a:hover { + color: #c9ff23; + padding: 10px; +} + +a { + color: #63c0f5; + text-shadow: 0 0 5px rgba(104, 182, 255, 0.5); +} +/* contentDiv */ +#content { + border-radius: 31px 31px 31px 31px; + max-width: 900px; + padding: 0px; + margin-bottom: 40px; + margin-right: auto; + margin-left: auto; + /* opera does not like 'margin:20px auto' */ + /* background: #666; */ + border: 19px solid #DB362D; + text-align:left; + /* part 2 of 2 centering hack */ + width: 50%; /* ie5win fudge begins */ + voice-family: "\"}\""; + voice-family:inherit; + overflow: hidden; + box-shadow: rgba(219,54,45, 0.4) 5px 5px, rgba(219,54,45, 0.3) 10px 10px, rgba(219,54,45, 0.2) 15px 15px, rgba(219,54,45, 0.1) 20px 20px, rgba(219,54,45, 0.05) 25px 25px; + font-family: "Comfortaa", -apple-system, Ubuntu, "Ariel Black", Verdana; + + } + + + img { + max-width: 100%; + max-height: 100%; + + box-shadow: rgba(219,54,45, 0.5) 0px 50px 100px -20px, rgba(0, 0, 0, 0.7) 0px 30px 60px -30px; +} + +.twoPanelSpread { + + + /* For browsers that do not support gradients */ + /* background-image: linear-gradient(to right, #e66250, #ff80cc); */ + margin: 0px; + padding: 0px; + background: url( https://raw.githubusercontent.com/ThakaRashard/bubblegumpop/gh-pages/img/810MATRiX.webp ) + center repeat; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 100%; +} +#headerMargins +{ + margin-bottom:-27px; + +} +.panelColumn { + display: flex; + flex-direction: column; + flex-basis: 100%; + flex: 1; + overflow: hidden; +} + + +.leftColumn { +/* background-color: #2470FF; */ + width: 100%; +} + +.leftColumn img { + + flex-shrink: 0; + min-width: 100%; + min-height: 100%; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden + +} + +.rightColumn { + +} +.rightColumn img { + + flex-shrink: 0; + min-width: 100%; + min-height: 100%; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden +} +.top-container { + + padding: 0px; + align-content: center; + border-radius: 31px 0px 31px 0px; + max-width: 900px; + padding: 15px; + margin-right: auto; + margin-left: auto; + /* opera does not like 'margin:20px auto' */ + /* background: #666; */ + width: 50%; /* ie5win fudge begins */ + text-align:left; +} + + +/* FLEX_BOX_FOR_3_IMAGES */ +.flex-container { + + display: flex; + align-items: stretch; + flex-flow: row nowrap; + flex-direction: row; + flex-wrap: nowrap; + justify-content: center; + align-content: stretch; + height: 100%; + padding: 15px; + gap: 5px; + + } + + .flex-container > div{ + + border: 1px solid #c9ff23; + border-radius: 1px; + padding: 8px; + } + +#row_image { + /* position: fixed; */ /* border-radius: 55px 55px 0px 0px; */ + width: 100%; + display: flex; + border-bottom: 10px solid #DB362D; + justify-content: center; + max-width: 100%; + padding: 0px; + max-height: 100%; + background-image: url("https://raw.githubusercontent.com/ThakaRashard/bubblegumpop/gh-pages/img/810MATRiX.webp"); + background: url( https://raw.githubusercontent.com/ThakaRashard/bubblegumpop/gh-pages/img/810MATRiX.webp ) + center repeat; + background-repeat: repeat; + } +*/ + +#round {border-radius: 31px 31px 0px 0px;} +img { + +} + + +.sticky { + position: fixed; + top: 0; + width: 100%; + border-bottom: 10px solid #DB362D; +} + +.sticky + .content { + padding-top: 102px; +} + + +.firstcharacter { + color: #fff; + text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0fa, + 0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa; + float: left; + font-size: 75px; + line-height: 60px; + padding-top: 7px; + padding-right: 8px; + padding-left: 3px; +} + +.neonText { + color: #fff; + text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0fa, + 0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa; + +} + +gradient-text { + + box-shadow: rgba(219,54,45, 0.4) 5px 5px, rgba(219,54,45, 0.3) 10px 10px, rgba(219,54,45, 0.2) 15px 15px, rgba(219,54,45, 0.1) 20px 20px, rgba(219,54,45, 0.05) 25px 25px; + +} +svg { + filter: drop-shadow(11px 1px 1px rgb(219 54 45 / 0.6)); +} + +@import "compass/css3"; +*, :before, :after { + box-sizing: border-box; +} +.unstyled { + list-style: none; + padding: 0; + margin: 0; +} +.unstyled a { + text-decoration: none; +} +.list-inline { + overflow: hidden; +} +.list-inline li { + float: left; +} +.header { + position: fixed; + left: 0; + top: 0; + bottom: 0; + width: 1117.5em; + background: #DB362D; +} + +.social-links { + border-bottom: solid 1px #DB362D; + + margin-bottom 15px; +} +.social-links li { + width: 25%; + border-left: solid 1px #DB362D; +} +.social-links li:first-child { + border: none; +} +.social-links a { + display: block; + height: 5.5em; + text-align: center; + color: white; + font: 0.75em/5.5em "Comfortaa", -apple-system, Ubuntu, "Ariel Black", Verdana; + +} +.social-links a:hover { + color: #DB362D; +} +.list-hover-slide li { + position: relative; + overflow: hidden; +} +.list-hover-slide a { + display: block; + position: relative; + z-index: 1; + background-repeat: no-repeat, repeat; + background-size: cover; + background-image: url("https://mars.nasa.gov/mars2020-raw-images/pub/ods/surface/sol/00443/ids/edr/browse/fcam/FLF_0443_0706278634_263ECM_N0250214FHAZ02008_10_085J01_1200.jpg"); + transition: 0.35s ease color; +} +.list-hover-slide a:before { + content: ''; + display: block; + z-index: -1; + position: absolute; + left: -100%; + top: 0; + width: 100%; + height: 100%; + border-right: solid 5px #c9ff23; + background: #DB360D; + transition: 0.35s ease left; +} +.list-hover-slide a.is-current:before, .list-hover-slide a:hover:before { + left: 0; +} diff --git a/marsblog1.html b/marsblog1.html new file mode 100644 index 0000000..2a7d693 --- /dev/null +++ b/marsblog1.html @@ -0,0 +1,170 @@ + + + + + (-(-_(-_-)_-)-) Thaka's MarsBlog (-(-_(-_-)_-)-) + + + + + +
+ + + +
+ +
+ + +
+
+
+ + + + + + +
+

GeeksforGeeks

+

Embedding the PDF file Using Object Tag

+ + +
+ + + +
Future · Future - Jumpin on a Jet
+ + +

Main heading

+

Subheading

+

Sub-subheading

+

sub-sub-subheading

+
sub-sub-sub-subheading
+
sub-sub-sub-sub-subheading
+ + + Future i got in trouble with them male dancers an im really distracted about the scope... can i use this instumental someday for a #NasaMars presentation im working on? ? ? (Thugga) +
alilmilk · Future - Red Carpet (feat. Young Thug) [Prod. By Wheezy]
+ + + Hi hun, i dont want u to feel like rentpath wherever we make it to the lab. Help me accept you for all you are - #Shaadi +
Kash Doll · No Lames (feat. Summer Walker)
+ The Global CTX Mosaic + of Mars + USGS-NASA Planetary Geologic Mapping Program ::Interactive Maps: Mars + + + + +
+ +
+
+
+
+ + + + + + +
CassBeats · 4. Jadakiss - Keep It 100
+ Girl in a jacket +
+
Jiah · halo
+
+
+
+
+ ##BUBBLEGUM_POP##IS_HERE_TO_STAY +
+
+
+
+ Girl in a jacket + +
+
+
+
+ + +
body {
+      margin: 0px 0px 0px 0px;
+      padding: 0px 0px 0px 0px;
+      font-family: verdana, arial, helvetica, sans-serif;
+      color: #ccc;
+      background-color: #333;
+      text-align: center;
+      /* part 1 of 2 centering hack */
+      }
+    #content {
+      width: 400px; 
+      padding: 10px;
+      margin-top: 20px;
+      margin-bottom: 20px;
+      margin-right: auto;
+      margin-left: auto; 	
+      /* opera does not like 'margin:20px auto' */
+      background: #666;
+      border: 5px solid #ccc;
+      text-align:left; 
+      /* part 2 of 2 centering hack */
+      width: 400px; /* ie5win fudge begins */
+      voice-family: "\"}\"";
+      voice-family:inherit;
+      width: 370px;
+      }
+    html>body #content {
+      width: 370px; /* ie5win fudge ends */
+      }
+    
+ +

[full css]

+ +
+ + + + + +