<!DOCTYPE html>

<head>

<title>Squaremagie Index</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 "above" instead for header and "left-center-right" 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; /* ! importand to have colon ";" after the template in grid-template-area: otherwise the page 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%, deeppink 100%);

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" !important;

grid-template-rows: auto 1fr auto;

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

grid-gap: 10px;

padding: 10px;

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

min-height: 100vh;

max-width: auto;

max-height: 100%;

margin: 0;

}

.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" !important;

grid-template-rows: auto 1fr auto;

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

grid-gap: 10px;

padding: 10px;

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

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.content, article {

grid-area: content;

grid-column: 1fr !important;

grid-row: 1fr !important;

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

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

background-repeat: no-repeat;

background-size: 100% 100%;

justify-content: center;

align-items: center;

min-height: 100vh;

max-width: auto;

max-height: 100%;

padding: 2%;

padding-bottom: 0%;

border-radius: 8px;

border-bottom: none;

position: relative;

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

}

.font h1{

color: yellow;

font-size: 1.1vw;

text-align: center;

margin-bottom: 0.1vw;

border-bottom: none;

margin-top: 0px;

}

.font h2{

color: aqua;

font-size: 1.1vw;

text-align: center;

margin-bottom: 0.1vw;

border-bottom: none;

margin-top: 0px;

}

.font h3{

color: white;

font-size: 0.96vw;

text-align: center;

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-bottom: 0px;

margin-top: 3%;

}

.font h4{

color: white;

font-size: 1.5vw;

text-align: center;

padding-bottom: 2px;

margin-top: 0%;

margin-bottom: 0%;

border-bottom: 3px solid #667eea;

}

.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%;

}

.font p{

color: white;

font-size: 0.63vw;

text-align: center;

line-height: 0.8vw;

margin-bottom: 0px;

border-bottom: none;

}

#menuSection {

grid-area: center;

}

.mac-menu {

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

}

.mac-section.one {

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

padding: 5px;

border-radius: 8px;

margin: 4px 4px;

margin-top: 2.2%;

margin-bottom: 0%;

border-left: 4px solid #667eea;

}

.mac-section.one:hover {

background: white;

padding: 5px;

border-radius: 8px;

margin: 4px 4px;

margin-top: 2.2%;

margin-bottom: 0%;

border-left: 4px solid #667eea;

}

.mac-section.two {

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

padding: 5px;

border-radius: 8px;

margin: 4px 4px;

margin-top: 1.3%;

margin-bottom: 0%;

border-left: 4px solid #667eea;

}

.mac-section.two:hover {

background: white;

padding: 5px;

border-radius: 8px;

margin: 4px 4px;

margin-top: 1.3%;

margin-bottom: 0%;

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;

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;

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.9vw;

line-height: 1;

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 orange (vsc). */

#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, #f093fb 0%, white 100%);

padding: 10%;

padding-bottom: 0%;

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: 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 #667eea;

}

.sidenav p {

color: green;

font-size: 1vw;

text-align: center;

line-height: 1vw;

margin-top: 1%;

}

.sidenav ul {

list-style: none;

padding: 4% 0%;

}

.sidenav li {

background: linear-gradient(135deg, #f093fb 0%, white 100%);

color: blue;

font-size: 0.75vw;

padding: 12px 8px;

margin-bottom: 8px;

border-radius: 8px;

cursor: pointer;

transition: all 0.3s ease;

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

}

.sidenav li:hover {

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

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: none;

display: flex;

align-items: center;

grid-gap: 12px;

}

.nav-item:hover {

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

transform: translateX(8px);

}

.nav-item.active {

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

}

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

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

#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, #f093fb 0%, white 100%);

padding: 10%;

padding-bottom: 0%;

border-radius: 12px;

max-width: auto;

max-height: 100%;

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 #667eea;

}

.sidesms p {

color: blueviolet;

font-size: 1vw;

text-align: center;

line-height: 1vw;

margin-top: 1%;

}

.sidesms ul {

list-style: none;

padding: 4% 0%;

}

.sidesms li {

background: linear-gradient(135deg, #f093fb 0%, white 100%);

color: blue;

font-size: 0.75vw;

padding: 12px 8px;

margin-bottom: 8px;

border-radius: 8px;

cursor: pointer;

transition: all 0.3s ease;

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

}

.sidesms li:hover {

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

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: none;

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, #e0c3fc 0%, #8ec5fc 100%);

}

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

/* coding responsive bottom section with micke, grid-area shold indicate orange (vsc). */

#pageFooter {

grid-area: bottom;

}

.bottom 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, #1e3c72 0%, deeppink 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.9vw;

line-height: 1vw;

text-align: center;

}

.left, footer {

grid-area: left;

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

grid-row: 5 / 6 !important;

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

color: white;

text-align: center;

padding: 8px 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.8vw;

line-height: 1vw;

}

