<!DOCTYPE html>

<head>

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

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

color: blueviolet;

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: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);

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

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

font-size: 1vw;

text-align: center;

line-height: 1;

margin-top: 0%;

}

.sidenav ul {

list-style: none;

padding: 4% 0%;

}

.sidenav li {

color: black;

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, #f8ceec 0%, #a88beb 100%);

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. */

/* 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.8vw;

text-align: center;

line-height: 1vw;

margin-bottom: 1px;

}

.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, #f8ceec 0%, #a88beb 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: blue;

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

border-radius: 50%;

box-shadow: 0 0 12px deepskyblue;

}

.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 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: blue;

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,

blueviolet 10%,

blue 30%,

deepskyblue 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: 1.2%;

margin-bottom: -0.1%;

}

.firsthalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

.secondsection{

background-color: none;

height: 0%;

margin-top: 0.6%;

margin-bottom: 0%;

}

.secondhalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

}

.thirdsection{

background-color: none;

height: 0%;

margin-top: -0.5%;

margin-bottom: 0%;

}

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

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

margin-bottom: 0%;

}

.fifthhalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

}

.sixsection{

background-color: none;

height: 0%;

margin-top: 1%;

margin-bottom: 0%;

text-align: left;

}

.sixhalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

}

.sevensection{

background-color: none;

height: 0%;

margin-top: 3%;

margin-bottom: -1%;

text-align: left;

}

.sevenhalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

}

.eigthsection{

background-color: none;

height: 0%;

margin-top: 5%;

margin-bottom: 0%;

}

.eigthhalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

}

.ninesection{

background-color: none;

height: 0%;

margin-top: 102%;

margin-bottom: 0%;

text-align: center;

}

.ninehalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

}

.tensection{

background-color: none;

height: 0%;

margin-top: 3.8%;

margin-bottom: 0%;

text-align: center;

}

.tenhalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

}

.elevensection{

background-color: none;

height: 0%;

margin-top: 120%;

margin-bottom: 0%;

text-align: center;

}

.elevenhalf{

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 magic button with micke */

.btn_1 {

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

color: aqua;

font-family: 'Source Sans Pro', sans-serif;

font-size: 0.8vw;

text-align: center;

font-weight: none;

text-transform: none;

line-height: 1.2vw;

width: auto;

list-style-type: none;

padding: 0.3vw 0.8vw;

margin: 0px 4px;

margin-top: 3%;

border: 2px solid pink;

display: inline-block;

border-radius: 0.3vw 1.2vw;

position: relative;

cursor: pointer;

border-style: solid;

}

.btn_1:hover{

background-color: white;

color: red;

border-radius: 3px 5px;

}

/* coding magic button with micke */

/* coding magic table - main with micke */

.btn_2 {

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;

text-align: right;

line-height: 0.7vw;

width: auto;

margin: 1px 3px;

margin-top: 0px;

margin-bottom: 0.1vw;

border: 3px solid white;

cursor: pointer;

padding: 3px 3px;

border-style: outset;

}

.btn_2: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_3 {

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

width: auto;

margin: 1px 3px;

margin-top: 0px;

margin-bottom: 0.1vw;

border: 3px solid white;

cursor: pointer;

padding: 3px 3px;

border-style: outset;

}

.btn_3: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 - main with micke */

/* coding button with micke */

.btn_4 {

background-color: blueviolet;

color: white;

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

font-size: 0.8vw;

font-weight: none;

text-transform: none;

line-height: 1vw;

width: auto;

margin: 0.1vw 0.1vw;

margin-top: 4%;

border: 3px solid white;

cursor: pointer;

padding: 0.1vw 0.2vw;

padding-top: 0.2vw;

border-style: outset;

}

.btn_4:hover{

background-color: white;

color: red;

border-style: inset;

}

/* coding button with micke */

/* coding button sidebar-sms with micke */

.btn_5 {

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_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 button sidebar-sms 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: linear-gradient( 135deg, #667eea 10%, purple 90%);

color: white;

}

/* coding button main-top 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-spacing: 1px 1px;

position: center;

}

td {

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

background-color: none;

padding: 0.1vw 0.1vw;

border: 1px solid none;

font-size: 1vw;

text-align: center;

}

th_1 {

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

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

padding: 0.25vw 0.25vw;

font-size: 1.2vw;

text-align: center;

}

table.two {

border-collapse: collapse;

width: auto;

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

}

th, td {

font-family: 'Arial', 'Helvetica', 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: center;

font-weight: none;

text-transform: none;

}

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>Apollo 11</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_id> <a style="color:blueviolet;" href="trimagic.html"><i class="fa fa-square"><span>Trimagic</span></i></a> </li_id>

<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>

</div></div>

</header>

<tr>

<td>

<h4>Trimagic Squaremagie 🏠</h4>

</td>

</tr>

</table>

</div>

</div></div>

</section>

<tr>

<td>

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

</td>

</tr>

</table>

</div>

</div></div>

</section>

<tr>

<td>

<h3><p style="font-size: 0.75vw; padding-top: 0.1vw" class="button"> DOWNLOAD WALTER TRUMP´S TRIMAGIC SQUARES OF ORDER 12 EXCEL, PDF AND XPS-FILES </p></h3>

</td>

</tr>

</table>

</div>

</div></div>

</section>

<tr>

<td>

<abbr title="Download Walter Trump´s Trimagic Square of Order 12A, pdf-file."><a href="../Squarespace_3/Trimagic_WalterTrump12_1.pdf" target="_blank" download><button class="btn_1">Trimagic Square 12 A pdf</button></a></abbr>

<abbr title="Download Walter Trump´s Trimagic Square of Order 12A, xps-file."><a href="../Squarespace_3/Trimagic_WalterTrump12_1.xps" target="_blank" download><button class="btn_1">Trimagic Square 12 A xps</button></a></abbr>

<abbr title="Download Walter Trump´s Trimagic Square of Order 12B, pdf-file."><a href="../Squarespace_3/Trimagic_WalterTrump12_2.pdf" target="_blank" download><button class="btn_1">Trimagic Square 12 B pdf</button></a></abbr>

</td>

</tr>

</table>

</div>

</div></div>

</section>

<tr>

<td>

<abbr title="Download Walter Trump´s Trimagic Square of Order 12B, xps-file."><a href="../Squarespace_3/Trimagic_WalterTrump12_2.xps" target="_blank" download><button class="btn_1">Trimagic Square 12 B xps</button></a></abbr>

<abbr title="Download Trimagic Square of Order 12, pdf-file."><a href="../Squarespace_3/TrimagicSquare_Order12.pdf" target="_blank" download><button class="btn_1">Trimagic Square 12 C pdf</button></a></abbr>

<abbr title="Download Trimagic Square of Order 12, xps-file."><a href="../Squarespace_3/TrimagicSquare_Order12.xps" target="_blank" download><button class="btn_1">Trimagic Square 12 C xps</button></a></abbr>

</td>

</tr>

</table>

</div>

</div></div>

</section>

<th>

<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>

</th>

<th>

<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>

</th>

</table>

</div>

</section>

<p style="color: white; text-align: center; font-size: 0.75vw; font-weight: none;">First known 12th-order trimagic square by @ Walter Trump, June 2002. Second by Mikael Hermansson and Louis Caya 2006-26.</p>

</div>

<tr>

<td>

<abbr title="Download Trimagic Square of Order 12-15, Excel document/xlsx-file"><a href="../Squarespace_3/TrimagicSquare_Order12-15.xlsx" target="_blank" download><button class="btn_4">Trimagic Square 12 xlsx</button></a></abbr>

<abbr title="World Class Trimagic Square of Order 48, latest update with 4x trimagic diagonal. Word document/html"><a href="../WordDocument/TrimagicSquare2026%20_Order_48.html" target="_blank"><button class="btn_4">Trimagic Square 48 html</button></a></abbr>

<abbr title="World Class Trimagic Square of Order 48, latest update with 4x trimagic diagonal. Excel document/html"><a href="../ExcelDocument/TrimagicSquare2026_Order48c.html" target="_blank"><button class="btn_4">Trimagic Square 48 html</button></a></abbr>

<abbr title="World Class of Super Trimagic Square of Order 48, latest update with 4x trimagic diagonal. Excel document/xlsx-file"><a href="../Squarespace_4/TrimagicSquare2026_Order48c.xlsx" target="_blank" download><button class="btn_4">Trimagic Square 48 xlsx</button></a></abbr>

</td>

</tr>

</table>

</div>

</section>

<tr>

<th_1 style="color: aqua; font-size: 0.85vw">Hunter and Madachy 1975:</th_1>

</tr><br /><br />

<tr>

<th_1 style="color: white; font-size: 0.8vw">S1=(n:a,d)=½*n*[2*a+d*(n^2-1)]</th_1>

</tr><br /><br />

<tr>

<th_1 style="color: white; font-size: 0.8vw">n=Order number of Magic Square</th_1>

</tr><br /><br />

<tr>

<th_1 style="color: white; font-size: 0.8vw">a=start input of integer 0.1.2.3....(min=< a <=max)</th_1>

</tr><br /><br />

<tr>

<th_1 style="color: white; font-size: 0.8vw">d=distance between integer 1.2.3...num:[d not zero]</th_1>

</tr><br /><br />

</ul>

</table>

</div>

</section>

</div>

</article>

<h2>Squaremagie space</h2>

<span>Bimagic: Aale de Winkel 8</span>

</li></a>

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

</li></a>

<span>Trimagic: Chen Qinwu 16</span>

</li></a>

<span>Bimagic: Su Maoting 20</span>

</li></a>

<span>Bimagic: Su Maoting 24</span>

</li></a>

<span>Trimagic: Chen Qinwu 24</span>

</li></a>

<span>Trimagic: Li Wen 24</span>

</li></a>

<span>Bimagic: Hermansson 25</span>

</li></a>

<span>Bimagic: Hermansson 26</span>

</li></a>

<span>Bimagic: Hermansson 27</span>

</li></a>

<span>Trimagic: W. Benson 32</span>

</li></a>

<span>Trimagic: Hermansson 32</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>

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

</div>

</section>

</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</p>

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

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

</div>

</td_1>

</tr>

</table>

</div>

</section>

</div>

</aside>

<h3 style="color:black; text-align: left" class="text-medium" id="program">A small step on the moon, and a big step for the humanity (1969).</h3>

<B>Apollo 11</B> was the first spaceflight to land humans on the Moon, conducted by NASA from July 16 to 24, 1969. Commander Neil Armstrong and Lunar Module Pilot Edwin “Buzz” Aldrin landed the Lunar Module <cite>Eagle</cite> on July 20 at 20:17 UTC, and Armstrong became the first person to step onto the surface about six hours later, at 02:56 UTC on July 21. Aldrin joined him 19 minutes afterward, and together they spent about two and a half hours exploring the site they had named Tranquility Base upon landing. They collected 47.5 pounds (21.5 kg) of lunar material to bring back to Earth before re-entering the Lunar Module. In total, they were on the Moon’s surface for 21 hours, 36 minutes before returning to the Command Module <cite>Columbia</cite>, which remained in lunar orbit, piloted by Michael Collins.<br /><br />

• Edwin “Buzz” Aldrin (1930-2025) an American former astronaut in the Apollo 11 mission, and was the Lunar Module <cite>Eagle</cite> pilot. He was the second person to walk on the moon after mission commander Neil Armstrong.<br /><br />

• Michael Collins (1930-2021) an American former astronaut in the Apollo 11 mission, and was the commander of module <cite>Columbia</cite> flew around the moon while his crewmates, Neil Armstrong and Buzz Aldrin, made the crewed landing on the surface of the moon.<br /><br />

• Neil Armstrong (1930-2012) an American former astronaut and commander in the Apollo 11 mission, became the first person to walk on the moon.<br /><br />

On July 20, 1969, Armstrong and Apollo 11 Lunar Module pilot Buzz Aldrin became the first people to land on the Moon, and the next day they spent two and a half hours outside the Lunar Module <cite>Eagle</cite> spacecraft while Michael Collins remained in lunar orbit in the Apollo Command Module <cite>Columbia</cite>. When Armstrong first stepped onto the lunar surface, he famously said: "That's one small step for a man, one giant leap for mankind. It was broadcast live to an estimated 530 million viewers worldwide. Apollo 11 was a major U.S. victory in the Space Race against the Soviet Union, by fulfilling a national goal proposed in 1961 by President John F. Kennedy "of landing a man on the Moon and returning him safely to the Earth" before the end of the decade.<br /><br />

https://www.wikipedia.org</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>

</footer>

</footer>

</footer>

</centre>

</body>

</html>