<!DOCTYPE html>

<head>

<title>Squaremagie Download 3</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, pink 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: 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>Olympic</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>Bimagic Square Order 26 A pdf</span>

</li></a>

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

</li></a>

<span>Bimagic Square Order 26 B pdf</span>

</li></a>

<span>Bimagic Square Order 26 B xps</span>

</li></a>

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

</li></a>

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

</li></a>

<span>Bimagic Square Order 27 B pdf</span>

</li></a>

<span>Bimagic Square Order 27 B xps</span>

</li></a>

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

</li></a>

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

</li></a>

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

</li></a>

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

</li></a>

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

</li></a>

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

</li></a>

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

</li></a>

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

</li></a>

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

</li></a>

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

</li></a>

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

</li></a>

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

</li></a>

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

</li></a>

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

</li></a>

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

</li></a>

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

</li></a>

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

</li></a>

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

</li></a>

<span>Bimagic Square 10-36 A pdf</span>

</li></a>

<span>Bimagic Square 10-36 A xps</span>

</li></a>

<span>Bimagic Square 10-36 B pdf</span>

</li></a>

<span>Bimagic Square 10-36 B xps</span>

</li></a>

<span>Bimagic Square 17-36 A pdf</span>

</li></a>

<span>Bimagic Square 17-36 A xps</span>

</li></a>

<span>Bimagic Square 17-36 B pdf</span>

</li></a>

<span>Bimagic Square 17-36 B xps</span>

</li></a>

<span>Bimagic Square n17-36 xlsx</span>

</li></a>

<span>Bimagic Square n29-36 xlsx</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 3</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 class="text-medium" id="program">Michael Phelps Olympic Gold 8x Beijing, 4x London, 5x Rio 2016</h2>

<B>Michael Phelps</B> is one of the most decorated Olympic swimmers in Team USA history with 28 total medals, including 23 gold. He began swimming at the early age of seven, and he quickly fell in love with the sport. Just three years later, he set a national record for his age group. Phelps attended and swam for Towson High School and the University of Michigan.

As a retired swimmer, Phelps dedicates his time to giving back to the sport, volunteering as an assistant coach alongside Bob Bowman. He continues to make a positive impact through the Michael Phelps Foundation, which focuses on promoting mental and physical well-being and empowers individuals to pursue their dreams.

Phelps is also an avid golfer and launched his cold-water bathtub brand, 'Chilly Goat Tubs,' in 2023.

From his debut at the Sydney 2000 Olympic Games to his final appearance in the Rio 2016 Olympic Games, Phelps left his mark as an Olympic athlete, capturing the hearts of swimmers, athletes and fans.

OLYMPIC HIGHLIGHTS

At the age of 15, Phelps represented the United States at the Sydney 2000 Olympic Games. Phelps' dominance came to light at the Athens 2004 Olympic Games, where he clinched an impressive six gold and two bronze medals, showcasing his skills in events like the 100-meter and 200-meter butterfly, 200-meter and 400-meter individual medley and the 4x100-meter and 4x200-meter freestyle relays.

During the Beijing 2008 Olympic Games, Phelps secured an unprecedented eight gold medals in both individual and team events, surpassing the record at the time. He added four gold and two silver medals to his roster in the London 2012 Olympic Games. At the Rio 2016 Olympic Games, Phelps further solidified his legacy by capturing five gold and one silver medal.

WORLD CHAMPIONSHIP HIGHLIGHTS

Since 2001, Phelps has competed in a series of world championships and has been awarded an astounding 115 medals for his events. From his five appearances at both the Olympic Games and the world championships (long course), to competing in 10 swimming world cups and four Pan Pacific Championships, he has had a global impact on competitive swimming.

Phelps made his debut as a 16-year-old at the FINA World Championships in Fukuoka, Japan, and earned his first world title in the 200m butterfly. In 2003 in Barcelona, Phelps won four gold medals in the 100m butterfly, 200m butterfly, 200m individual medley and the 400m individual medley. He also collected a silver medal as part of the 4x200m freestyle relay.

At the Montreal world championships in 2005, Phelps earned three gold medals in the 100m butterfly, 200m butterfly and 4x200m freestyle relay. He also won two silver medals in the 200m individual medley and the 400m individual medley.

During the 2007 world championships in Melbourne, Australia, Phelps secured seven gold medals in the 200m butterfly, 100m butterfly, 200m individual medley, 400m individual medley, 4x100m freestyle relay, 4x200m freestyle relay and 4x100m medley relay.

At the Rome world championships in 2009, Phelps won five gold medals in the 100m butterfly, 200m butterfly, 200m freestyle, 4x100m freestyle relay and 4x100m medley relay. He took home a silver medal in the 4x200m freestyle relay.

