<!DOCTYPE html>

<head>

<title>Squaremagie Trimagic</title>

</head>

margin: 0;

padding: 0;

box-sizing: border-box;

}

body{

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

background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("../images/bg.jpg");

background-repeat: no-repeat;

background-size: 100% 100%;

display: autoflex;

justify-content: center;

align-items: center;

float: center;

width: 100%;

min-height: 100vh;

overflow: hidden;

margin: 0;

}

/* The Modal (background) */

.modal {

display: none; /* Hidden by default */

position: fixed; /* Stay in place */

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

padding-top: 100px; /* 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 */

text-align: left;

}

/* Modal Content */

.modal-content {

background-color: #fefefe;

margin: auto;

padding: 15px;

border: 1px solid #888;

width: 562px;

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;

}

.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: 112px;

border: 1px dotted white;

box-shadow: 0 0 15px white;

background: transparent;

margin: 0px 10px;

animation: rotate 3s linear infinite;

}

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

content: "";

position: absolute;

top: -2px;

left: -5px;

width: 10px;

height: 10px;

background: deeppink;

border-radius: 50%;

box-shadow: 0 0 15px deeppink;

}

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

}

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

.menu{

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

width: 100%;

height: 100px;

text-align: center;

}

.leftmenu {

width: 13%;

float: left;

margin-top: 3%;

}

.rightmenu {

width: 57%;

float: right;

margin-top: 2%;

}

.leftmenu h4{

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

padding-left: 70px;

font-weight: bold;

color: green;

font-size: 22px;

}

.menu-bar ul{

display: inline-flex;

list-style: none;

}

.menu-bar ul li{

width: 100px;

margin: 5px;

padding: 5px;

font-size: 16px;

}

.menu-bar ul li a{

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

color: white;

text-decoration: none;

}

.menu-bar ul li :hover{

color: red;

border-radius: 0px;

}

.menu-bar .fa{

margin-right: 0px;

margin-top: 0px;

}

.sub-menu-1{

display: none;

}

.menu-bar ul li:hover .sub-menu-1{

display: block;

position: absolute;

background: rgba(0,0,0,0.25);

margin-top: 1px;

margin-left: 0px;

}

.menu-bar ul li:hover .sub-menu-1 ul{

display: block;

margin-top: 5px;

}

.menu-bar ul li:hover .sub-menu-1 ul li{

width: 140px;

height: 30px;

padding: 8px;

border-bottom: 1px dotted #fff;

background: transparent;

border-radius: 0;

text-align: left;

margin-top: 0px;

}

.menu-bar ul li:hover .sub-menu-1 ul li:last-child{

border-bottom: none

margin-right: 0px;

margin-top: 2px;

}

.menu-bar ul li:hover .sub-menu-1 ul li a:hover{

color: red;

}

.fa-angle-right{

float: right;

}

.sub-menu-2{

display: none;

}

.hover-me:hover .sub-menu-2{

position: absolute;

display: block;

margin-top: -13px;

margin-left: 132px;

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

}

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

/* coding layout with micke */

body {

display: grid;

grid-template-areas:

"header header header"

"nav article ads"

"footer footer footer";

grid-template-rows: 5% 1fr 5%;

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

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

height: 100vh;

margin: 0;

}

/* Stack the layout on small devices/viewports. */

@media all and (max-width: 576px) {

body {

grid-template-areas:

"header"

"article"

"ads"

"nav"

"footer";

grid-template-rows: 70px 1fr 70px 1fr 70px;

grid-template-columns: 1fr;

}

#pageHeader {

grid-area: header;

}

#pageFooter {

grid-area: footer;

}

#mainArticle {

grid-area: article;

}

#mainNav {

grid-area: nav;

}

#siteAds {

grid-area: ads;

}

header, div {

background: none;

font-size: 17px;

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

color: white;

padding: 15px 0px;

text-align: center;

}

