<!DOCTYPE html>

<head>

<title>Squaremagie Space</title>

<style>

img {

max-width: 100%;

height: auto;

}

</style>

</head>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

/* ! important to have "centre" into page instead for only "body" ! */

/* ! important to have body forth in the page display - forth=draw up text, layout design ! */

#pageBody {

grid-area: start;

}

.start div {

grid-area: auto;

}

centre.forth, body {

display: page content;

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

background-repeat: no-repeat;

background-size: 100% 100%;

display: flex!important;

justify-content: center;

align-items: center;

float: center;

width: 100%;

min-height: 100vh;

max-width: auto;

max-height: 100%;

}

/* ! important to have id: "top" instead for header and id: "down" instead for footer - "main"=article content, "nav"=navigation inline, "sms"=squaremagie space ! */

.page {

display: grid;

grid-template-areas:

"top above above"

"nav main sms"

"inline content space"

"left center right" !important; /* ! inportand to have colon ";" after the template in grid-template-area: otherwise the site will collapse, "template"=mould, pattern, design, model ! */

grid-template-rows: auto 1fr auto;

grid-template-columns: 16% 1fr 16%;

grid-gap: 0px; /* --! pixel will give space between layout grid-section !-- */

grid-column-gap: 8px;

grid-row-gap: 5px;

padding: 10px;

padding-bottom: 8px;

background: linear-gradient(135deg, #1e3c72 0%, deepskyblue 100%)!important;

width: 100%;

min-height: 100vh;

max-width: auto;

max-height: 100%;

position: hidden; /* --! position on "fixed" if scrollbar in sidenav and/or sidesms, otherwise position off "hidden", coding with micke. !-- */

overflow-y: auto;

margin: 0;

}

/* Building responsive layouts for tablets */

@media (max-width: 1024px) {

.page {

display: grid;

grid-template-areas:

"top above above"

"nav main sms"

"inline content space"

"left center right";

grid-template-rows: auto 1fr auto;

grid-template-columns: 16% 1fr 16%;

grid-gap: 0px; /* --! pixel will give space between layout grid-section !-- */

grid-column-gap: 8px;

grid-row-gap: 5px;

padding: 10px;

padding-bottom: 8px;

background: linear-gradient(135deg, #1e3c72 0%, deepskyblue 100%)!important;

width: 100%;

min-height: 100vh;

max-width: auto;

max-height: 100%;

position: hidden; /* --! position on "fixed" if scrollbar in sidenav and/or sidesms, otherwise position off "hidden", coding with micke. !-- */

overflow-y: auto;

}

.header h1 {

font-size: 12px;

margin-bottom: 4px;

}

.main {

padding: 10px 5px;

}

/* Building responsive layouts for mobile devices */

@media (max-width: 768px) {

.page {

display: grid;

grid-template-areas:

"top above above"

"nav main sms"

"inline content space"

"left center right";

grid-template-rows: auto 1fr auto;

grid-template-columns: 16% 1fr 16%;

background: linear-gradient(135deg, #1e3c72 0%, deepskyblue 100%);

grid-gap: 10px;

padding: 10px;

min-height: 100vh;

max-width: auto;

max-height: 100%;

margin: 0;

}

.header h1 {

font-size: 12px;

margin-bottom: 4px;

}

.main {

padding: 8px 4px;

}

/* ! "ads"=advertisign space ==> "sms"=squaremagie space ! */

/* coding Responsive layout with micke - top header - "above"=upper part of the body, top head of document, grid-area shold indicate orange (vsc) and red (brackets). */

#pageHeader {

grid-area: top;

}

.top div {

grid-area: flex;

}

.top, header {

grid-area: top;

grid-column: 1 / 2 1fr !important;

grid-row: 1 / 2 !important;

background: linear-gradient(135deg, #1e3c72 0%, deeppink 100%);

font-family: 'montserrat', sans-serif;

color: white;

padding: 2px 10px;

border-radius: 12px;

max-width: auto;

max-height: 100%;

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);

}

.top.above, header {

grid-area: above;

grid-column: 1fr 3 / 4 !important;

grid-row: 1 / 2 !important;

background: linear-gradient(135deg, #1e3c72 0%, deeppink 100%);

font-family: 'montserrat', sans-serif;

color: white;

padding: 2px 10px;

border-radius: 12px;

max-width: auto;

max-height: 100%;

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);

}

.above p {

font-family: 'montserrat', sans-serif;

font-size: 1.15vw;

line-height: 1.25vw;

text-align: center;

padding-bottom: 0.4vw;

margin-top: 3.25%;

}

/* coding Responsive layout with micke - top header, grid-area shold indicate red (brackets). */

/* coding responsive "main"=article content text with micke, grid-area shold indicate orange (vsc). */

#mainArticle {

grid-area: middle;

}

.middle div {

grid-area: center;

}

.main, article {

grid-area: content;

grid-column: 1fr !important;

grid-row: 1fr !important;

font-family: 'Arial', 'Helvetica', sans-serif;

background: black;

background-repeat: no-repeat;

background-size: 100% 100%;

justify-content: center;

align-items: center;

min-height: 100vh;

max-width: auto;

max-height: 100%;

margin-bottom: 0%;

padding: 2%;

padding-bottom: 2%;

border-radius: 8px;

border-bottom: none;

position: relative;

box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);

}

.font h1{

color: white;

font-size: 1.6vw;

text-align: left;

margin-bottom: 0vw;

border-bottom: none;

margin-top: 0px;

}

.font h2{

color: white;

font-size: 1vw;

text-align: left;

margin-bottom: 0vw;

border-bottom: none;

margin-top: 1%;

}

.font h3{

color: white;

font-size: 0.9vw;

text-align: left;

font-weight: none; /* font-weight: bold; -> big character, coding with micke */

text-transform: none; /* text-transform: uppercase; -> big character, coding with micke */

border-bottom: none;

padding: 0px;

margin-top: 1%;

}

.font h4{

color: white;

font-size: 0.8vw;

text-align: left;

padding-bottom: 2px;

margin-top: 1%;

margin-bottom: 0%;

}

.font h5 {

color: blueviolet; /* reserva font h5, coding with micke */

font-size: 1vw;

text-align: left;

padding-left: 0px;

margin-bottom: 5px;

margin-top: 0%;

border-bottom: 3px solid #667eea;

}

.font p{

color: white;

font-size: 0.62vw;

text-align: left;

line-height: 0.6vw;

margin-top: 1%;

border-bottom: none;

}

#menuSection {

grid-area: center;

}

.mac-menu {

font-style: normal; /* "mac"=main article content, coding with micke */

}

.mac-section {

background: linear-gradient(135deg, #f093fb 10%, #f5576c 90%);

padding: 8px;

border-radius: 8px;

margin: 4px 4px;

margin-top: 0%;

margin-bottom: 1.4%;

border-left: 4px solid #667eea;

}

.mac-section:hover {

background: white;

padding: 8px;

border-radius: 8px;

margin: 4px 4px;

margin-top: 0%;

margin-bottom: 1.4%;

border-left: 4px solid #667eea;

}

.mac-section.active {

background: lightgoldenrodyellow;

padding: 8px;

padding-left: 10px;

border-radius: 8px;

margin: 4px 4px;

margin-top: 0%;

margin-bottom: 1.4%;

border-left: none;

}

.mac-section h1 {

font-family: 'calibri', sans-serif;

color: #667eea;

font-size: 1vw;

line-height: 1.2;

text-align: left;

text-decoration: none;

font-weight: bold; /* font-weight: bold; -> big character, coding with micke */

text-transform: uppercase; /* text-transform: uppercase; -> big character, coding with micke */

padding-left: 0%;

margin-top: 0px;

margin-bottom: 0px;

}

.mac-section h2 {

font-family: 'calibri', sans-serif;

color: #f5576c;

font-size: 1vw;

line-height: 1.2;

text-align: left;

padding-left: 0%;

text-decoration: none;

font-weight: none; /* font-weight: bold; -> big character, coding with micke */

text-transform: none; /* text-transform: uppercase; -> big character, coding with micke */

margin-top: 0px;

margin-bottom: 0px;

}

.mac-section p {

font-family: 'calibri', sans-serif;

color: black;

font-size: 0,8vw;

line-height: 1vw;

text-align: left;

padding: 0px;

padding-bottom: 0px;

}

/* coding responsive "main"=article content text with micke, grid-area shold indicate red (brackets). */

/* coding Responsive layout with micke sidebar-left. "nav"=navigation inline ! grid-area shold indicate red. */

#navAside {

grid-area: left;

}

.left div {

grid-area: flex;

}

.sidenav, aside {

grid-area: inline;

grid-column: 1 / 2 1fr !important;

grid-row: 1fr !important;

font-family: 'montserrat', sans-serif;

background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);

padding: 10%;

border-radius: 12px;

max-width: auto;

max-height: 100%;

overflow-y: hidden; /* --! overflow-y on "scroll" if scrollbar in sidenav, otherwise overflow off "hidden", coding with micke. !-- */

box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);

}