.right, footer {

grid-area: right;

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

grid-row: 5 / 6 !important;

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

color: white;

text-align: center;

padding: 8px 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.8vw;

line-height: 1vw;

}

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

/* 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_id1{

width: 100px;

margin: 5px;

padding: 5px;

font-size: 15px;

}

.menu-bar ul li_id1 a{

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

color: white;

text-decoration: none;

}

.menu-bar ul li_id1 :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 section-box with micke */

.firstsection{

background-color: none;

height: 0%;

margin-top: 0.9%;

margin-bottom: 0%;

}

.firsthalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

.secondsection{

background-color: none;

height: 0%;

margin-top: 0.08%;

margin-bottom: 0%;

}

.secondhalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

}

.thirdsection{

background-color: none;

height: 0%;

margin-top: 0%;

margin-bottom: 1%;

}

.thirdhalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

font-weight: none;

text-transform: none;

}

.fourthsection{

background-color: none;

height: 0%;

margin-top: 2%;

margin-bottom: 0%;

}

.fourthhalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

font-weight: none;

text-transform: none;

}

.fifthsection{

background-color: none;

height: 0%;

margin-top: 2%;

margin-bottom: 0%;

}

.fifthhalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

}

.sixsection{

background-color: none;

height: 0%;

margin-top: 1.5%;

margin-bottom: 1.5%;

text-align: left;

}

.sixhalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

}

.box-main{

display: flex;

justify-content: center;

align-items: center;

color: black;

font-size: 1.2vw;

max-width: auto;

margin: auto;

height: 100%;

margin-top: 0%;

}

/* coding section-box with micke */

/* coding magic table btn with micke */

.btn_1 {

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

color: blue;

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

position: autofixed;

font-size: 15px;

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

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

line-height: 15px;

width: auto;

margin-left: -4px;

margin-top: 0px;

margin-bottom: 1px;

border: 2px solid white;

cursor: pointer;

}

.btn_1:hover{

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

font-weight: bold;

text-transform: uppercase;

color: black;

border: 2px solid none;

}

.btn_2 {

background-color: none;

color: none;

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

position: autofixed;

font-size: 15px;

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

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

line-height: 15px;

width: auto;

margin: -4px;

margin-top: 0px;

margin-bottom: 1px;

border: 3px solid white;

cursor: pointer;

}

.btn_2:hover{

background-color: none;

font-weight: bold;

text-transform: uppercase;

color: black;

}

.btn_3 {

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

color: white;

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

position: autofixed;

font-size: 15px;

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

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

line-height: 15px;

width: auto;

margin-right: -4px;

margin-top: 0px;

margin-bottom: 1px;

border: 2px solid white;

cursor: pointer;

}

.btn_3:hover{

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

font-weight: bold;

text-transform: uppercase;

color: black;

border: 2px solid none;

}

/* coding magic table btn with micke */

/* coding devils magic table btn with micke */

.btn_4 {

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

color: white;

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

border-style: none;

font-size: 0.8vw;

font-weight: none;

text-transform: none;

line-height: 0.8vw;

max-width: 100%;

height: auto;

margin-top: 0px;

margin-bottom: 2px;

border: 3px solid white;

cursor: pointer;

padding: 3px 3px;

border-style: outset;

}

.btn_4:hover{

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

color: black;

padding: 3px 3px;

border: 3px solid white;

font-weight: bold;

text-transform: uppercase;

}

.btn_5 {

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;

line-height: 0.8vw;

max-width: 100%;

height: auto;

margin-top: 0px;

margin-bottom: 2px;

border: 3px solid white;

cursor: pointer;

padding: 3px 3px;

border-style: outset;

}

.btn_5: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 devils magic table btn with micke */

/* coding button main-top with micke */

p.button {

background-color: lightgoldenrodyellow;

color: blue;

padding: 0vw 0.2vw;

text-align: center;

margin-top: 2%;

text-decoration: none;

display: inline-block;

font-size: 1vw;

border-style: inset;

}

p.button:hover {

background-color: purple;

color: white;

}

/* coding button main-top with micke */

/* coding scroll text with micke */

p.button_1 {

background-color: lightyellow;

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

color: blue;

padding-left: 0.1vw;

padding-top: 0.1vw;

text-align: left;

text-decoration: none;

margin-top: 0%;

display: inline-block;

font-size: 0.8vw;

line-height: 1vw;

max-width: 60vw;

height: 9.5vw;

border-style: inset;

overflow-y: scroll;

}

p.button_1:hover {

background-color: white;

color: black;

}

/* coding scroll text with micke */

/* coding button to above java with micke */

