<!DOCTYPE html>

<head>

<title>Squaremagie Database</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%, greenyellow 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%, greenyellow 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%, greenyellow 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: greenyellow;

border-radius: 50%;

box-shadow: 0 0 15px greenyellow;

}

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

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>

</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_id> <a style="color:blueviolet;" href="database.html"><i class="fa fa-data"><span>Database</span></i></a> </li_id>

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

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

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

<li> <a href="../Space/space.html"><i class="fa fa-mail"><span>Space</span></i></a> </li>

</ul>

</div>

</div></div>

</header>

<tr>

<td>

<h4>Database 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 NEW LATIN-EULER SUPER BIMAGIC SQUARES OF ORDER 16 ON BUTTON </p></h3>

</td>

</tr>

</table>

</div>

</div></div>

</section>

<tr>

<td>

<abbr title="Upcoming Super Bimagic Square of Order 16."><a href="#"><button class="btn_1">Upcoming BimagicSquare</button></a></abbr>

<abbr title="Download Trimagic Square of Order 16, pdf-file."><a href="../Squarespace_3/TrimagicSquare_Order16.pdf" target="_blank" download><button class="btn_1">Bimagic Square 16 A pdf</button></a></abbr>

<abbr title="Upcoming Super Bimagic Square of Order 16."><a href="#"><button class="btn_1">Upcoming BimagicSquare</button></a></abbr>

</td>

</tr>

</table>

</div>

</div></div>

</section>

<tr>

<td>

<abbr title="Download Trimagic Square of Order 16, xps-file."><a href="../Squarespace_3/TrimagicSquare_Order16.xps" target="_blank" download><button class="btn_1">Bimagic Square 16 A xps</button></a></abbr>

<abbr title="Download Bimagic Square of Order 10-16, xlsx-file."><a href="../Squarespace_3/BimagicSquare2023_Order10-16.xlsx" target="_blank" download><button class="btn_1">Bimagic Square 16 A xlsx</button></a></abbr>

<abbr title="Download Trimagic Square of Order 16, xlsx-file."><a href="../Squarespace_3/TrimagicSquare_Order16.xlsx" target="_blank" download><button class="btn_1">Bimagic Square 16 B xlsx</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>

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

</table></button>

</th>

</table>

</div>

</section>

<p style="color: white; text-align: center; font-size: 0.7vw; font-weight: none;">Bimagic Square of Order 11. By @ Chen Mutian, 2005. 2) By @ Mikael Hermansson, 2021. Note: 55+105+23=99+17+67.</p>

</div>

<tr>

<td>

<abbr title="Download Free Computer made Bimagic Square of Order 8, Notepad-Document."><a href="../Squarespace_3/Bimagic_8x8_ess-diff.txt" target="_blank" download><button class="btn_4">Database Notepad 8x8</button></a></abbr>

<abbr title="World Class. Bimagic Square of Order 25-27, Excel-Document/html."><a href="../ExcelDocument/BimagicSquare2026_Order25-27.html" target="_blank"><button class="btn_4">Bimagic Square 25-27</button></a></abbr>

<abbr title="Download Free Computer made Bimagic Square of Order 8, Wordpad-Document."><a href="../Squarespace_3/Document_ess-diff_8x8.rtf" target="_blank" download><button class="btn_4">Database Wordpad 8x8</button></a></abbr>

</td>

</tr>

</table>

</div>

</section>

<tr>

<th_1 style="color: aqua; font-size: 0.85vw">Formula Squaremagie:</th_1>

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

<tr>

<th_1 style="color: white; font-size: 0.8vw">S1=(1/2)*n^3+(1/2)*n</th_1>

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

<tr>

<th_1 style="color: white; font-size: 0.8vw">S2=(1/3)*n^5+(1/2)*n^3+(1/6)*n</th_1>

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

<tr>

<th_1 style="color: white; font-size: 0.8vw">S3=(1/4)*n^7+(1/2)*n^5+(1/4)*n^3</th_1>

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

<tr>

<th_1 style="color: white; font-size: 0.8vw">S4=(1/5)*n^9+(1/2)*n^7+(1/2)*n^5</th_1>

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

</ul>

</table>

</div>

</section>

</div>

</article>

<h2>Squaremagie space</h2>

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

</li></a>

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

</li></a>

<span>Data | Jacués Guéron 13</span>

</li></a>

<span>Data | Jacués Guéron 17</span>

</li></a>

<span>Data | Jacués Guéron 18</span>

</li></a>

<span>Data | M. Hermansson 16</span>

</li></a>

<span>Data | M. Hermansson 25</span>

</li></a>

<span>Data | M. Hermansson 26</span>

</li></a>

<span>Data | Quinwu & Mutian 17</span>

</li></a>

<span>Data | Quinwu & Mutian 21</span>

</li></a>

<span>Database | Chen Quinwu 26</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 magic step on the moon, and a big step for the humanity.</h3>

Photocredit: NASA 1994.<br />

On May 25, 1961, President <B>John F. Kennedy</B> addressed the United States Congress on "Urgent National Needs" and declared:<br /><br />

I believe that this nation should commit itself to achieving the goal, before this decade [1960s] is out, of landing a man on the Moon and returning him safely to the Earth. No single space project in this period will be more impressive to mankind, or more important for the long-range exploration of space; and none will be so difficult or expensive to accomplish. We propose to accelerate the development of the appropriate lunar space craft. We propose to develop alternate liquid and solid fuel boosters, much larger than any now being developed, until certain which is superior. We propose additional funds for other engine development and for unmanned explorations—explorations which are particularly important for one purpose which this nation will never overlook: the survival of the man who first makes this daring flight. But in a very real sense, it will not be one man going to the Moon—if we make this judgment affirmatively, it will be an entire nation. For all of us must work to put him there.<br /><br />

— Kennedy's speech to Congress<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>