.sidenav h2 {

color: blue;

font-size: 1.15vw;

text-align: center;

padding-top: 4%;

padding-bottom: 3%;

max-width: auto;

max-height: 100%;

margin-top: 0%;

border-bottom: 3px solid #667eea;

}

.sidenav p {

color: blue;

font-size: 1vw;

text-align: center;

line-height: 1;

margin-top: 0%;

}

.sidenav ul {

list-style: none;

padding: 4% 0%;

}

.sidenav li {

color: greenyellow;

font-size: 0.75vw;

padding: 12px 8px;

margin-bottom: 8px;

border-radius: 8px;

cursor: pointer;

transition: all 0.3s ease;

}

.sidenav li:hover {

background: #667eea;

color: white;

transform: translateX(5px);

box-shadow: 0 6px 8px 0 rgba(0,0,0,0.3)

}

#menuAside {

grid-area: left;

}

.left div {

grid-area: flex;

}

.nav-menu {

list-style: none;

}

.nav-item {

background: linear-gradient( 135deg, #667eea 0%, deeppink 100%);

display: flex;

align-items: center;

grid-gap: 12px;

}

.nav-item:hover {

background: rgba(255, 255, 255, 0.15);

transform: translateX(8px);

}

.nav-item.super {

background: linear-gradient( 135deg, #667eea 0%, deepskyblue 100%);

}

.nav-item.active {

background: linear-gradient( 135deg, #667eea 0%, blueviolet 100%);

}

/* coding Responsive layout with micke sidebar-left. "nav"= navigation inline ! grid-area shold indicate red. */

/* coding Responsive layout with micke sidebar-right. "sms"=squaremagie space ! grid-area shold indicate red.*/

#smsAside {

grid-area: right;

}

.right div {

grid-area: flex;

}

.sidesms, aside {

grid-area: space;

grid-column: 1fr 3 / 4 !important;

grid-row: 1fr !important;

font-family: 'montserrat', sans-serif;

background: linear-gradient( 135deg, #667eea 0%, purple 100%);

padding: 10%;

border-radius: 12px;

max-width: auto;

max-height: 100%;

overflow-x: hidden;

overflow-y: hidden; /* --! overflow-y on "scroll" if scrollbar in sidesms, otherwise overflow off "hidden", coding with micke. !-- */

box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);

}

.sidesms h2 {

color: white;

font-size: 1.15vw;

text-align: center;

padding-top: 4%;

padding-bottom: 3%;

max-width: auto;

max-height: 100%;

margin-top: 0%;

border-bottom: 3px solid blueviolet;

}

.sidesms p {

color: white;

font-size: 0.9vw;

text-align: center;

line-height: 1vw;

margin-top: 0%;

}

.sidesms ul {

list-style: none;

padding: 4% 0%;

}

.sidesms li {

color: black;

font-size: 0.75vw;

padding: 12px 8px;

margin-bottom: 8px;

border-radius: 8px;

cursor: pointer;

transition: all 0.3s ease;

}

.sidesms li:hover {

background: #667eea;

color: white;

transform: translateX(5px);

box-shadow: 0 6px 8px 0 rgba(0,0,0,0.3)

}

#menuAside {

grid-area: right;

}

.right div {

grid-area: flex;

}

.sms-menu {

list-style: none;

}

.sms-item {

background: linear-gradient(135deg, deepskyblue 20%, yellow 80%);

display: flex;

align-items: center;

grid-gap: 12px;

}

.sms-item:hover {

background: rgba(255, 255, 255, 0.15);

transform: translateX(8px);

}

.sms-item.active {

background: linear-gradient( 135deg, #667eea 0%, purple 100%);

}

/* coding Responsive layout with micke sidebar-right "sms"=squaremagie space ! grid-area shold indicate red. */

/* coding responsive down footer section with micke, grid-area shold indicate red. */

#pageFooter {

grid-area: down;

}

.down div {

grid-area: auto;

}

.center, footer {

grid-area: center;

grid-column: 1 / 2 1fr 3 / 4 !important;

grid-row: 5 / 6 !important;

background: linear-gradient( 135deg, #667eea 0%, purple 100%);

color: white;

text-align: center;

padding: 0px 10px;

margin-left: -1px;

margin-right: -1px;

padding-top: 0.75%;

border-radius: 10px;

max-width: auto;

max-height: 100%;

margin-top: 0%;

box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);

}

.center, p {

font-size: 0.85vw;

line-height: 1vw;

}

.left, footer {

grid-area: left;

grid-column: 1 / 2 1fr !important;

grid-row: 5 / 6 !important;

background: linear-gradient(135deg, #f8ceec 0%, #a88beb 100%);

color: blueviolet;

text-align: center;

padding: 10px 10px;

margin-left: -1px;

margin-right: -1px;

border-radius: 10px;

max-width: auto;

max-height: 100%;

margin-top: 0%;

box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);

}

.left, p {

font-size: 0.75vw;

line-height: 0.9vw;

}

.right, footer {

grid-area: right;

grid-column: 1fr 3 / 4 !important;

grid-row: 5 / 6 !important;

background: linear-gradient(135deg, #f8ceec 0%, #a88beb 100%);

color: green;

text-align: center;

padding: 10px 10px;

margin-left: -1px;

margin-right: -1px;

border-radius: 10px;

max-width: auto;

max-height: 100%;

margin-top: 0%;

box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);

}

.right, p {

font-size: 0.75vw;

line-height: 0.9vw;

}

/* coding Responsive down footer section with micke, grid-area shold indicate red. */

.material {

position: relative;

display: flex;

justify-content: center;

align-items: center;

transform-style: preserve-3d;

transform: rotateZ(90deg);

}

@keyframes rotate {

0% {

transform: rotateY(0deg);

}

100% {

transform: rotateX(360deg);

}

.dna {/*line*/

position: relative;

width: 1px;

height: 6vw;

border: 1px dotted white;

box-shadow: 0 0 15px white;

background: transparent;

margin: 0px 0.52vw;

animation: rotate 3s linear infinite;

}

.dna::before {/*top dot*/

content: "";

position: absolute;

top: -2px;

left: -5px;

width: 10px;

height: 10px;

background: yellow;

border-radius: 50%;

box-shadow: 0 0 15px yellow;

}

.dna::after {/*bottom dot*/

content: '';

position: absolute;

bottom: -2px;

left: -5px;

width: 10px;

height: 10px;

background: aqua;

border-radius: 50%;

box-shadow: 0 0 12px aqua;

}

.dna:nth-child(1) {

animation-delay: 0.15s;

}

.dna:nth-child(2) {

animation-delay: 0.3s;

}

.dna:nth-child(3) {

animation-delay: 0.45s;

}

.dna:nth-child(4) {

animation-delay: 0.6s;

}

.dna:nth-child(5) {

animation-delay: 0.75s;

}

.dna:nth-child(6) {

animation-delay: 0.9s;

}

.dna:nth-child(7) {

animation-delay: 1.05s;

}

.dna:nth-child(8) {

animation-delay: 1.2s;

}

.dna:nth-child(9) {

animation-delay: 1.35s;

}

.dna:nth-child(10) {

animation-delay: 1.5s;

}

.dna:nth-child(11) {

animation-delay: 1.65s;

}

.dna:nth-child(12) {

animation-delay: 1.8s;

}

.dna:nth-child(13) {

animation-delay: 1.95s;

}

.dna:nth-child(14) {

animation-delay: 2.1s;

}

.dna:nth-child(15) {

animation-delay: 2.25s;

}

.dna:nth-child(16) {

animation-delay: 2.4s;

}

.dna:nth-child(17) {

animation-delay: 2.55s;

}

.dna:nth-child(18) {

animation-delay: 2.7s;

}

.dna:nth-child(19) {

animation-delay: 2.85s;

}

.dna:nth-child(20) {

animation-delay: 3.0s;

}

.dna:nth-child(21) {

animation-delay: 3.15s;

}

.dna:nth-child(22) {

animation-delay: 3.3s;

}

.dna:nth-child(23) {

animation-delay: 3.45s;

}

.dna:nth-child(24) {

animation-delay: 3.6s;

}

.dna:nth-child(25) {

animation-delay: 3.75s;

}

.dna:nth-child(26) {

animation-delay: 3.9s;

}

.dna:nth-child(27) {

animation-delay: 4.05s;

}

.dna:nth-child(28) {

animation-delay: 4.2s;

}

/* coding Responsive layout with micke - advertising space-item */

.gallery.one {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(25%, 100%));

grid-auto-rows: 10vw;

grid-gap: 0px;

width: 0;

height: 0;

min-height: auto;

min-width: 100%;

max-width: auto;

margin: 0 auto;

margin-top: 12%;

}

.gallery-item {

position: relative;

overflow: hidden;

border-radius: 12px;

cursor: pointer;

margin-bottom: -18%;

transition: transform 0.4s ease, box-shadow 0.4s ease;

}

.gallery-item:hover {

transform: scale(1.05);

box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);

z-index: 10;

}

