<!DOCTYPE html>

<head>

<title>Download Driveorder 8</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%, 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%, deeppink 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%, deeppink 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: black;

background-repeat: no-repeat;

background-size: 100% 100%;

justify-content: center;

align-items: center;

min-height: 100vh;

max-width: auto;

max-height: 100%;

margin-bottom: 0%;

padding: 2%;

padding-bottom: 2%;

border-radius: 8px;

border-bottom: none;

position: relative;

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

}

.font h1{

color: white;

font-size: 1.6vw;

text-align: left;

margin-bottom: 0vw;

border-bottom: none;

margin-top: 0px;

}

.font h2{

color: white;

font-size: 1vw;

text-align: center;

margin-bottom: 2px;

border-bottom: none;

margin-top: 0%;

}

.font h3{

color: white;

font-size: 0.9vw;

text-align: left;

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

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

border-bottom: none;

padding: 0px;

margin-top: 1%;

}

.font h4{

color: white;

font-size: 0.8vw;

text-align: left;

padding-bottom: 2px;

margin-top: 1%;

margin-bottom: 0%;

}

.font h5 {

color: blueviolet; /* reserva font h5, coding with micke */

font-size: 1vw;

text-align: left;

padding-left: 0px;

margin-bottom: 5px;

margin-top: 0%;

border-bottom: 3px solid #667eea;

}

.font p{

color: greenyellow;

font-size: 0.7vw;

text-align: center;

line-height: 0.7vw;

margin-top: 1px;

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, #f8ceec 0%, #a88beb 100%);

padding: 6px;

border-radius: 8px;

margin: 4px 4px;

margin-top: 2%;

margin-bottom: 0%;

border-left: 4px solid #667eea;

}

.mac-section:hover {

background: white;

padding: 6px;

border-radius: 8px;

margin: 4px 4px;

margin-top: 2%;

margin-bottom: 0%;

border-left: 4px solid #667eea;

}

.mac-section.active {

background: lightgoldenrodyellow;

padding: 8px;

padding-left: 10px;

border-radius: 8px;

margin: 4px 4px;

margin-top: 0%;

margin-bottom: 1.4%;

border-left: none;

}

.mac-section h1 {

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

color: #667eea;

font-size: 1vw;

line-height: 1.2;

text-align: left;

text-decoration: none;

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

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

padding-left: 0%;

margin-top: 0px;

margin-bottom: 0px;

}

.mac-section h2 {

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

color: #f5576c;

font-size: 1vw;

line-height: 1.2;

text-align: left;

padding-left: 0%;

text-decoration: none;

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

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

margin-top: 0px;

margin-bottom: 0px;

}

.mac-section p {

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

color: darkblue;

font-size: 0,9vw;

line-height: 0.9vw;

text-align: left;

padding: 0px;

padding-bottom: 0px;

}

.mac-section:hover p {

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

color: black;

font-size: 0,9vw;

line-height: 0.9vw;

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

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

font-size: 0.75vw;

padding: 12px 8px;

margin-bottom: 8px;

border-radius: 8px;

cursor: pointer;

transition: all 0.3s ease;

}

.sidenav li:hover {

background: #667eea;

color: white;

transform: translateX(5px);

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

}

#menuAside {

grid-area: left;

}

.left div {

grid-area: flex;

}

.nav-menu {

list-style: none;

}

.nav-item {

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

display: flex;

align-items: center;

grid-gap: 12px;

}

.nav-item:hover {

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

transform: translateX(8px);

}

.nav-item.super {

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

}

.nav-item.active {

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

padding: 10%;

border-radius: 12px;

max-width: auto;

max-height: 100%;

overflow-x: hidden;

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

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

}

.sidesms h2 {

color: blueviolet;

font-size: 1.1vw;

text-align: center;

padding-top: 4%;

padding-bottom: 3%;

max-width: auto;

max-height: 100%;

margin-top: 0%;

border-bottom: 3px solid blueviolet;

}

.sidesms p {

color: white;

font-size: 1vw;

text-align: center;

line-height: 0.9vw;

margin-top: 0%;

}

.sidesms ul {

list-style: none;

padding: 4% 0%;

}

.sidesms li {

color: yellow;

font-size: 0.75vw;

padding: 12px 8px;

margin-bottom: 8px;

border-radius: 8px;

cursor: pointer;

transition: all 0.3s ease;

}