article, div {

padding: 0px 0px;

background: none;

font-size: 15px;

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

color: white;

text-align: center;

margin-top: 20px;

}

nav, div {

padding: 0px 0px;

background: none;

font-size: 16px;

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

color: greenyellow;

text-align: center;

margin-top: 0px;

}

ads, div {

padding: 0px 0px;

background: none;

font-size: 10px;

color: gold;

text-align: center;

margin-top: 0px;

}

footer div {

padding: 0px 0px;

background: none;

font-size: 16px;

color: green;

margin-top: 0px;

}

/* coding layout 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: 48px;

text-align: center;

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

margin-bottom: 5px;

}

@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: 0%;

}

.firsthalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

.secondsection{

background-color: none;

height: 0%;

margin-top: 5px;

}

.secondhalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

}

.thirdsection{

background-color: none;

height: 0%;

margin-top: 15px;

}

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

}

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

}

.fifthhalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

font-weight: none;

text-transform: none;

}

.sixthsection{

background-color: none;

height: 0%;

margin-top: 0px;

}

.sixthhalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

font-weight: none;

text-transform: none;

}

.sevensection{

background-color: none;

height: 0%; /* coding the top margin of center column second section article div */

margin-top: 0%;

}

.sevenhalf{

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

.btn {

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

color: blue;

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

border-style: none;

font-size: 10px;

font-weight: none;

text-transform: none;

line-height: 13px;

width: auto;

margin-top: 15px;

margin-bottom: 0px;

border: 3px solid white;

cursor: pointer;

padding: 3px 3px;

border-style: outset;

}

.btn:hover{

background-color: white;

color: black;

padding: 3px 3px;

border: 3px solid white;

font-weight: bold;

text-transform: uppercase;

}

/* coding magic table with micke */

.btn_1 {

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

color: white;

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

border-style: none;

font-size: 10px;

font-weight: none;

text-transform: none;

line-height: 14px;

width: auto;

margin: 0px 3px;

margin-top: 3px;

margin-bottom: 2px;

border: 3px solid white;

cursor: pointer;

padding: 3px 3px;

border-style: outset;

}

.btn_1:hover{

background-color: white;

color: black;

padding: 3px 3px;

border: 3px solid white;

font-weight: bold;

text-transform: uppercase;

}

/* coding magic table with micke */

/* coding button with micke */

.btn_2 {

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

color: blue;

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

font-size: 13px;

font-weight: none;

text-transform: none;

line-height: 20px;

width: auto;

margin: 10px 2px;

border: 3px solid white;

cursor: pointer;

padding: 0px 5px;

border-style: outset;

}

.btn_2:hover{

background-color: white;

color: red;

border-style: inset;

}

.btn_3 {

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

color: aqua;

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

font-size: 16px;

text-align: center;

font-weight: none;

text-transform: none;

line-height: 25px;

width: auto;

list-style-type: none;

padding: 5px 15px;

margin: 0px 4px;

margin-top: 3%;

border: 2px solid pink;

display: inline-block;

border-radius: 3px 18px;

position: relative;

cursor: pointer;

border-style: solid;

}

.btn_3:hover{

background-color: white;

color: red;

border-radius: 3px 5px;

}

p.button {

background-color: none;

color: white;

padding: 2px 5px;

text-align: center;

margin-top: 3%;

max-width: auto;

text-decoration: none;

display: inline-block;

font-size: 14px;

border-style: inset;

}

p.button:hover {

background-color: purple;

color: white;

}

p.button_1 {

background-color: none;

color: white;

padding: 1px, 1px;

text-align: center;

text-decoration: none;

margin-top: 12px;

display: inline-block;

font-size: 14px;

position: relative;

border-style: outset;

}

p.button_1:hover {

background-color: white;

}

p.button_2 {

background-color: none;

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

color: black;

padding: 0px, 0px;

text-align: left;

text-decoration: none;

margin-top: 1%;

display: inline-block;

font-size: 15px;

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

height: 275px;

border-style: none;

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

}

p.button_2:hover {

background-color: white;

color: black;

}

/* coding button with micke */

/* coding text with micke */

.text{

width: 100%;

margin-top: 0%;

text-transform: uppercase;

color: white;

}

.text h1{

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

font-weight: 700px;

font-size: 40px;

margin: 5px 0px;

margin-top: 2%;

margin-bottom: 0%;

text-align: center;

}

.text h2{

font-size: 9px;

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

font-weight: none;

text-transform: none;

}

.text h3{

font-size: 15px;

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

text-align: center;

}

.text h4{

font-size: 12px;

font-family: 'Helvetica';

margin-top: 0%;

}

.text h5{

font-size: 12px;

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

font-weight: none;

text-transform: none;

}

.text h6{

font-size: 18px;

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

font-weight: 500px;

text-align: left;

}

h1{

text-align: center;

}

h2{

text-align: center;

}

h3{

text-align: center;

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

}

text-align: center;

margin-top: 1px;

font-size: 14px;

}