.gallery-item::before {

content: '';

position: absolute;

inset: 0;

background: linear-gradient(135deg, rgba(102, 126, 234, 0.3), rgba(118, 75, 162, 0.3));

opacity: 0;

transition: opacity 0.3s ease;

}

.gallery-item:hover::before {

opacity: 1;

}

.item-content {

position: relative;

width: 100%;

height: 100%;

display: flex;

align-items: center;

justify-content: center;

color: white;

font-size: 1vw;

font-weight: 500;

text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);

}

.item-overlay {

position: absolute;

bottom: 0;

left: 0;

right: 0;

background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);

padding: 20px;

transform: translateY(100%);

transition: transform 0.3s ease;

}

.gallery-item:hover .item-overlay {

transform: translateY(0);

}

.item-title {

color: white;

font-size: 0.9vw;

font-weight: 600;

margin-bottom: 10px;

}

.item-description {

color: rgba(255, 255, 255, 0.8);

font-size: 0.75vw;

}

/* Building responsive layouts with strategic spans */

.gallery-item:nth-child(1) {

}

.gallery-item:nth-child(2) {

}

/* coding Responsive layout with micke - advertising space */

/* coding menu-bar in header with micke */

.menu{

background-color: rgba(0, 0, 0, 0.0);

max-width: auto;

max-height: 100%;

text-align: center;

}