p.button_2 {

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_2:hover {

background-color: white;

}

p.button_3 {

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: 25vw;

border-style: none;

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

}

p.button_3:hover {

background-color: white;

color: black;

}

/* coding button to above java with micke */

/* coding text with micke */

.text{

width: 100%;

margin-top: 0%;

text-transform: uppercase;

color: white;

}

.text h2 {

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

color: black;

font-size: 1vw;

text-align: left;

font-weight: none;

text-transform: none;

}

.text-medium{

font-family: 'piazzolla', serif;

color: greenyellow;

font-size: 1vw;

font-weight: bold;

text-decoration: none;

text-transform: none;

}

/* coding text with micke */

/* coding JS images with micke */

img.medium {

width: 500px;

height: 500px;

}

/* coding JS images with micke *

/* coding img with micke */

img.align-center {

display: center;

margin: 0px auto;

}

img.small_1 {

width: 307px;

height: 88px;

}

img.small_2 {

width: 4.6vw;

height: 4.65vw;

}

img.small_3 {

width: 4.5vw;

height: 4.65vw;

}

img.small_4 {

width: 5.5vw;

height: 5.7vw;

}

/* coding img with micke */

/* The Modal (background) */

.modal {

display: none; /* Hidden by default */

position: fixed; /* Stay in place */

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

padding-top: 8vw; /* 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: 26%;

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: 1px 1px;

position: center;

}

td {

background-color: none;

padding: 0.15vw 0.15vw;

border: 2px solid none;

position: 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-right: 5px;

height: auto;

width: auto;

font-size: 0px;

text-align: right;

}

table.three td {

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

background-color: none;

padding: 0.1vw 0.15vw;

border: 1px solid white;

font-size: 0.75vw;

text-align: right;

padding-top: 0.2vw;

}

table.four td {

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

background-color: none;

padding: 0.1vw 0.15vw;

padding-top: 0.1vw;

border: 1px solid white;

font-size: 0.75vw;

text-align: right;

}

/* coding table with micke */

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

.gallery {

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: 6%;

}

.gallery-item {

position: relative;

overflow: hidden;

border-radius: 12px;

cursor: pointer;

margin-bottom: -18%;

margin-left: 0%;

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;

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: green;

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 sidebar layout with micke - advertising space-item */

</style>

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

</div>

</div>

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

<li :hover> <a style="color:white; cursor: pointer;" id="myBtn"><i class="fa fa-sally;"><span>Sally Ride</span></i></a> </li>

</ul>

</div>

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

<li_id1> <a style="color:aqua;" href="index.html"><i class="fa fa-home"><span>Home</span></i></a> </li_id1>

<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> <a href="Space/space.html"><i class="fa fa-mail"><span>Space</span></i></a> </li>

</ul>

</div>

</header>

<tr>

<td>

<h4>Squaremagie Space 🏠</h4>

</div>

</td>

</tr>

</table>

</div>

</div></div>

</section>

<tr>

<td>

<h3><span>Design</span> <span>🗽</span> <span>Development</span> <span>🗽</span> <span>Hightech</span></h3>

</div>

</td>

</tr>

</table>

</div>

</div></div>

</section>

<tr>

<td>

<h3><p style="font-size: 0.72vw; padding-top: 0.2vw;" class="button"> WE ARE THE ONE OF THE WORLD's TOP CREATIVE HIGHTECH AGENCIES </p></h3>

</div>

</td>

</tr>

</table>

</div>

</div></div>

</section>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></button>

</td_2></th>

<img src="images/bb.jpg"

class="small_3" alt="bb" />

</table></button></picture>

</td_2></th>

<img src="images/bc.jpg"

class="small_2" alt="bc" />

</table></button></picture>

</td_2></th>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></button>

</td_2></th>

</table>

</div>

</div></div>

</section>

<p>Magic Square of Order 4 by Micke. Photo Credit1: Micke, Credit2: Intel.</p>

</div>

<tr>

<td>

<h1>Squaremagie Space X</h1>

</div>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></button>

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

</table>

</div>

</section>

<p style="color: greenyellow; font-size: 0.7vw;">&copy The Devils Magic Square of Order 12:4</p>

</div>

</td>

<td>

<h2>Squaremagie Space X</h2>

</div>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></button>

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

</table>

</div>

</section>

<p style="color: greenyellow; font-size: 0.7vw;">&copy The Devils Magic Square of Order 12:4</p>

</div>

</td>

</tr>

</table>

</div>

</section>

<h3 class="text-medium" id="program">Abstrakt</h3>

<b>The page of Squaremagie</b> will show how easily it's to download science document of Excelsheet, pdf and xps-viewer files. Through this will it be possibly to make one own map in the computer with bimagic squares paper. The top of the worlds authors into bimagic squares and multisquare construction makes on these pages an introduction of what is possibly to squaredesign of multimagie today. Guest authors from different countries are on the pages of squaremagie following, from aged France; Georges Pfeffermann, Gaston Tarry and André Gérardin. Modern age of France; Christian Boyer, Nicolas Rouanet and Jacques Guéron. From China; Chen Qinwu, Chen Mutian, Su Maoting, Li Wen and Pan Fangchu. From Germany; Walter Trump. From USA; William H. Benson & Jacoby Oswald. From Netherlands; Aale de Winkel, and from Finland; Fredrik Jansson. At last we have from Sweden; Holger Danielsson and Mikael Hermansson. These names of authors corresponding into the <i>original magic squares</i> of multimagie introduced on this page guarantee quality to what is corresponding of modern science into magic squares. In fact, it's easily to check the quite true of the squares in an computer program like the Excelsheet. Today we have knowledge of that algorithm to get magic squares are running in modern software, semi-chips and lithography. Together with <q>Modern Quantum Mechanics</q>, we have the new world race of quantum computing and key distribuation.<br /><br /><b>Squaremagie Space</b>, the page of magic squares and multimagie. Modern multimagie squares represent one of the most powerful tools into features for quantum computing and quantum cryptography. Modern Squaremagie Science start the new era of advanced super semi-conductors, powered by quantum physics and key squares distribution of advanced multimagie thats running in modern software. Quantum key distribution are the new age of secure communication powered by quantum physics. It's the new vision to secure world's communication on cyber-space from the threats posed by advances in quantum computing and mathematics. The need for secure transmission of sensitive secret information has never been more significant today for medical, economic and company data communication. </p>

</div>

</section>

</main>

</article>

<h2>Squaremagie index</h2>

<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 source code</span>

</li></a>

<span>Squaremagie | Ebook n25</span>

</li></a>

<span>Squaremagie | Ebook n27</span>

</li></a>

<span>Squaremagie | Ebook n32</span>

</li></a>

</ul>

<p>Advertising Space</p>

<div class="item-title">Sponsor Squaremagie</div>

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

</div>

</aside>

<h2>Squaremagie index</h2>

<span>Bimagic Square Order 8</span>

</li></a>

<span>Bimagic Square Order 9</span>

</li></a>

<span>Bimagic Square Order 10</span>

</li></a>

<span>Trimagic Square Order 12</span>

</li></a>

<span>Trimagic Square Order 16</span>

</li></a>

<span>Bimagic Square of n13-23</span>

</li></a>

<span>China Square Order 17-31</span>

</li></a>

<span>Trimagic Square Order 24</span>

</li></a>

<span>Bimagic Square Order 25</span>

</li></a>

<span>Bimagic Square Order 27</span>

</li></a>

<span>Trimagic Square Order 32</span>

</li></a>

</ul>

<p>Advertising Space</p>

<div class="item-title">Sponsor Squaremagie</div>

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

</div>

</aside>

<h6 style="color:black; text-align: left" class="text-medium" id="program">Sally Ride, first American women in space.</h6>

<b>Sally Kristen Ride</b> (May 26, 1951 – July 23, 2012) was an American astronaut, physicist, and engineer. Born in Los Angeles, she was as a young sport girl searching for a tennis career. She entered Stanford University in early life as a junior student, graduating with a bachelor’s degree in English and physics. At Stanford, she earned a master's degree in 1975 and a PhD in physics in 1978 while doing research on the interaction of X-rays beams with the interstellar medium. Astrophysics and free electron lasers were her specific interest areas of study. She joined NASA in 1978 and became the first American woman in space in 1983. Ride was the third woman in space overall, after USSR cosmonauts Valentina Tereshkova (1963) and Svetlana Savitskaya (1982). Ride remains the youngest American astronaut to have traveled to space, having done so at the age of 32. After flying twice on the US space Challinger shuttle (1984), she left NASA in 1987. She worked for two years at Stanford University’s Center for International security and Arms control, then at the University of California, San Diego as a professor of physics, primarily researching nonlinear optics and Thomson scattering. She served on the federal committees that investigated the <i>Challenger</i> and <i>Columbia</i> space shuttle disasters, the only women to participate in both. Sally Ride died in the age of 61 according to medical journals in pancreatic cancer on July 23, 2012. Ride was extremely private about her personal life and she left probably no children. She is also founder of Sally Ride Science.</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="footer"><span class="widget-icon">🔔</span><span id="mail">Email:</span><a style="color: greenyellow; text-decoration-line: none" href="mailto:mikael.hermansson3@live.com"><span> Mikael Hermansson </span></a></div>

</footer>

</footer>

<div class="footer"><span class="widget-icon">💰</span><span id="mail">Email:</span><a style="color: aqua; text-decoration-line: none" href="mailto:squaremagie@outlook.com"><span> Squaremagie Space </span></a></div>

</footer>

</centre>

</body>

</html>