p_1{

text-align: center;

margin-top: 0px;

font-size: 15px;

}

.text-medium{

font-family: 'piazzolla', serif;

color: blue;

font-size: 17px;

font-weight: bold;

text-decoration: none;

text-transform: none;

}

/* coding text with micke */

/* coding JS images with micke */

img.medium {

width: 500px;

height: 500px;

}

img.align-center{

display: block;

margin: 0px auto;

}

/* coding JS images with micke */

/* coding table with micke */

table.one {

border-spacing: 1px 1px;

position: center;

}

th_1 {

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

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

padding: 7px 5px;

font-size: 19px;

text-align: center;

}

th_2 {

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

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

padding: 7px 5px;

font-size: 14px;

text-align: center;

}

td {

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

background-color: none;

padding: 3px 3px;

border: 1px solid white;

font-size: 13px;

text-align: left;

}

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;

max-width: auto;

font-size: 0px;

text-align: center;

font-weight: none;

text-transform: none;

}

table.three td {

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

background-color: none;

padding: 4px 4px;

border: 1px solid white;

font-size: 13px;

text-align: left;

}

/* coding table with micke */

section_2{

text-align: center;

font-size: 24px;

color: purple;

}

.footer #button {

width: 34px;

height: 34px;

border: none 18px solid;

border-radius: 34px;

margin: auto;

position: relative;

-webkit-transition: all 1s ease;

-moz-transition: all 1s ease;

-o-transition: all 1s ease;

-ms-transition: all 1s ease;

transition: all 1s ease;

}

.footer #button:hover {

width: 34px;

height: 34px;

border: none 18px solid;

-webkit-transition: all 1s ease;

-moz-transition: all 1s ease;

-o-transition: all 1s ease;

-ms-transition: all 1s ease;

transition: all 1s ease;

position: relative;

}

.footer {

bottom: 0;

left: 0;

position: fixed;

width: 100%;

height: 2em;

overflow: hidden;

margin: 0 auto;

-webkit-transition: all 1s ease;

-moz-transition: all 1s ease;

-o-transition: all 1s ease;

-ms-transition: all 1s ease;

transition: all 1s ease;

z-index: 999;

}

.footer:hover {

-webkit-transition: all 1s ease;

-moz-transition: all 1s ease;

-o-transition: all 1s ease;

-ms-transition: all 1s ease;

transition: all 1s ease;

height: 9em;

}

.footer #container{

margin-top: 0px;

width: 100%;

height: 100%;

position: relative;

top: 0;

left: 0;

background: none;

}

.footer #cont{

position: relative;

top: -25px;

right: 190px;

width: 150px;

height: auto;

margin:0 auto;

}

.footer_center{

width: 500px;

float: center;

text-align: center;

}

.footer h3{

font-family: 'Helvetica';

font-size: 20px;

font-weight: 100;

margin-top: 9%;

margin-bottom: 0%;

}

</style>