.leftmenu {

float: left;

margin-top: 12.5%;

margin-left: 14%;

}

.leftmenu_1 {

float: left;

font-size: 0.5vw;

line-height: 2;

margin-top: 2.8%;

margin-left: 1%;

}

.rightmenu {

max-width: auto;

max-height: 100%;

float: right;

margin-top: 0%;

padding-bottom: 0px;

}

.menu-bar ul{

display: inline-flex;

list-style: none;

}

.menu-bar ul li{

width: 100px;

margin: 5px;

padding: 5px;

font-size: 15px;

}

.menu-bar ul li a{

font-family: 'montserrat', sans-serif;

color: white;

text-decoration: none;

}

.menu-bar ul li :hover{

background: linear-gradient(135deg, #1e3c72 0%, deepskyblue 100%);

padding: 2px 2px;

margin-bottom: 2px;

border-radius: 2px;

cursor: pointer;

transition: all 0.1s ease;

font-size: 15px;

color: white;

transform: translateX(1px);

}

.menu-bar ul li_id{

width: 100px;

margin: 5px;

padding: 5px;

font-size: 15px;

}

.menu-bar ul li_id a{

font-family: 'montserrat', sans-serif;

color: white;

text-decoration: none;

}

.menu-bar ul li_id :hover{

background: linear-gradient(135deg, #1e3c72 0%, deepskyblue 100%);

padding: 2px 2px;

margin-bottom: 2px;

border-radius: 2px;

cursor: pointer;

transition: all 0.1s ease;

font-size: 15px;

color: red;

transform: translateX(1px);

}

/* coding menu-bar in header with micke */

/* coding color script with micke */

.animate-charcter {

text-transform: uppercase;

background-image: linear-gradient(

225deg,

purple 10%,

blueviolet 30%,

deeppink 70%,

yellow 90%

);

background-size: auto auto;

background-clip: border-box;

background-size: 200% auto;

color: #fff;

background-clip: text;

color: transparent;

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

animation: textclip 3s linear infinite;

display: inline-block;

font-size: 1.38vw;

text-align: center;

}

@keyframes textclip {

to {

background-position: -200% center;

}

/* coding color script with micke */

/* coding gallery and text section with micke */

.firstsection{

background-color: none;

height: 0%;

margin-top: 5%;

margin-bottom: 0%;

}

.firsthalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

}

.secondsection{

background-color: none;

height: 0%;

margin-top: 102%;

margin-bottom: 0%;

text-align: center;

}

.secondhalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

}

.thirdsection{

background-color: none;

height: 0%;

margin-top: 3.8%;

margin-bottom: 0%;

text-align: center;

}

.thirdhalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

}