.sidesms li:hover {

background: #667eea;

color: white;

transform: translateX(5px);

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

}

#menuAside {

grid-area: right;

}

.right div {

grid-area: flex;

}

.sms-menu {

list-style: none;

}

.sms-item {

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

display: flex;

align-items: center;

grid-gap: 12px;

}

.sms-item:hover {

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

transform: translateX(8px);

}

.sms-item.super {

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

}

.sms-item.active {

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

}

/* coding Responsive layout with micke sidebar-right "sms"=squaremagie space ! grid-area shold indicate red. */

/* coding responsive down footer section with micke, grid-area shold indicate red. */

#pageFooter {

grid-area: down;

}

.down div {

grid-area: auto;

}

.center, footer {

grid-area: center;

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

grid-row: 5 / 6 !important;

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

color: white;

text-align: center;

padding: 0px 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. */

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

.menu{

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

max-width: auto;

max-height: 100%;

text-align: center;

}

.leftmenu {

float: left;

margin-top: 12.5%;

margin-left: 14%;

}

.leftmenu_1 {

float: left;

font-size: 0.5vw;

line-height: 2;

margin-top: 2.8%;

margin-left: 1%;

}

.rightmenu {

max-width: auto;

max-height: 100%;

float: right;

margin-top: 0%;

padding-bottom: 0px;

}

.menu-bar ul{

display: inline-flex;

list-style: none;

}

.menu-bar ul li{

width: 100px;

margin: 5px;

padding: 5px;

font-size: 15px;

}

.menu-bar ul li a{

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

color: white;

text-decoration: none;

}

.menu-bar ul li :hover{

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

padding: 2px 2px;

margin-bottom: 2px;

border-radius: 2px;

cursor: pointer;

transition: all 0.1s ease;

font-size: 15px;

color: white;

transform: translateX(1px);

}

.menu-bar ul li_id{

width: 100px;

margin: 5px;

padding: 5px;

font-size: 15px;

}

.menu-bar ul li_id a{

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

color: white;

text-decoration: none;

}

.menu-bar ul li_id :hover{

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

padding: 2px 2px;

margin-bottom: 2px;

border-radius: 2px;

cursor: pointer;

transition: all 0.1s ease;

font-size: 15px;

color: red;

transform: translateX(1px);

}

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

/* coding color script with micke */

.animate-charcter {

text-transform: uppercase;

background-image: linear-gradient(

225deg,

purple 10%,

blueviolet 30%,

deeppink 70%,

yellow 90%

);

background-size: auto auto;

background-clip: border-box;

background-size: 200% auto;

color: #fff;

background-clip: text;

color: transparent;

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

animation: textclip 3s linear infinite;

display: inline-block;

font-size: 1.38vw;

text-align: center;

}

@keyframes textclip {

to {

background-position: -200% center;

}

/* coding color script with micke */

/* coding gallery and text section with micke */

.firstsection{

background-color: none;

height: 0%;

margin-top: 1%;

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

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

margin-bottom: 0%;

}

.fifthhalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

font-weight: none;

text-transform: none;

}

.box-main{

display: flex;

justify-content: center;

align-items: center;

color: black;

font-size: 16px;

max-width: auto;

margin: auto;

height: 100%;

margin-top: 0%;

}

/* coding gallery and text section with micke */

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

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: 6vw; /* Location of the box */

left: 0;

top: 0;

width: 100%; /* Full width */

height: 100%; /* Full height */

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

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

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

color: black;

text-align: left;

}

/* Modal Content */

.modal-content {

background-color: #fefefe;

margin: auto;

padding: 15px;

border: 1px solid #888;

width: 31%;

height: scroll;

}

/* The Close Button */

.close {

color: red;

float: right;

font-size: 28px;

font-weight: bold;

}

.close:hover,

.close:focus {

color: #000;

text-decoration: none;

cursor: pointer;

}

/* coding table with micke */

table.one {

border-collapse: collapse;

width: 100%;

margin-top: 0%;

border-spacing: 2px 1px;

position: center;

text-align: center;

}

td {

background-color: none;

padding: 3px 2px;

border: 2px solid none;

position: center;

text-align: center;

}

table.two {

border-collapse: collapse;

width: auto;

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

}