<body>

<h4><i> Micke </i></h4>

</div>

<ul>

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

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

<li> <a style="color:aqua;" href="../Trimagic/trimagic.html"><i class="fa fa-square">Trimagic</i></a>

<ul>

<li class="hover-me"><a href="#"><i class="fa fa-angle-right">Bimagic Square</i></a>

<ul>

<li><a href="BimagicSquare/bimagicsquare_n8a.html"><i>Bimagic n8 A</i></a></li>

<li><a href="BimagicSquare/bimagicsquare_n8b.html"><i>Bimagic n8 B</i></a></li>

<li><a href="BimagicSquare/bimagicsquare_n8c.html"><i>Bimagic n8 C</i></a></li>

<li><a href="BimagicSquare/bimagicsquare_n8d.html"><i>Bimagic n8 D</i></a></li>

<li><a href="BimagicSquare/bimagicsquare_n8e.html"><i>Bimagic n8 E</i></a></li>

<li><a href="BimagicSquare/bimagicsquare_n20a.html"><i>Bimagic n20 A</i></a></li>

<li><a href="BimagicSquare/bimagicsquare_n20b.html"><i>Bimagic n20 B</i></a></li>

<li><a href="BimagicSquare/bimagicsquare_n24a.html"><i>Bimagic n24 A</i></a></li>

<li><a href="BimagicSquare/bimagicsquare_n24b.html"><i>Bimagic n24 B</i></a></li>

<li><a href="BimagicSquare/bimagicsquare_n24c.html"><i>Bimagic n24 C</i></a></li>

<li><a href="BimagicSquare/bimagicsquare_n26.html"><i>Bimagic n26</i></a></li>

</ul>

</div>

</li>

<li class="hover-me"><a href="#"><i class="fa fa-angle-right">Hermansson 25</i></a>

<ul>

<li><a href="LatinEuler/bimagicsquare_n25a1.html"><i>Latin Square A1</i></a></li>

<li><a href="LatinEuler/bimagicsquare_n25a2.html"><i>Latin Square A2</i></a></li>

<li><a href="LatinEuler/bimagicsquare_n25a3.html"><i>Latin Square A3</i></a></li>

<li><a href="LatinEuler/bimagicsquare_n25b1.html"><i>Latin Square B1</i></a></li>

<li><a href="LatinEuler/bimagicsquare_n25b2.html"><i>Latin Square B2</i></a></li>

<li><a href="LatinEuler/bimagicsquare_n25b3.html"><i>Latin Square B3</i></a></li>

<li><a href="LatinEuler/bimagicsquare_n25c1.html"><i>Latin Square C1</i></a></li>

<li><a href="LatinEuler/bimagicsquare_n25c2.html"><i>Latin Square C2</i></a></li>

<li><a href="LatinEuler/bimagicsquare_n25c3.html"><i>Latin Square C3</i></a></li>

<li><a href="LatinEuler/bimagicsquare_n25d1.html"><i>Latin Square D1</i></a></li>

<li><a href="LatinEuler/bimagicsquare_n25d2.html"><i>Latin Square D2</i></a></li>

<li><a href="LatinEuler/bimagicsquare_n25d3.html"><i>Latin Square D3</i></a></li>

</ul>

</div>

</li>

<li class="hover-me"><a href="#"><i class="fa fa-angle-right">Walter Trump 12</i></a>

<ul>

<li><a href="WTrump/trimagicsquare_n12a.html"><i>Tmagic Square 1</i></a></li>

<li><a href="WTrump/trimagicsquare_n12b.html"><i>Tmagic Square 2</i></a></li>

<li><a href="WTrump/trimagicsquare_n12c.html"><i>Tmagic Square 3</i></a></li>

<li><a href="WTrump/trimagicsquare_n12d.html"><i>Tmagic Square 4</i></a></li>

<li><a href="WTrump/trimagicsquare_n12e.html"><i>Tmagic Square 5</i></a></li>

