<!DOCTYPE html>

<head>

<title>Squaremagie History</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 main"

"inline content content"

"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 auto;

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

"inline content content"

"left center right";

grid-template-rows: auto 1fr auto;

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

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

grid-column-gap: 8px;

grid-row-gap: 5px;

padding: 10px;

padding-bottom: 8px;

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

width: 100%;

min-height: 100vh;

max-width: auto;

max-height: 100%;

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

overflow-y: auto;

}

.header h1 {

font-size: 12px;

margin-bottom: 4px;

}

.main {

padding: 10px 5px;

}

/* Building responsive layouts for mobile devices */

@media (max-width: 768px) {

.page {

display: grid;

grid-template-areas:

"top above above"

"nav main sms"

"inline content space"

"left center right";

grid-template-rows: auto 1fr auto;

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

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

grid-gap: 10px;

padding: 10px;

min-height: 100vh;

max-width: auto;

max-height: 100%;

margin: 0;

}

.header h1 {

font-size: 12px;

margin-bottom: 4px;

}

.main {

padding: 8px 4px;

}

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

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

#pageHeader {

grid-area: top;

}

.top div {

grid-area: flex;

}

.top, header {

grid-area: top;

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

grid-row: 1 / 2 !important;

background: linear-gradient(135deg, #1e3c72 0%, gold 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%, purple 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: rgba(255, 255, 255, 0.4);

background-repeat: no-repeat;

background-size: 100% 100%;

justify-content: center;

align-items: center;

min-height: 100vh;

max-width: auto;

max-height: 100%;

margin-bottom: 0%;

padding: 2%;

padding-bottom: 2%;

border-radius: 8px;

border-bottom: none;

position: relative;

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

}

.font h1{

color: white;

font-size: 1.6vw;

text-align: left;

margin-bottom: 0vw;

border-bottom: none;

margin-top: 0px;

}

.font h2{

color: white;

font-size: 1vw;

text-align: center;

margin-bottom: 2px;

border-bottom: none;

margin-top: 0%;

}

.font h3{

color: white;

font-size: 0.9vw;

text-align: left;

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

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

border-bottom: none;

padding: 0px;

margin-top: 1%;

}

.font h4{

color: blue;

margin-top: 0%;

font-size: 1.5vw;

text-align: center;

padding-bottom: 10px;

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

border-bottom: 3px solid #667eea;

}

.font p{

color: #4a5568;

line-height: 1.8;

font-size: 0.85vw;

margin-bottom: 4px;

text-align: left;

}

#menuSection {

grid-area: center;

}

.mac-menu {

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

}

.mac-section {

background: lightgoldenrodyellow;

padding: 6px;

border-radius: 8px;

margin: 4px 4px;

margin-top: 2%;

margin-bottom: 0%;

border-left: 4px solid #667eea;

}

.mac-section:hover {

background: white;

padding: 6px;

border-radius: 8px;

margin: 4px 4px;

margin-top: 2%;

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.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: #4a5568;

line-height: 1.2;

font-size: 0.9vw;

margin-bottom: 4px;

text-align: left;

}

.mac-section:hover p {

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

color: black;

font-size: 0,9vw;

line-height: 1.2;

text-align: left;

padding: 0px;

margin-bottom: 4px;

}