th, td_2 {

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

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

padding: 0px;

height: auto;

width: auto;

font-size: 0px;

text-align: right;

}

table.three td {

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

background-color: none;

padding: 0.15vw 0.15vw;

padding-top: 0.15vw;

border: 1px solid white;

font-size: 0.8vw;

text-align: right;

}

table.four td {

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

background-color: none;

padding: 0.15vw 0.15vw;

padding-top: 0.25vw;

border: 1px solid white;

font-size: 0.75vw;

text-align: right;

}

/* coding table with micke */

/* coding powerpoint gallery button with micke */

div.gallery {

margin: 0px 3px;

border: 1px solid none;

float: left;

max-width: 100%;

height: auto;

font-size: 0.6vw;

}

div.gallery:hover {

border: 1px solid none;

padding: 0px 0px;

max-width: 100%;

height: auto;

}

div.desc {

padding: 1px 2px;

font-size: 0.6vw;

color: white;

text-align: center;

margin-bottom: 0%;

}

/* coding powerpoint gallery button with micke */

</style>

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

</div>

</div>

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

<h2>Squaremagie Spaceroom 1a</h2>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></button>

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

</table>

</div>

</section>

<p>&copy The Devils Magic Square of Order 12:4</p>

</td>

<td>

<h2>Squaremagie Spaceroom 1b</h2>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></button>

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

</table>

</div>

</section>

<p>&copy The Devils Magic Square of Order 12:4</p>

</td>

</tr>

</table>

<tr>

<td>

<h2>Squaremagie Spaceroom 2a</h2>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></button>

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

</table>

</div>

</section>

<p>&copy The Devils Magic Square of Order 12:4</p>

</td>

<td>

<h2>Squaremagie Spaceroom 2b</h2>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></button>

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

</table>

</div>

</section>

<p>&copy The Devils Magic Square of Order 12:4</p>

</td>

</tr>

</table>

<h1>Multimagie of simple panmagic square</h1>

<p>The Devils Magic Square of Order 12:4. Magic Square of order 12:4 consist of multiple squares at same time. First we have magic square of order 12 with S1=870, then we have inbaked a magic square of order 4 with S1=34. To take into consideration are that the hole square are constructed of the squarehouse order 3, that will say 9x16=144 and there exist only one order of n3 and it gives S1=15. So we have a magic square of order 12:4 with trimagic construction of squarehouse at the same time. The square of order 12:4 have 4x magic diagonal, that will say it's a panmagic square with 2x main-diagonal and <B>2x semi-diagonal</B>. The four examples above of magic square 12:4 have all bi- and trimagic main diagonal of magic square of order 4, and its different maindiagonal of squarehous n12. It exist of order 4 exact 880 magic squares (Excelsheet 4-7 in the sidebar menu), and it gives about 2x880=1760 panmagic square of order12:4 with different main diagonal on magic square of order 12. Squaremagie source code in html and css are for help to make one own magic homepage.</p>

</div>

</article>

<h2>Squarespace code</h2>

<span>Squaremagie html-css 1</span>

</li></a>

<span>Squaremagie html-css 2</span>

</li></a>

<span>Squaremagie html-css 3</span>

</li></a>

<span>Squaremagie html-css 4</span>

</li></a>

<span>Squaremagie html-css 5</span>

</li></a>

<span>Squaremagie html-css 6</span>

</li></a>

<span>Squaremagie html-css 7</span>

</li></a>

<span>Squaremagie html-css 8</span>

</li></a>

<span>Squaremagie html-css 9</span>

</li></a>

<span>Squaremagie html-css 10</span>

</li></a>

<span>Squaremagie html-css 11</span>

</li></a>

<span>Squaremagie html-css 12</span>

</li></a>

<span>Squaremagie html-css 13</span>

</li></a>

<span>Squaremagie html-css 14</span>

</li></a>

<span>Squaremagie html-css 15</span>

</li></a>

<span>Squaremagie html-css 16</span>

</li></a>

<span>Squaremagie html-css 17</span>

</li></a>

<span>Squaremagie html-css 18</span>

</li></a>

<span>Squaremagie html-css 19</span>

</li></a>

<span>Squaremagie html-css 20</span>

</li></a>

<span>Squaremagie html-css 21</span>

</li></a>

<span>Squaremagie html-css 22</span>

</li></a>

<span>Squaremagie html-css #</span>

</li></a>