<li><a href="WTrump/trimagicsquare_n12f.html"><i>Tmagic Square 6</i></a></li>

<li><a href="WTrump/newsnurnberger_article.html"><i>News Headline</i></a></li>

</ul>

</div>

</li>

<li class="hover-me"><a href="#"><i class="fa fa-angle-right">Trimagic Square</i></a>

<ul>

<li><a href="TrimagicSquare/trimagicsquare_n16.html"><i>Trimagic Sq. n16</i></a></li>

<li><a href="TrimagicSquare/trimagicsquare_n24a1.html"><i>Trimagic n24 A1</i></a></li>

<li><a href="TrimagicSquare/trimagicsquare_n24a2.html"><i>Trimagic n24 A2</i></a></li>

<li><a href="TrimagicSquare/trimagicsquare_n24a3.html"><i>Trimagic n24 A3</i></a></li>

<li><a href="TrimagicSquare/trimagicsquare_n24b1.html"><i>Trimagic n24 B1</i></a></li>

<li><a href="TrimagicSquare/trimagicsquare_n24b2.html"><i>Trimagic n24 B2</i></a></li>

<li><a href="TrimagicSquare/trimagicsquare_n24b3.html"><i>Trimagic n24 B3</i></a></li>

<li><a href="TrimagicSquare/trimagicsquare_n32a.html"><i>Trimagic n32 A</i></a></li>

<li><a href="TrimagicSquare/trimagicsquare_n32b.html"><i>Trimagic n32 B</i></a></li>

<li><a href="TrimagicSquare/trimagicsquare_n32c.html"><i>Trimagic n32 C</i></a></li>

</ul>

</div>

</li>

</ul>

</div>

</li>

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

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

<li> <a href="../Contact/contact.html"><i class="fa fa-mail">Contact</i></a> </li>

</ul>

</div>

</div></div>

</header>

<h1 class="animate-charcter">MULTIMAGIE SPACE</h1>

</div>

<tr>

<td_2>

<h3 style="color:deepskyblue;"> Design * Development * Hightech </h3>

</td_2>

</tr>

<tr>

<td_2>

<h1> TRIMAGIC SQUAREMAGIE </h1>

</td_2>

</tr>

<tr>

<td_2>

<h3><p class="button"> DOWNLOAD WALTER TRUMP´S TRIMAGIC SQUARES OF ORDER 12 ON EXCEL, PDF AND XPS-FILES </p></h3>

</td_2>

</tr>

</table>

</div>

</div></div>

</section>

<tr>

<td_2>

<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_3">Order 12 A</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_3">Order 12 A</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_3">Order 12 B</button></a></abbr>

<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_3">Order 12 B</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_3">Order 12 C</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_3">Order 12 C</button></a></abbr>

</td_2>

</tr>

</table>

</div>

</div></div>

</section>

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

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

</table>

</div>

</div></div>

</section>

<h5>First known 12th-order trimagic square of Walter Trump, June 2002. Second trimagic square also by @ Walter Trump 2002-18.</h5>

<tr>

<td_2>

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

</td_2>

</tr>

</table>

</div>

</section>

</article>

<tr>

<th_1 style="color:greenyellow;">Mikael Hermansson 2025</th_1>

</tr>

</table>

<p style="color:white;">Buzz Aldrin on the moon. Credit: NASA</p>

<p_1 style="color:black;"><b>A small step on the moon, and a big step for the humanity (1969).</b></p_1>

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

ref: https://www.wikipedia.org</p>

</div>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></button>

<p style="color:white;">Super Bimagic Square of Order 9.</p>

</div>

</section>

</nav>

<tr>

<th_2>dna Animation</th_2>

</tr>

</table>

</div>

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

</table>

</div>

</section>

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

</a></h3>

<section_2>

Magic Square, Squaremagie & Multimagie

</section_2>

</div>

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

</table>

</div>

</section>

</footer>

</body>

</html>