.fourthsection{

background-color: none;

height: 0%;

margin-top: 120%;

margin-bottom: 0%;

text-align: center;

}

.fourthhalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

}

.fifthsection{

background-color: none;

height: 0%;

margin-top: 4%;

margin-bottom: 0%;

text-align: center;

}

.fifthhalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

}

.sixsection{

background-color: none;

height: 0%;

margin-top: 4%;

margin-bottom: 6%;

}

.sixhalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

}

.sevensection{

background-color: none;

height: 0%;

margin-top: 3%;

margin-bottom: 0%;

}

.sevenhalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

font-weight: none;

text-transform: none;

}

.eigthsection{

background-color: none;

height: 0%;

margin-top: 1%;

margin-bottom: 0%;

}

.eigthhalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

}

.box-main{

display: flex;

justify-content: center;

align-items: center;

color: black;

font-size: 16px;

max-width: auto;

margin: auto;

height: 100%;

margin-top: 0%;

}

/* coding gallery and text section with micke */

/* coding magic table - sidebar with micke */

.btn {

background: linear-gradient(135deg, aqua 20%, gold 80%);

color: blue;

font-family: 'montserrat', sans-serif;

border-style: none;

font-size: 0.8vw;

font-weight: none;

text-transform: none;

text-align: right;

line-height: 0.7vw;

width: auto;

margin-top: 0px;

margin-bottom: 0px;

border: 3px solid white;

cursor: pointer;

padding: 3px 3px;

border-style: outset;

}

.btn:hover{

background: linear-gradient(135deg, white 20%, lightgoldenrodyellow 80%);

color: black;

padding: 3px 3px;

border: 3px solid white;

font-weight: bold;

text-transform: uppercase;

}

/* coding magic table - sidebar with micke */

/* coding button sidebar-sms with micke */

.btn_1 {

background: linear-gradient(135deg, deepskyblue 20%, gold 80%);

color: blue;

font-family: 'montserrat', sans-serif;

border-style: none;

font-size: 0.8vw;

font-weight: none;

text-transform: none;

line-height: 1vw;

max-width: 100%;

height: auto;

margin-top: 0px;

margin-bottom: 0%;

border: 3px solid white;

cursor: pointer;

padding: 3px 3px;

border-style: outset;

}

.btn_1:hover{

background: linear-gradient(135deg, white 20%, lightgoldenrodyellow 80%);

color: black;

padding: 3px 3px;

border: 3px solid white;

font-weight: bold;

text-transform: uppercase;

}

/* coding button sidebar-sms with micke */

/* coding button sidebar button with micke */

.btn_2 {

background: linear-gradient(135deg, deeppink 20%, yellow 80%);

color: blue;

font-family: 'montserrat', sans-serif;

border: none;

font-size: 0.8vw;

font-weight: none;

text-transform: none;

line-height: 0.8vw;

width: auto;

margin: 0px 1px;

margin-top: 5px;

margin-bottom: 1px;

border: 2px solid gray;

cursor: pointer;

padding: 2px 2px;

border-style: outset;

}

.btn_2:hover{

background: linear-gradient(135deg, white 20%, lightgoldenrodyellow 80%);

color: black;

font-weight: none;

text-transform: uppercase;

}

.btn_3 {

background: linear-gradient(135deg, greenyellow 20%, yellow 80%);

color: blue;

font-family: 'montserrat', sans-serif;

border: none;

font-size: 0.8vw;

font-weight: none;

text-transform: none;

line-height: 0.8vw;

width: auto;

margin: 0px 1px;

margin-top: 5px;

margin-bottom: 1px;

border: 2px solid gray;

cursor: pointer;

padding: 2px 2px;

border-style: outset;

}

.btn_3:hover{

background: linear-gradient(135deg, white 20%, lightgoldenrodyellow 80%);

color: black;

font-weight: none;

text-transform: uppercase;

}

.btn_4 {

background: linear-gradient(135deg, deepskyblue 20%, yellow 80%);

color: blue;

font-family: 'montserrat', sans-serif;

border: none;

font-size: 0.8vw;

font-weight: none;

text-transform: none;

line-height: 0.8vw;

width: auto;

margin: 0px 1px;

margin-top: 0px;

margin-bottom: 0px;

border: 2px solid gray;

cursor: pointer;

padding: 2px 2px;

border-style: outset;

}

.btn_4:hover{

background: linear-gradient(135deg, white 20%, lightgoldenrodyellow 80%);

color: black;

font-weight: none;

text-transform: uppercase;

}

.btn_5 {

background: linear-gradient(135deg, gold 20%, yellow 80%);

color: blue;

font-family: 'montserrat', sans-serif;

border: none;

font-size: 0.8vw;

font-weight: none;

text-transform: none;

line-height: 0.8vw;

width: auto;

margin: 0px 1px;

margin-top: 0px;

margin-bottom: 0px;

border: 2px solid gray;

cursor: pointer;

padding: 2px 2px;

border-style: outset;

}

.btn_5:hover{

background: linear-gradient(135deg, white 20%, lightgoldenrodyellow 80%);

color: black;

font-weight: none;

text-transform: uppercase;

}

/* coding sidbar button with micke */

/* coding button to above java with micke */

p.button_1 {

background-color: none;

font-family: 'montserrat', sans-serif;

color: black;

padding: 1px, 1px;

text-align: center;

text-decoration: none;

margin-top: 0px;

display: inline-block;

font-size: 0.75vw;

position: relative;

border-style: none;

}

