<!DOCTYPE html>

<head>

<title>Squaremagie Download 1</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: 17% 1fr 16%;

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

grid-column-gap: 8px;

grid-row-gap: 5px;

padding: 10px;

padding-bottom: 8px;

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

width: 100%;

min-height: 100vh;

max-width: auto;

max-height: 100%;

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

overflow-y: auto;

margin: 0;

}

/* Building responsive layouts for tablets */

@media (max-width: 1024px) {

.page {

display: grid;

grid-template-areas:

"top above above"

"nav main sms"

"inline content space"

"left center right";

grid-template-rows: auto 1fr auto;

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

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

grid-column-gap: 8px;

grid-row-gap: 5px;

padding: 10px;

padding-bottom: 8px;

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

width: 100%;

min-height: 100vh;

max-width: auto;

max-height: 100%;

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

overflow-y: auto;

}

.header h1 {

font-size: 12px;

margin-bottom: 4px;

}

.main {

padding: 10px 5px;

}

/* Building responsive layouts for mobile devices */

@media (max-width: 768px) {

.page {

display: grid;

grid-template-areas:

"top above above"

"nav main sms"

"inline content space"

"left center right";

grid-template-rows: auto 1fr auto;

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

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

grid-gap: 10px;

padding: 10px;

min-height: 100vh;

max-width: auto;

max-height: 100%;

margin: 0;

}

.header h1 {

font-size: 12px;

margin-bottom: 4px;

}

.main {

padding: 8px 4px;

}

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

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

#pageHeader {

grid-area: top;

}

.top div {

grid-area: flex;

}

.top, header {

grid-area: top;

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

grid-row: 1 / 2 !important;

background: linear-gradient(135deg, #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: linear-gradient(to top, rgba(0, 0, 0, 0.6), 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{

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

color: white;

font-size: 1.8vw;

line-height: 1.8vw

text-align: center;

padding: 0px;

margin-top: 0%;

}

.font h2{

color: aqua;

font-size: 1.1vw;

text-align: center;

margin-bottom: 0.1vw;

border-bottom: none;

margin-top: 0px;

}

.font h3{

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

color: white;

font-size: 1.8vw;

line-height: 1.8vw

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

}

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

border-radius: 12px;

max-width: auto;

max-height: 100%;

overflow-y: scroll; /* --! 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: white;

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%, blueviolet 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.1vw;

text-align: center;

padding-top: 4%;

padding-bottom: 3%;

max-width: auto;

max-height: 100%;

margin-top: 0%;

border-bottom: 3px solid greenyellow;

}

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

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

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

margin-bottom: 0%;

}

.firsthalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

.secondsection{

background-color: none;

height: 0%;

margin-top: 3%;

margin-bottom: 0%;

}

.secondhalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

}

.thirdsection{

background-color: none;

height: 0%;

margin-top: 3%;

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;

}

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

.btn {

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

margin-bottom: 2px;

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

}

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

.gallery {

--s: 9vw; /* control the size */

--g: 0.2vw; /* control the gap */

--f: 1.3; /* control the scale factor */

display: grid;

grid-gap: var(--g);

width: calc(4*var(--s) + 3*var(--g));

aspect-ratio: 1;

grid-template-columns: repeat(4,auto);

}

.gallery > img {

width: 0;

height: 0;

min-height: 100%;

min-width: 100%;

object-fit: cover;

cursor: pointer;

filter: grayscale(80%);

transition: .35s linear;

}

.gallery img:hover{

filter: grayscale(0);

width: calc(var(--s)*var(--f));

height: calc(var(--s)*var(--f));

}

</style>

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

</div>

</div>

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

<li :hover> <a cursor: pointer; id="myBtn"><i class="fa fa-nasa;"><span>Index</span></i></a> </li>

</ul>

</div>

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

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

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

<li> <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_id> <a style="color: aqua;" href="../Space/space.html"><i class="fa fa-mail"><span>Space</span></i></a> </li_id>

</ul>

</div>

</div></div>

</header>

<tr>

<td_2>

<h1>Squarespace magie <span>👑</span></h1>

</td_2>

</tr>

</table>

</div>

</section>

</div>

</div>

</section>

<p> By @ Mikael Hermansson, 2025. </p>

</div>

</article>

<h2><span>📁</span> Quality Download </h2>

<span>Magic Square Order 4-5 pdf</span>

</li></a>

<span>Magic Square of Order 6 pdf</span>

</li></a>

<span>Magic Square of Order 6 xps</span>

</li></a>

<span>Magic Square Order 6-7 pdf</span>

</li></a>

<span>Magic Square Order 6-7 xps</span>

</li></a>

<span>Bimagic Square Order 4-8 pdf</span>

</li></a>

<span>Bimagic Square Order 4-8 xps</span>

</li></a>

<span>Magic Square Order 7 A pdf</span>

</li></a>

<span>Magic Square Order 7 A xps</span>

</li></a>

<span>Magic Square Order 7 B pdf</span>

</li></a>

<span>Magic Square Order 7 B xps</span>

</li></a>

<span>Bimagic Square Order 8 A pdf</span>

</li></a>

<span>Bimagic Square Order 8 A xps</span>

</li></a>

<span>Bimagic Square of 10 A pdf</span>

</li></a>

<span>Bimagic Square of 10 A xps</span>

</li></a>

<span>Bimagic Square of 10 B pdf</span>

</li></a>

<span>Bimagic Square of 10 B xps</span>

</li></a>

<span>Magic Square of og 4-7 xlsx</span>

</li></a>

<span>Bimagic Square Order 11 pdf</span>

</li></a>

<span>Bimagic Square Order 11 xps</span>

</li></a>

<span>Bimagic Square Order 13 pdf</span>

</li></a>

<span>Bimagic Square Order 13 xps</span>

</li></a>

<span>Bimagic Square Order 14 pdf</span>

</li></a>

<span>Bimagic Square Order 14 xps</span>

</li></a>

<span>Bimagic Square Order 15 pdf</span>

</li></a>

<span>Bimagic Square Order 15 xps</span>

</li></a>

<span>Bimagic Square of 16 A pdf</span>

</li></a>

<span>Bimagic Square of 16 A xps</span>

</li></a>

<span>Bimagic Square of 16 B pdf</span>

</li></a>

<span>Bimagic Square of 16 B xps</span>

</li></a>

<span>Bimagic Square of 16 C pdf</span>

</li></a>

<span>Bimagic Square of 16 C xps</span>

</li></a>

<span>Bimagic Square of 16 D pdf</span>

</li></a>

<span>Bimagic Square of 16 D xps</span>

</li></a>

<span>Bimagic Square of 17 A pdf</span>

</li></a>

<span>Bimagic Square of 17 A xps</span>

</li></a>

<span>Bimagic Square of 10-15 pdf</span>

</li></a>

<span>Bimagic Square of 10-15 xps</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></abbr>

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

</div>

</section>

</div>

</aside>

<h2>Download index 1</h2>

<span>Squaremagie Download 1</span>

</li></a>

<span>Squaremagie Download 2</span>

</li></a>

<span>Squaremagie Download 3</span>

</li></a>

<span>Squaremagie Download 4</span>

</li></a>

<span>Squaremagie Download 5</span>

</li></a>

<span>Squaremagie Download 6</span>

</li></a>

<span>Squaremagie Download 7</span>

</li></a>

<span>Squaremagie Download 8</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:white; font-size: 0.7vw">4x Super Magic Square Order 5</p>

<span>Magic Square n4-7 Html</span>

</li></a>

<span>Excel Magic Square n4-7</span>

</li></a>

</ul>

</div>

</aside>

<h2 style="color: red;" class="text-medium" id="program">Squaremagie Quality Document</h2>

<B style="color:purple; font-size: 0.9vw; margin-bottom: 1%;">Mickes Download 1</B><br />

<B>#1 Magic Square of Order 4-5</B> Download Magic Square of Order 4-5. Adobe document/pdf-file by Mikael Hermansson 2025-26.<br />

<B>#2 Magic Square of Order 6</B> Download Magic Square of Order 6. Adobe document/pdf-file by Mikael Hermansson 2025-26.<br />

<B>#3 Magic Square of Order 6</B> Download Magic Square of Order 6. XPS-Viewer document/xps-file by Mikael Hermansson 2025-26.<br />

<B>#4 Magic Square of Order 6-7</B> Download Magic square of order 6-7. Adobe document/pdf-file by Mikael Hermansson 2025-26.<br />

<B>#5 Magic Square of Order 6-7</B> Download Magic Square of Order 6-7. XPS-Viewer document/xps-file by Mikael Hermansson 2025-26.<br />

<B>#6 Magic Square of Order 4-8</B> Download Magic Square of Order 4-8. Adobe document/pdf-file by Mikael Hermansson 2025-26.<br />

<B>#7 Magic Square of Order 4-8</B> Download Magic Square of Order 4-8. XPS-Viewer document/xps-file by Mikael Hermansson 2025-26.<br />

<B>#8 Magic Square of Order 7 A</B> Download Magic Square of Order 7. Adobe document/pdf-file by Mikael Hermansson 2025-26.<br />

<B>#9 Magic Square of Order 7 A</B> Download Magic Square of Order 7. XPS-Viewer document/xps-file by Mikael Hermansson 2025-26.<br />

<B>#10 Magic Square of Order 7 B</B> Download Magic Square of Order 7. Adobe document/pdf-file by Mikael Hermansson 2025-26.<br />

<B>#11 Magic Square of Order 7 B</B> Download Magic Square of Order 7. XPS-Viewer document/xps-file by Mikael Hermansson 2025-26.<br />

<B>#12 Bimagic Square of Order 8 A</B> Download Bimagic Square of Order 8, with 4x trimagic diagonal. Adobe document/pdf-file by Mikael Hermansson 2025-26.<br />

<B>#13 Bimagic Square of Order 8 A</B> Download Bimagic Square of Order 8, with 4x trimagic diagonal. XPS-Viewer document/xps-file by Mikael Hermansson 2025-26.<br />

<B>#14 Bimagic Square of Order 10 A</B> Download Bimagic Square of Order 10. Adobe document/pdf-file by Mikael Hermansson 2025-26.<br />

<B>#15 Bimagic Square of Order 10 A</B> Download Bimagic Square of Order 10. XPS-Viewer document/xps-file by Mikael Hermansson 2025-26.<br />

<B>#16 Bimagic Square of Order 10 B</B> Download Bimagic Square of Order 10. Adobe document/pdf-file by Mikael Hermansson 2025-26.<br />

<B>#17 Bimagic Square of Order 10 B</B> Download Bimagic Square of Order 10. XPS-Viewer document/xps-file by Mikael Hermansson 2025-26.<br />

<B>#18 Magic Square of Order 4-7</B> Download Magic Square of Order 4-7. Excel document/xlsx-file by Mikael Hermansson 2025-26.<br />

<B>#19 Bimagic Square of Order 11 A</B> Download Bimagic Square of Order 11. Adobe document/pdf-file by Mikael Hermansson 2024-25.<br />

<B>#20 Bimagic Square of Order 11 A</B> Download Bimagic Square of Order 11. XPS-Viewer document/xps-file by Mikael Hermansson 2024-25.<br />

<B>#21 Bimagic Square of Order 13 A</B> Download Bimagic Square of Order 13. Adobe document/pdf-file by Mikael Hermansson 2024-25.<br />

<B>#22 Bimagic Square of Order 13 A</B> Download Bimagic Square of Order 13. XPS-Viewer document/xps-file by Mikael Hermansson 2024-25.<br />

<B>#23 Bimagic Square of Order 14 A</B> Download Bimagic Square of Order 14. Adobe document/pdf-file by Mikael Hermansson 2024-25.<br />

<B>#24 Bimagic Square of Order 14 A</B> Download Bimagic Square of Order 14. XPS-Viewer document/xps-file by Mikael Hermansson 2024-25.<br />

<B>#25 Bimagic Square of Order 15 A</B> Download Bimagic Square of Order 15. Adobe document/pdf-file by Mikael Hermansson 2024-25.<br />

<B>#26 Bimagic Square of Order 15 A</B> Download Bimagic Square of Order 15. XPS-Viewer document/xps-file by Mikael Hermansson 2024-25.<br />

<B>#27 Bimagic Square of Order 16 A</B> Download Bimagic Square of Order 16, with 4x trimagic diagonal. Adobe document/pdf-file by Mikael Hermansson 2024-25.<br />

<B>#28 Bimagic Square of Order 16 A</B> Download Bimagic Square of Order 16, with 4x trimagic diagonal. XPS-Viewer document/xps-file by Mikael Hermansson 2024-25.<br />

<B>#29 Bimagic Square of Order 16 B</B> Download Bimagic Square of Order 16, with 4x trimagic diagonal. Adobe document/pdf-file by Mikael Hermansson 2024-25.<br />

<B>#30 Bimagic Square of Order 16 B</B> Download Bimagic Square of Order 16, with 4x trimagic diagonal. XPS-Viewer document/xps-file by Mikael Hermansson 2024-25.<br />

<B>#31 Bimagic Square of Order 16 C</B> Download Bimagic Square of Order 16, with 4x trimagic diagonal. Adobe document/pdf-file by Mikael Hermansson 2024-26.<br />

<B>#32 Bimagic Square of Order 16 C</B> Download Bimagic Square of Order 16, with 4x trimagic diagonal. XPS-Viewer document/xps-file by Mikael Hermansson 2024-26.<br />

<B>#33 Bimagic Square of Order 16 D</B> Download Bimagic Square of Order 16, with 4x trimagic diagonal. Adobe document/pdf-file by Mikael Hermansson 2024-26.<br />

<B>#34 Bimagic Square of Order 16 D</B> Download Bimagic Square of Order 16, with 4x trimagic diagonal. XPS-Viewer document/xps-file by Mikael Hermansson 2024-26.<br />

<B>#35 Bimagic Square of Order 17 A</B> Download Bimagic Square of Order 17, with 4x trimagic diagonal. Adobe document/pdf-file by Mikael Hermansson 2024-26.<br />

<B>#36 Bimagic Square of Order 17 A</B> Download Bimagic Square of Order 17, with 4x trimagic diagonal. XPS-Viewer document/xps-file by Mikael Hermansson 2024-26.<br />

<B>#37 Bimagic Square of Order 10-15</B> Download Bimagic Square of Order 10-15. Adobe document/pdf-file by Mikael Hermansson 2024-26.<br />

<B>#38 Bimagic Square of Order 10-15</B> Download Bimagic Square of Order 10-15. XPS-Viewer document/xps-file by Mikael Hermansson 2024-26.<br />

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