/* 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%, gold 100%);

padding: 10%;

border-radius: 12px;

max-width: auto;

max-height: 100%;

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

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

}

.sidenav h2 {

color: blue;

font-size: 1.1vw;

text-align: center;

padding-top: 4%;

padding-bottom: 3%;

max-width: auto;

max-height: 100%;

margin-bottom: 0%;

border-bottom: 3px solid #667eea;

}

.sidenav p {

color: blue;

font-size: 1vw;

text-align: center;

line-height: 1;

margin-top: 0%;

}

.sidenav ul {

list-style: none;

padding: 4% 0%;

}

.sidenav li {

color: greenyellow;

font-size: 0.75vw;

padding: 12px 8px;

margin-bottom: 8px;

border-radius: 8px;

cursor: pointer;

transition: all 0.3s ease;

}

.sidenav li:hover {

background: #667eea;

color: white;

transform: translateX(5px);

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

}

#menuAside {

grid-area: left;

}

.left div {

grid-area: flex;

}

.nav-menu {

list-style: none;

}

.nav-item {

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

display: flex;

align-items: center;

grid-gap: 12px;

}

.nav-item:hover {

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

transform: translateX(8px);

}

.nav-item.super {

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

}

.nav-item.active {

background: linear-gradient( 135deg, #667eea 0%, aqua 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, #f8ceec 0%, #a88beb 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: blueviolet;

font-size: 1.1vw;

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

text-align: center;

line-height: 0.9vw;

margin-top: 0%;

}

.sidesms ul {

list-style: none;

padding: 4% 0%;

}

.sidesms li {

color: yellow;

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, #667eea 0%, deeppink 100%);

display: flex;

align-items: center;

grid-gap: 12px;

}

.sms-item:hover {

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

transform: translateX(8px);

}

.sms-item.super {

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

}

.sms-item.active {

background: linear-gradient( 135deg, #667eea 0%, aqua 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 0px;

margin-left: 0px;

margin-right: -0.6%;

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

}

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

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

.menu{

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

max-width: auto;

max-height: 100%;

text-align: center;

}

.leftmenu {

float: left;

margin-top: 12.5%;

margin-left: 14%;

}

.leftmenu_1 {

float: left;

font-size: 0.5vw;

line-height: 2;

margin-top: 2.8%;

margin-left: 1%;

}

.rightmenu {

max-width: auto;

max-height: 100%;

float: right;

margin-top: 0%;

padding-bottom: 0px;

}

.menu-bar ul{

display: inline-flex;

list-style: none;

}

.menu-bar ul li{

width: 100px;

margin: 5px;

padding: 5px;

font-size: 15px;

}

.menu-bar ul li a{

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

color: white;

text-decoration: none;

}

.menu-bar ul li :hover{

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

padding: 2px 2px;

margin-bottom: 2px;

border-radius: 2px;

cursor: pointer;

transition: all 0.1s ease;

font-size: 15px;

color: white;

transform: translateX(1px);

}

.menu-bar ul li_id{

width: 100px;

margin: 5px;

padding: 5px;

font-size: 15px;

}

.menu-bar ul li_id a{

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

color: white;

text-decoration: none;

}

.menu-bar ul li_id :hover{

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

padding: 2px 2px;

margin-bottom: 2px;

border-radius: 2px;

cursor: pointer;

transition: all 0.1s ease;

font-size: 15px;

color: red;

transform: translateX(1px);

}

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

/* coding color script with micke */

.animate-charcter {

text-transform: uppercase;

background-image: linear-gradient(

225deg,

purple 10%,

blueviolet 30%,

deeppink 70%,

yellow 90%

);

background-size: auto auto;

background-clip: border-box;

background-size: 200% auto;

color: #fff;

background-clip: text;

color: transparent;

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

animation: textclip 3s linear infinite;

display: inline-block;

font-size: 1.38vw;

text-align: center;

}

@keyframes textclip {

to {

background-position: -200% center;

}

/* coding color script with micke */

/* coding gallery and text section with micke */

.firstsection{

background-color: none;

height: 0%;

margin-top: 3%;

margin-bottom: 0%;

}

.firsthalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

font-weight: none;

text-transform: none;

}

.secondsection{

background-color: none;

height: 0%;

margin-top: 0.5%;

margin-bottom: 0%;

}

.secondhalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

font-weight: none;

text-transform: none;

}