p.button_1:hover {

background-color: white;

}

p.button_2 {

background-color: none;

font-family: 'montserrat', sans-serif;

color: blue;

padding: 0px, 0px;

text-align: left;

text-decoration: none;

font-weight: none; /* font-weight: bold; -> big character, coding with micke */

text-transform: none; /* text-transform: uppercase; -> big character, coding with micke */

margin-top: 0px;

display: inline-block;

font-size: 0.75vw;

line-height: 1vw;

width: auto; /* --scroll layout width=auto - second section-- */

height: 32vw;

border-style: none;

overflow-y: scroll; /* --scroll layout overflow-y - second section-- */

}

p.button_2:hover {

background-color: white;

color: black;

}

p.button_3 {

background-color: lightgray;

color: none;

padding: -4px, 1px;

text-align: center;

text-decoration: none;

max-width: 100%;

height: 6.55vw;

margin-top: 0px;

display: flex;

line-height: 1vw;

font-size: 0px;

border-style: outset;

}

p.button_3:hover {

background-color: white;

}

/* coding button to above java with micke */

/* coding text with micke */

.text{

width: 100%;

margin-top: 0%;

text-transform: uppercase;

color: purple;

}

.text-medium{

font-family: 'piazzolla', serif;

color: blue;

font-size: 1vw;

font-weight: bold;

text-decoration: none;

text-transform: none;

}

/* coding text with micke */

/* coding JS images with micke */

img.small {

width: 9.7vw;

height: 6.25vw;

}

img.medium {

width: 18vw;

height: 18vw;

}

/* coding JS images with micke */

/* The Modal (background) */

.modal {

display: none; /* Hidden by default */

position: fixed; /* Stay in place */

z-index: 1; /* Sit on top */

padding-top: 6vw; /* Location of the box */

left: 0;

top: 0;

width: 100%; /* Full width */

height: 100%; /* Full height */

overflow: hidden; /* Enable scroll if needed */

background-color: rgb(0,0,0); /* Fallback color */

background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

color: black;

text-align: left;

}

/* Modal Content */

.modal-content {

background-color: #fefefe;

margin: auto;

padding: 15px;

border: 1px solid #888;

width: 31%;

height: scroll;

}

/* The Close Button */

.close {

color: red;

float: right;

font-size: 28px;

font-weight: bold;

}

.close:hover,

.close:focus {

color: #000;

text-decoration: none;

cursor: pointer;

}

/* coding table with micke */

table.one {

border-collapse: collapse;

width: 100%;

margin-top: 0%;

border-spacing: 2px 1px;

position: center;

text-align: center;

}

td {

background-color: none;

padding: 3px 2px;

border: 2px solid none;

position: center;

text-align: center;

}

table.two {

border-collapse: collapse;

width: auto;

margin-top: 0%; /* coding the top margin of center column article div */

}

th, td_2 {

font-family: 'montserrat', sans-serif;

border: 1px solid none; /* --color will give border line on table section - here none color-- */

padding: 0px;

height: auto;

width: auto;

font-size: 0px;

text-align: right;

}

table.three td {

font-family: 'calibri', sans-serif;

background-color: none;

padding: 0.15vw 0.15vw;

padding-top: 0.15vw;

border: 1px solid white;

font-size: 0.8vw;

text-align: right;

}

table.four td {

font-family: 'Arial', 'Helvetica', sans-serif;

background-color: none;

padding: 0.15vw 0.15vw;

padding-top: 0.25vw;

border: 1px solid white;

font-size: 0.75vw;

text-align: right;

}

/* coding table with micke */

/* coding powerpoint gallery button with micke */

div.gallery {

margin: 0px 3px;

border: 1px solid none;

float: left;

max-width: 100%;

height: auto;

font-size: 0.6vw;

}

div.gallery:hover {

border: 1px solid none;

padding: 0px 0px;

max-width: 100%;

height: auto;

}

div.desc {

padding: 1px 2px;

font-size: 0.6vw;

color: white;

text-align: center;

margin-bottom: 0%;

}

/* coding powerpoint gallery button with micke */

</style>

<b class="animate-charcter">SQUAREMAGIE</b>

</div>

</div>

<li id="firstlist"> <a href="../RoyalHistory/royalhistory.html"><i class="fa fa-royal"><span>Reformation</span></i></a> </li>

<li :hover> <a cursor: pointer; id="myBtn"><i class="fa fa-nasa;"><span>Olympic</span></i></a> </li>

</ul>

</div>

<div class="rightmenu"><div id="above"><P><span>Welcome to Squaremagie</span></P></div>

<li> <a href="../Formula/formula.html"><i class="fa fa-formula"><span>Formula</span></i></a> </li>

<li> <a href="../Database/database.html"><i class="fa fa-data"><span>Database</span></i></a> </li>

<li> <a href="../Trimagic/trimagic.html"><i class="fa fa-square"><span>Trimagic</span></i></a> </li>

<li> <a href="../History/history.html"><i class="fa fa-images"><span>History</span></i></a> </li>

<li> <a href="../Links/links.html"><i class="fa fa-links"><span>Links</span></i></a> </li>

<li_id> <a style="color:aqua;" href="space.html"><i class="fa fa-mail"><span>Space</span></i></a> </li_id>

</ul>

</div>

</div></div>

</header>

<H1>Spectra of Gas Discharges</H1>

<H2>Most common elements in solar spectrum.</H2>

<H4><B>The following images are

color coded spectra of various elements undergoing electrical discharge