<span>Squaremagie html-css #</span>

</li></a>

<span>Squaremagie html-css #</span>

</li></a>

<span>Squaremagie html-css #</span>

</li></a>

<span>Squaremagie html-css #</span>

</li></a>

<span>Squaremagie html-css #</span>

</li></a>

<span>Squaremagie html-css #</span>

</li></a>

<span>Squaremagie html-css #</span>

</li></a>

<span>Squaremagie html-css #</span>

</li></a>

<span>Squaremagie html-css #</span>

</li></a>

<span>Squaremagie html-css #</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>Squarespace index</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">Quality Responsive Grid-layout</h2>

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

<B>Squaremagie source code 1</B> Squaremagie index on Visual studio code, transformed to Word document/html. Open in a new window.<br />

<B>Squaremagie source code 2</B> Squaremagie formula on Visual studio code, transformed to Word document/html. Open in a new window.<br />

<B>Squaremagie source code 3</B> Squaremagie database on Visual studio code, transformed to Word document/html. Open in a new window.<br />

<B>Squaremagie source code 4</B> Squaremagie trimagic on Visual studio code, transformed to Word document/html. Open in a new window.<br />

<B>Squaremagie source code 5</B> Squaremagie download 1 on Visual studio code, transformed to Word document/html. Open in a new window.<br />

<B>Squaremagie source code 6</B> Squaremagie download 2 on Visual studio code, transformed to Word document/html. Open in a new window.<br />

<B>Squaremagie source code 7</B> Squaremagie download 3 on Visual studio code, transformed to Word document/html. Open in a new window.<br />

<B>Squaremagie source code 8</B> Squaremagie download 4 on Visual studio code, transformed to Word document/html. Open in a new window.<br />

<B>Squaremagie source code 9</B> Squaremagie download 5 on Visual studio code, transformed to Word document/html. Open in a new window.<br />

<B>Squaremagie source code 10</B> Squaremagie download 6 on Visual studio code, transformed to Word document/html. Open in a new window.<br />

<B>Squaremagie source code 11</B> Squaremagie download 7 on Visual studio code, transformed to Word document/html. Open in a new window.<br /><br />

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

<B>Squaremagie source code 12</B> Squaremagie download 8 on Visual studio code, transformed to Word document/html. Open in a new window.<br />

<B>Squaremagie source code 13</B> Squaremagie links on Visual studio code, transformed to Word document/html. Open in a new window.<br />

<B>Squaremagie source code 14</B> Squaremagie space on Visual studio code, transformed to Word document/html. Open in a new window.<br />

<B>Squaremagie source code 15</B> Squaremagie history on Visual studio code, transformed to Word document/html. Open in a new window.<br />

<B>Squaremagie source code 16</B> Squaremagie photocollection 1 on Visual studio code, transformed to Word document/html. Open in a new window.<br />

<B>Squaremagie source code 17</B> Squaremagie photocollection 2 on Visual studio code, transformed to Word document/html. Open in a new window.<br />

<B>Squaremagie source code 18</B> Squaremagie photocollection 3 on Visual studio code, transformed to Word document/html. Open in a new window.<br />

<B>Squaremagie source code 19</B> Squaremagie photocollection 4 on Visual studio code, transformed to Word document/html. Open in a new window.<br />

<B>Squaremagie source code 20</B> Squaremagie Space on Visual studio code, transformed to Word document/html. Open in a new window.<br />

<B>Squaremagie source code 21</B> Squaremagie Space on Visual studio code, transformed to Word document/html. Open in a new window.<br />

<B>Squaremagie source code 22</B> Squaremagie Space on Visual studio code, transformed to Word document/html. Open in a new window.<br /><br />

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

<B>Squaremagie source code #</B> Squaremagie Space on Visual studio code, transformed to Word document/html. Open in a new window.<br />

<B>Squaremagie source code #</B> Squaremagie Space on Visual studio code, transformed to Word document/html. Open in a new window.<br /><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>

<div class="font"><span> Thanks to University of Umeå</span></div>

</footer>

</footer>

<div class="footer"><span class="widget-icon">📩</span><span id="mail">Email:</span><a style="color: blue; text-decoration-line: none" href="mailto:mikael.hermansson3@live.com"><span> Mikael Hermansson </span></a></div>

</footer>

</centre>

</body>

</html>