.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_1 {

background: linear-gradient(135deg, deeppink 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-right: 1px;

margin-bottom: 2px;

border: 3px solid white;

cursor: pointer;

padding: 3px 3px;

border-style: outset;

}

.btn_1:hover{

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

color: black;

padding: 3px 3px;

border: 3px solid white;

font-weight: bold;

text-transform: uppercase;

}

.btn_2 {

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

margin-bottom: 2px;

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

margin-bottom: 2px;

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;

}

.btn_4 {

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

max-width: 100%;

height: auto;

margin-left: 1px;

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;

}

/* coding magic table with micke */

/* coding text with micke */

.text{

width: 100%;

margin-top: 0%;

text-transform: uppercase;

color: purple;

}

.text-medium{

font-family: 'piazzolla', serif;

color: blue;

font-size: 1vw;

font-weight: bold;

text-decoration: none;

text-transform: none;

}

/* coding text with micke */

/* coding JS images with micke */

img.small {

width: 9.7vw;

height: 6.25vw;

}

img.medium {

width: 18vw;

height: 18vw;

}

/* coding JS images with micke */

/* The Modal (background) */

.modal {

display: none; /* Hidden by default */

position: fixed; /* Stay in place */

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

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

left: 0;

top: 0;

width: 100%; /* Full width */

height: 100%; /* Full height */

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

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

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

color: black;

text-align: left;

}

/* Modal Content */

.modal-content {

background-color: #fefefe;

margin: auto;

padding: 15px;

border: 1px solid #888;

width: 31%;

height: scroll;

}

/* The Close Button */

.close {

color: red;

float: right;

font-size: 28px;

font-weight: bold;

}

.close:hover,

.close:focus {

color: #000;

text-decoration: none;

cursor: pointer;

}

/* coding table with micke */

table.one {

border-collapse: collapse;

width: 100%;

margin-top: 0%;

border-spacing: 2px 1px;

position: center;

text-align: center;

}

td {

background-color: none;

padding: 3px 2px;

border: 2px solid none;

position: center;

text-align: center;

}

table.two {

border-collapse: collapse;

width: auto;

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

}

th, td_2 {

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

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

padding: 0px;

height: auto;

width: auto;

font-size: 0px;

text-align: right;

}

table.three td {

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

background-color: none;

padding: 0.15vw 0.15vw;

padding-top: 0.15vw;

border: 1px solid white;

font-size: 0.8vw;

text-align: right;

}

table.four td {

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

background-color: none;

padding: 0.15vw 0.15vw;

padding-top: 0.25vw;

border: 1px solid white;

font-size: 0.75vw;

text-align: right;

}

/* coding table with micke */

/* coding powerpoint gallery button with micke */

div.gallery {

margin: 0px 3px;

border: 1px solid none;

float: left;

max-width: 100%;

height: auto;

font-size: 0.6vw;

}

div.gallery:hover {

border: 1px solid none;

padding: 0px 0px;

max-width: 100%;

height: auto;

}

div.desc {

padding: 1px 2px;

font-size: 0.6vw;

color: white;

text-align: center;

margin-bottom: 0%;

}

/* coding powerpoint gallery button with micke */

</style>

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

</div>

</div>

</ul>

</div>

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

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

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

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

<li_id> <a style="color:aqua;" href="history.html"><i class="fa fa-images"><span>History</span></i></a> </li_id>

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

<h4>Squaremagie History</h4>

<B>Leonhard Euler</B> (1707-1783) was a Swiss mathematician who made pioneering and influential discoveries such as analytic number theory, complex analysis and infinitesimat calculus. He introduced much of modern mathematical therminology and notatin, including the notation of mathematical function. He spent most of his adult life in St. Petersburg, Russia, and in Berlin, Preussia. Euler's interest in number theory and logic lead him to the construction of the Euler square, later named the latin square. It says that each row, column and diagonal should have only one letter a...d and only on number of each 1...4 in a square of order 4. This combination of letter and integer in rows, columns and diagonals are named Euler square. His original letter was Latin and Greek letter and when the conditions above where carry out, the square was named magic square. The result says that all rows, columns and diagonals have the same sum. Today it´s possibly to show Euler square who are bimagic at order 8, 9, 16, 25, 32. George Pfeffermann (1838-1914) was born on Frankfurt, Germany. But from age 21, he lived in France. He was a bank employee in Paris. Married in 1888 to a French women, and he obtained French citizenship in 1891. He authored numerous articles on magic square published in French, mainly between 1890 and 1896. He invented the first bimagic square of order 8. He made a puzzle of the world first known bimagic square and published in the French paper: "Les Tablettes du Chercheur", in 1890. In year 1891 he published also the worlds first known bimagic square of order 9. In 1907, he was named "Officer d'Académie" (Order of Academie palms) by the French Minister Aristide Briand. From 1909 until his death, he published one regular column titled "Divertissments" (Amusements) in the French paper: "Le Moniteur d'Issoire". Gaston Terry (1843-1913) a French mathematicain who spent his working life in Algeria. He find different method to prove that a Euler-latin square of order 6 does not exist. Together with his friend Brutus Portier he could find out several panmagic squares of order 8. They are bimagic and have trimagic diagonals. Tarry was the first to find an example of a trimagic square. It had order 128 and he named the method for construction: "Cabalistic condensator". He said that the discharge can only stay in a good conductive environment, a magic field. André Gérardin (1879-1953) a French mathematician who dedicated a theory of number he later called "Diophante". The paper was edited in Nancy, France, from 1948 to 1952. He made many solutions of bimagic squares of order 8. He did also many other published works in the mathematicial area. William H. Benson (1902-1984) an American who was in the U.S. Navy Forces until 1955. Later he was made an associate professor of mathematics in 1957. He is most famus for the construction of the first known trimagic square of order 32, together with Jacoby Oswald (1902-1984). Jacoby who was in early age a U.S. Champion in professional bridge playing. Later he was diverted for service as a U. S. Naval intelligence officer in World War II and Korea War. The whole square n32 was published for the first time 1976 in the book: "New recreations with Magic Squares". William H. Benson and Jacoby Oswald wrote about the method they had used. Her is an extract of their talks: <cite>"So far is known, this is the first trimagic square ever to be constructed of an order lower than 64. It has been completely checked by the use of IBM equipment and proved to be correct. The method is perfectly general and flexible. Any number of trimagic squares of the 32nd (64th, 128th, etc...) order can be constructed by its use of 32nd"</cite>. Today in modern time the trimagic square of order 32 from William H. Benson and Jacoby Oswald, 1976, is running in hightech equipment from Nikon Lithography and Windows operative systems. In the semiconducter industry (named semi-chips) both Intel and nVidia have square in the logo, thats main clearley that they work with key bimagic- and trimagic squares. In the eightieth and the earley nineties both Ericsson and Nokia (Finland) worked with magic squares in theirs mobile plattforms. </p>

</div>

<B>Modern Magic Squares</B>. Numerous 8th and 9th-order of bimagic squares have been constructed since Pfeffermann, a century ago, but none 10th or 11th-order have yet been successfully constructed. The first known 10th-order bimagic square was constructed in January 2004 by Fredrik Jansson, Finland. Fredrik where a young student, currently a second-year physics student at the Åbo Akademi University, in Turku. He also studies mathematics and computer science. Also in January 2004, only 18 days later than his 10th-order bimagic square, Fredrik Jansson constructed the first 11th-order bimagic square, using similar methods (combining bimagic series). In 2011, Chen Kenju, Li Wen, and Pan Fengchu published "A family of pandiagonal bimagic squares based on orthogonal arrays" in the Journal of Combinatorial Designs, Vol. 19, Issue 6, November 2011, pp. 427-438. Here is their abstract: <cite>In this article we give a construction of pandiagonal bimagic squares by means of four-dimensional bimagic rectangles, which can be obtained from orthogonal arrays with special properties. In particular, we show that there exists a normal pandiagonal bimagic square of order n4 for all positive integer n ≥ 7 such that gcd(n,30) = 1, which gives an answer to problem 22 of Abe in [Discrete Math 127 (1994), p.3–13].</cite> Another 11th-order bimagic square was constructed later by Chen Mutian, China, in May 2005. This magic square is symmetrical around its centre, meaning that two cells symmetrical around the centre have always the same sum, here 122. An interesting consequence is that the 4 lines of 11 numbers going through the centre are trimagic: the central row, the central column, and the 2 diagonals. Chen Qinwu and Chen Mutian, China, where first to constructed in year 2005 a trimagic square of order 16. Three year later in year 2008, Li Wen, China, constructed a second trimagic square of the same order 16. Chen Qinwu and Chen Mutian where after these work on the trimagic squares of order 16 appointed to be professors at the Computer Science Department of the Shantou University, Guangdong Province, China. First know prime bimagic square of order 11 was created and constructed in year 2006 from Christian Boyer, France, a former <cite>Microsoft</cite> employeer with responsibility over the French district in Europe. Nicolas Rouanet, France, is an engineer working at LATMOS, one of the optical department in France. This “Laboratoire ATmosphéres, Miliex, Observation Spatiales” (Atmospheres, Environments, Space Observations Laboratory) is a joint research unit of CNRS +University of Versailles +Sorbonne University. From January to November 2018, he worked on bimagic squares of primes, in orders from 8 to 25. Su Maoting, China, was about 45 years old when he created and constructed all his bimagic squares of higher orders you can find on the page of squaremagie space. He lives and works in Fujian Province, China. Walter Trump is also named in one article about trimagic squares.</p>

</div>

</article>

<h2>Photocollection</h2>

<span>Squaremagie sportpage 1</span>

</li></a>

<span>Squaremagie sportpage 2</span>

</li></a>

<span>Squaremagie sportpage 3</span>

</li></a>

<span>Squaremagie sportpage 4</span>

</li></a>

<span>Squaremagie sportpage 5</span>

</li></a>

<span>Squaremagie sportpage 6</span>

</li></a>

<span>Squaremagie sportpage 7</span>

</li></a>

<span>Squaremagie | Gotland 1</span>

</li></a>

<span>Squaremagie | Gotland 2</span>

</li></a>

</ul>

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

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></button>

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

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></button>

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

</table>

</div>

</section>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></button>

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

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></button>

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

</table>

</div>

</section>

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

<span>Encyclopedia | History 1</span>

</li></a>

<span>Encyclopedia | History 2</span>

</li></a>

</ul>

</div>

</aside>

</footer>

</footer>

</centre>

</body>

</html>