excitation.</B></H4>

<P>The spectra for each element is computed, screen captured and stored as a 784

X 8 pixel JPEG then expanded vertically by your web browser to 784 X 64 pixel.</P>

<H3 align=left>Hydrogen</H3><IMG style="max-width: 42vw; height: 3.4vw;"

src="Spectra of Gas Discharges solar_files/hydrogen.jpg"></IMG>

<H3 align=center>Helium</H3><IMG style="max-width: 42vw; height: 3.4vw;"

src="Spectra of Gas Discharges solar_files/helium.jpg"></IMG>

<H3 align=center>Oxygen</H3><IMG style="max-width: 42vw; height: 3.4vw;"

src="Spectra of Gas Discharges solar_files/oxygen.jpg"></IMG>

<H3 align=center>Carbon</H3><IMG style="max-width: 42vw; height: 3.4vw;"

src="Spectra of Gas Discharges solar_files/carbon.jpg"></IMG>

<H3 align=center>Nitrogen</H3><IMG style="max-width: 42vw; height: 3.4vw;"

src="Spectra of Gas Discharges solar_files/nitrogen.jpg"></IMG>

<H3 align=center>Neon</H3><IMG style="max-width: 42vw; height: 3.4vw;"

src="Spectra of Gas Discharges solar_files/neon.jpg"></IMG>

<H3 align=center>Magnesium</H3><IMG style="max-width: 42vw; height: 3.4vw;"

src="Spectra of Gas Discharges solar_files/magnesium.jpg"></IMG>

<H3 align=center>Silicon</H3><IMG style="max-width: 42vw; height: 3.4vw;"

src="Spectra of Gas Discharges solar_files/silicon.jpg"></IMG>

<H3 align=center>Sulfur</H3><IMG style="max-width: 42vw; height: 3.4vw;"

src="Spectra of Gas Discharges solar_files/sulfur.jpg"></IMG>

<H3 align=center>Iron</H3><IMG style="max-width: 42vw; height: 3.4vw;"

src="Spectra of Gas Discharges solar_files/iron.jpg"></IMG>

<H3 align=center>Aluminum</H3><IMG style="max-width: 42vw; height: 3.4vw;"

src="Spectra of Gas Discharges solar_files/aluminum.jpg"></IMG>

<H3 align=center>Calcium</H3><IMG style="max-width: 42vw; height: 3.4vw;"

src="Spectra of Gas Discharges solar_files/calcium.jpg"></IMG>

<H3 align=center>Argon</H3><IMG style="max-width: 42vw; height: 3.4vw;"

src="Spectra of Gas Discharges solar_files/argon.jpg"></IMG>

<H3 align=center>Sodium</H3><IMG style="max-width: 42vw; height: 3.4vw;"

src="Spectra of Gas Discharges solar_files/sodium.jpg"></IMG>

<H3 align=center>Krypton</H3><IMG style="max-width: 42vw; height: 3.4vw;;"

src="Spectra of Gas Discharges solar_files/krypton.jpg"></IMG>

<H3 align=center>Xenon</H3><IMG style="max-width: 42vw; height: 3.4vw;"

src="Spectra of Gas Discharges solar_files/xenon.jpg"></IMG>

</div>

</article>

<h2>Squaremagie space</h2>

<span>Formula | Prime square 4</span>

</li></a>

<span>Formula | G. Pfeffermann 8</span>

</li></a>

<span>Formula | Gaston Tarry 8</span>

</li></a>

<span>Formula | André Gérardin 8</span>

</li></a>

<span>Data | Fredrik Jansson 10</span>

</li></a>

<span>Data | Jaqués Guéron 13-23</span>

</li></a>

<span>Data | Chinasquare 17-31</span>

</li></a>

<span>Bimagic | Aale deWinkel 8</span>

</li></a>

<span>Bimagic | Hermansson 25</span>

</li></a>

<span>Trimagic | Walter Trump 12</span>

</li></a>

<span>Bimagic | Hermansson 27</span>

</li></a>

<span>Squaremagie | Ebook n25</span>

</li></a>

<span>Squaremagie | Ebook n27</span>

</li></a>

<span>Squaremagie | Ebook n32</span>

</li></a>

<span>Squaremagie Download 1</span>

</li></a>

<span>Squaremagie Download 2</span>

</li></a>

<span>Squaremagie Download 3</span>

</li></a>

<span>Squaremagie Download 4</span>

</li></a>

<span>Squaremagie Download 5</span>

</li></a>

<span>Squaremagie Download 6</span>

</li></a>

<span>Squaremagie Download 7</span>

</li></a>

<span>Squaremagie Download 8</span>

</li></a>

</ul>

<p style="margin-top: 2%">Supermagie Space</p>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></button></abbr>

<p style="color:green; font-size: 0.7vw; padding-top: 3px">Super Euler Bimagic Square Order 9</p>

</div>

</section>

</div>

<div class="item-title">Olympic Champion</div>

<div class="item-description">Mikael Vatheuer</div>

</div>

</aside>

<h2>Squarespace magie</h2>

<tr>

<th_1 style="color: white; font-size: 0.7vw;">dna Animation</th_1>

</div>

</tr>

</table>

</div>

</td_2></th></tr>

</table>

</div>

</section>

</div>

</section>

<tr>

<td_1><p>The Key 1</p>

</p></button></abbr>

<div class="desc">Trimagic Square Order 24</div>

</div>

</td_1>

</tr>

</table>

</div>

</section>

<tr>

<td_1><p>The Key 2</p>