In 2011 at the Shanghai world championships, Phelps earned four gold medals in the 100m butterfly, 200m butterfly, 4x200m freestyle relay and 4x100m medley relay. He also took home two silver medals in the 200m freestyle and the 4x100m freestyle relay.

EARLY CAREER

Following the Athens 2004 Olympic Games, Phelps dedicated four years to rigorous training at the University of Michigan, foregoing formal education for the time being.

OLYMPIC EXPERIENCE

• 5-time Olympian; 28-time Olympic medalist (23 gold, 3 silver, 2 bronze)

o Olympic Games Rio de Janeiro 2016, gold (200m Butterfly - Men, 200m Individual Medley - Men, 4 x 100m Freestyle Relay - Men, 4 x 100m Medley Relay - Men, 4 x 200m Freestyle Relay - Men), silver (100m Butterfly - Men)

o Olympic Games London 2012, gold (100m Butterfly - Men, 200m Individual Medley - Men, 4 x 100m Medley Relay - Men, 4 x 200m Freestyle Relay - Men), silver (200m Butterfly - Men, 4 x 100m Freestyle Relay - Men), 4th (400m Individual Medley - Men)

o Olympic Games Beijing 2008, gold (100m Butterfly - Men, 200m Butterfly - Men, 200m Freestyle - Men, 200m Individual Medley - Men, 4 x 100m Freestyle Relay - Men, 4 x 100m Medley Relay - Men, 4 x 200m Freestyle Relay - Men, 400m Individual Medley - Men)

o Olympic Games Athens 2004, gold (100m Butterfly - Men, 200m Butterfly - Men, 200m Individual Medley - Men, 4 x 100m Medley Relay - Men, 4 x 200m Freestyle Relay - Men, 400m Individual Medley - Men), bronze (200m Freestyle - Men, 4 x 100m Freestyle Relay - Men)

o Olympic Games Sydney 2000, 5th (200m Butterfly - Men)

WORLD CHAMPIONSHIPS EXPERIENCE

• Most recent: 2011 – gold (100m Butterfly - Men, 200m Butterfly - Men, 4 x 100m Medley Relay - Men, 4 x 200m Freestyle Relay - Men), silver (200m Freestyle - Men, 200m Individual Medley - Men), bronze (4 x 100m Freestyle Relay - Men)

• Years of participation: 100m Butterfly - Men 2003, 2005, 2007, 2009, 2011; 200m Butterfly - Men 2001, 2003, 2007, 2009, 2011; 200m Freestyle - Men 2005, 2007, 2009, 2011; 200m Individual Medley - Men 2003, 2005, 2007, 2011; 4 x 100m Freestyle Relay - Men 2005, 2007, 2009, 2011; 4 x 100m Medley Relay - Men 2003, 2005, 2009, 2011; 4 x 200m Freestyle Relay - Men 2003, 2005, 2007, 2009, 2011; 400m Individual Medley - Men 2003, 2007; 100m Freestyle - Men 2005; 400m Freestyle - Men 2005; 100m Individual Medley (SC) - Men 2004; 200m Butterfly (SC) - Men 2004; 200m Freestyle (SC) - Men 2004; 200m Individual Medley (SC) - Men 2004; 400m Individual Medley (SC) - Men 2004

• Medals: 34 (27 gold, 6 silver, 1 bronze)

o Gold – 2011 (100m Butterfly - Men, 200m Butterfly - Men, 4 x 100m Medley Relay - Men, 4 x 200m Freestyle Relay - Men); 2009 (100m Butterfly - Men, 200m Butterfly - Men, 4 x 100m Freestyle Relay - Men, 4 x 100m Medley Relay - Men, 4 x 200m Freestyle Relay - Men); 2007 (100m Butterfly - Men, 200m Butterfly - Men, 200m Freestyle - Men, 200m Individual Medley - Men, 4 x 100m Freestyle Relay - Men, 4 x 200m Freestyle Relay - Men, 400m Individual Medley - Men); 2005 (200m Freestyle - Men, 200m Individual Medley - Men, 4 x 100m Freestyle Relay - Men, 4 x 100m Medley Relay - Men, 4 x 200m Freestyle Relay - Men); 2004 (200m Freestyle (SC) - Men); 2003 (200m Butterfly - Men, 200m Individual Medley - Men, 4 x 100m Medley Relay - Men, 400m Individual Medley - Men); 2001 (200m Butterfly - Men)

o Silver – 2011 (200m Freestyle - Men, 200m Individual Medley - Men); 2009 (200m Freestyle - Men); 2005 (100m Butterfly - Men); 2003 (100m Butterfly - Men, 4 x 200m Freestyle Relay - Men)

o Bronze – 2011 (4 x 100m Freestyle Relay - Men)

https://www.teamusa.com/profiles</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>