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
-
-
-
-
-
-
-
-
-
-
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)
-
-
-
- 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
-
-
The Global CTX Mosaic
- of Mars
-
USGS-NASA Planetary Geologic Mapping Program ::Interactive Maps: Mars
-
-
-
-
-
- Download the
- or
- MP4
- video.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
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 */
- }
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+ (-(-_(-_-)_-)-) Thaka's MarsBlog (-(-_(-_-)_-)-)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
js-dos api
+
+
+
+
+
+
Make fullscreen
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Ghost in the Shell
+
+
+
+
+
+
+ Download MP4
+
+
+
Play/Pause
+
Stop
+
+
Mute/Unmute
+
Vol+
+
Vol-
+
Fullscreen
+
+
+ © 攻殻機動隊 |
+ 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.
+
+
+ The embedded audio player requires a modern internet browser. You should visit Browse Happy and update your internet browser today!
+
+
Read More##LiT_To_Go##
+
+
+
+
+
+
+
+
+
+
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)
+
+
+
+ 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
+
+
The Global CTX Mosaic
+ of Mars
+
USGS-NASA Planetary Geologic Mapping Program ::Interactive Maps: Mars
+
+
+
+
+
+ Download the
+ or
+ MP4
+ video.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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 */
+ }
+
+
+
+
+
+
+
+
+
+
\ 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
+
+
+
+
+
+
+
+
+
+
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)
+
+
+
+ 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
+
+
The Global CTX Mosaic
+ of Mars
+
USGS-NASA Planetary Geologic Mapping Program ::Interactive Maps: Mars
+
+
+
+
+
+ Download the
+ or
+ MP4
+ video.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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 */
+ }
+
+
+
+
+
+
+
+
+
+
+