</p></button></abbr>

<div class="desc">Trimagic Square Order 24</div>

</div>

</td_1>

</tr>

</table>

</div>

</section>

<tr>

<td_1><p>The Key 3</p>

</p></button></abbr>

<div class="desc">Trimagic Square Order 24</div>

</div>

</td_1>

</tr>

</table>

</div>

</section>

<p style="margin-top: 2%">Supermagie Space</p>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></button>

</abbr></td_2></th>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></button>

</abbr></td_2></th>

</table>

</div>

</section>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></button>

</abbr></td_2></th>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></button>

</abbr></td_2></th>

</table>

</div>

</section>

<p style="color:white; font-size: 0.7vw">4x Super Magic Square Order 5</p>

</div>

</aside>

<h2 style="color:black;" class="text-medium" id="program">Winter Olympic Games 1984</h2>

The men’s <B>Ice Hockey</B> tournament at the <B>1984 Winter Olympics</B> in Sarajevo, Yugoslavia, was the 15th <i>Olympic Championship</i>. The Soviet Union won its sixth gold medal in ice hockey. The games were held mostly in the arena portion of the <i>Olympic Hall Zetra</i>, with some played in the arena portion of the <i>Skenderija Olympic Hall</i>.

<B>Medalist</B><br />

• Gold: Soviet Union (URS)<br />

• Silver: Czechoslovakia (TCH)<br />

• Bronze: Sweden (SWE)

• Soviet Union: Viacheslav Fetisov, Nikolai Drozdetsky, Aleksandr Gerasimov, Alexei Kasatonov, Andrei Khomutov, Vladimir Krutov, Igor Larionov, Sergei Makarov, Sergei Shepelev and Vladislav Tretiak.<br />

• Czechoslovakia: Milan Chalupa, Frantisek Cernik, Jiri Hrdina, Igor Liba, Pavel Richter and Vladimir Ruzicka.<br />

• Sweden: Peter Gradin, Tommy Mörth, Thomas Rundquist, Håkan Södergren and Mats Waltin.<br />

• Canada: No Wayne Gretzky in the Canadian Olympic team, but he played for Canada in the World Championship, Helsinki 1981.

<B>Group A</B><br />

Top two teams advanced to the medal round, namely Soviet Union and Sweden. The Soviet games:<br />

1. 7 February 1984<br />

Soviet Union – Poland 12-1 (3-1), (4-0), (5-0)<br />

2. 9 February 1984<br />

Soviet Union – Italy 5-1 (4-0), (1-1), (0-0)<br />

3. 11 February 1984<br />

Yugoslavia – Soviet Union 1-9 (0-4), (1-1), 0-4)<br />

4. 13 February 1984<br />

West Germany – Soviet Union 1-6 (1-4), (0-2), 0-0)<br />

5. 15 February 1984<br />

Soviet Union – Sweden 10-1 (5-0), (4-0), (1-1)

<B>Group B</B><br />

Top two teams advanced to the medal round, namely Czechoslovakia and Canada.

<B>Final round</B><br />

6. 17 February 1984<br />

Soviet Union – Canada 4-0 (0-0), (2-0), (2-0)<br />

7. 17 February 1984<br />

Czechoslovakia – Sweden 2-0 (0-0), (0-0), (2-0)<br />

8. 19 February 1984<br />

Sweden – Canada 2-0 (0-0), (1-0), (1-0)<br />

9. 19 February 1984<br />

Soviet Union – Czechoslovakia 2-0 (1-0), (1-0), (0-0)

Soviet player Aleksandr Gerasimov did the final score in the second period against Czechoslovakia with a distance slap shot, and the soviet could win the Olympic gold.

<B>Viktor Tikhonov</B> (1930-2014) was a legendary Soviet ice hockey player and coach who is famous for leading the Soviet national team to global dominance in the late 1970s and 1980s. His coaching career with the national team included Canada Cup champion 1981, eight World Championship gold medals and Olympic gold medals in 1984 and 1988. Viktor Tikhonov was Olympic gold coach for Russia Federation in 1992. He was also instrumental in the success of the CSKA Moscow club team, leading them to twelve consecutive league championships.

<B>Leading scores</B><br />

1. Erich Kuhnhackl: GP 6, G 8, A 6, Pts 14<br />

2. Peter Gradin: GP 7, G 9, A 4, Pts 13<br />

3. Nikolai Drozdetsky: GP 7, G 10, A 2, Pts 12<br />

4. Viacheslav Fetisov: GP 7, G 3, A 8, Pts 11

<B>Final ranking 1984</B><br />

1. Soviet Union<br />

2. Czechoslovakia<br />

3. Sweden<br />

4. Canada

https://www.wikipedia.org/olympcs/sarajevo1984<p/>

</div>

// Get the modal

var modal = document.getElementById("myModal");

// Get the button that opens the modal

var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal

var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal

btn.onclick = function() {

modal.style.display = "block";

}

// When the user clicks on <span> (x), close the modal

span.onclick = function() {

modal.style.display = "none";

}

// When the user clicks anywhere outside of the modal, close it

window.onclick = function(event) {

if (event.target == modal) {

modal.style.display = "none";

}

</script>

<div class="font"><span> Thanks to University of Strasbourg</span></div>

</footer>

</footer>

<div class="footer"><span class="widget-icon">📩</span><span id="mail">Email:</span><a style="color: blue; text-decoration-line: none" href="mailto:mikael.hermansson3@live.com"><span> Mikael Hermansson </span></a></div>

</footer>

</centre>

</body>

</html>