<!DOCTYPE html>  

<html lang="en">  

<head>

<title>Squaremagie Formula</title>

<meta name="keywords" content="Squaremagie formula, magic squares, bimagic squares and trimagic squares, multimagie and squaremagie.">

<meta name="description" content="The page of magic squares and multimagie">

<meta http-equiv="author" content="mikael hermansson">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta charset="utf-8">    

<link rel="stylesheet" href="styles.css" />

<script src="script.js"></script>

<style>

 img {

    max-width: 100%;

    height: auto;

    }

</style>

</head>

 

<style stylesheet="style.css">

* {

  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%, deeppink 100%)!important;

  width: 100%;

  min-height: 100vh;

  max-width: auto;

  max-height: 100%;

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

  overflow-y: auto;

  margin: 0;

  }

   

  /* Building responsive layouts for tablets */

@media (max-width: 1024px) {

.page {

  display: grid;

  grid-template-areas:

    "top above above"

    "nav main sms"  

    "inline content space"

    "left center right";

  grid-template-rows: auto 1fr auto;

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

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

  grid-column-gap: 8px;

  grid-row-gap: 5px;

  padding: 10px;

  padding-bottom: 8px;

  background: linear-gradient(135deg, #1e3c72 0%, deeppink 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 ifr auto;

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

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

  grid-gap: 10px;

  padding: 10px;

  min-height: 100vh;

  max-width: auto;

  max-height: 100%;

  margin: 0;

  }

.header h1 {

    font-size: 12px;

    margin-bottom: 4px;

  }            

.main {

    padding: 8px 4px;

    }

  }

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

 

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

#pageHeader {

  grid-area: top;

 }

.top div {

  grid-area: flex;    

 }

.top, header {

  grid-area: top;

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

  grid-row: 1 / 2 !important;

  background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);

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

    color: white;

    padding: 2px 10px;

    border-radius: 12px;

    max-width: auto;

    max-height: 100%;

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);

  }      

.top.above, header {

  grid-area: above;

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

  grid-row: 1 / 2 !important;

  background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);

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

    color: blueviolet;

    padding: 2px 10px;

    border-radius: 12px;

    max-width: auto;

    max-height: 100%;

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);

  }      

.above p {

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

    font-size: 1.15vw;

    line-height: 1.25vw;

    text-align: center;

    padding-bottom: 0.4vw;

    margin-top: 3.25%;

  }

/* coding Responsive layout with micke - top header, grid-area shold indicate red (brackets). */  

   

/* coding responsive "main"=article content text with micke, grid-area shold indicate orange (vsc). */  

#mainArticle {

    grid-area: middle;

  }

.middle div {

    grid-area: center;      

  }

.main, article {

    grid-area: content;

    grid-column: 1fr !important;

    grid-row: 1fr !important;

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

    background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);

    background-repeat: no-repeat;

    background-size: 100% 100%;

    justify-content: center;

    align-items: center;

    min-height: 100vh;

    max-width: auto;

    max-height: 100%;

    margin-bottom: 0%;

    padding: 2%;

    padding-bottom: 2%;

    border-radius: 8px;

    border-bottom: none;

    position: relative;

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

  }

.font h1{

    color: yellow;

    font-size: 1.1vw;

    text-align: center;

    margin-bottom: 0.1vw;

    border-bottom: none;

    margin-top: 0px;

  }

.font h2{

    color: aqua;

    font-size: 1.1vw;

    text-align: center;

    margin-bottom: 0.1vw;

    border-bottom: none;

    margin-top: 0px;

  }

.font h3{

    color: white;

    font-size: 0.96vw;

    text-align: center;

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

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

    border-bottom: none;

    padding: 0px;

    margin-top: 3%;

  }

.font h4{

    color: white;

    font-size: 1.5vw;

    text-align: center;

    padding-bottom: 2px;

    margin-top: 0%;

    margin-bottom: 0%;

    border-bottom: 3px solid #667eea;

  }

.font h5 {

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

    font-size: 1vw;

    text-align: left;

    padding-left: 0px;

    margin-bottom: 5px;

    margin-top: 0%;  

  }

.font p{

    color: white;

    font-size: 0.63vw;

    text-align: center;

    line-height: 0.8vw;  

    margin-bottom: 0px;

    border-bottom: none;

  }

   

#menuSection {

    grid-area: center;

  }

.mac-menu {

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

  }  

     .mac-section {

       background: linear-gradient(135deg, #f093fb 10%, #f5576c 90%);

       padding: 8px;

       border-radius: 8px;

       margin: 4px 4px;

       margin-top: 0%;

       margin-bottom: 1.4%;

       border-left: 4px solid #667eea;

     }

    .mac-section:hover {

      background: white;

      padding: 8px;

      border-radius: 8px;

      margin: 4px 4px;

      margin-top: 0%;

      margin-bottom: 1.4%;

      border-left: 4px solid #667eea;

    }

    .mac-section.active {

      background: lightgoldenrodyellow;

      padding: 8px;

      padding-left: 10px;

      border-radius: 8px;

      margin: 4px 4px;

      margin-top: 0%;

      margin-bottom: 1.4%;

      border-left: none;

    }

    .mac-section h1 {

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

      color: #667eea;

      font-size: 1vw;

      line-height: 1.2;

      text-align: left;

      text-decoration: none;

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

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

      padding-left: 0%;

      margin-top: 0px;

      margin-bottom: 0px;

    }

    .mac-section h2 {

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

      color: #f5576c;

      font-size: 1vw;

      line-height: 1.2;

      text-align: left;

      padding-left: 0%;

      text-decoration: none;

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

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

      margin-top: 0px;

      margin-bottom: 0px;

    }

    .mac-section p {

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

      color: black;

      font-size: 0,8vw;

      line-height: 1vw;

      text-align: left;

      padding: 0px;

      padding-bottom: 0px;

    }

/* coding responsive "main"=article content text with micke, grid-area shold indicate red (brackets). */    

   

/* coding Responsive layout with micke sidebar-left. "nav"=navigation inline ! grid-area shold indicate red. */

#navAside {

  grid-area: left;

  }

.left div {

  grid-area: flex;

}

.sidenav, aside {

    grid-area: inline;

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

    grid-row: 1fr !important;

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

      background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);

      padding: 10%;

      border-radius: 12px;

      max-width: auto;

      max-height: 100%;

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

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

  }    

.sidenav h2 {

      color: white;

      font-size: 1.15vw;

      text-align: center;

      padding-top: 4%;

      padding-bottom: 3%;

      max-width: auto;

      max-height: 100%;

      margin-top: 0%;

    border-bottom: 3px solid #667eea;

  }

.sidenav p {

    color: blue;

    font-size: 1vw;

    text-align: center;

    line-height: 1;  

    margin-top: 0%;  

  }    

.sidenav ul {

    list-style: none;

    padding: 4% 0%;

  }

.sidenav li {

      color: black;

      font-size: 0.75vw;

      padding: 12px 8px;

      margin-bottom: 8px;

      border-radius: 8px;

      cursor: pointer;

    transition: all 0.3s ease;

  }    

.sidenav li:hover {

      background: #667eea;

      color: white;

      transform: translateX(5px);

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

  }

   

#menuAside {

  grid-area: left;

  }  

.left div {

  grid-area: flex;

}

.nav-menu {

            list-style: none;

        }

        .nav-item {

            background: linear-gradient(135deg, #f8ceec 0%, #a88beb 100%);  

            display: flex;

            align-items: center;

            grid-gap: 12px;

        }

        .nav-item:hover {

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

            transform: translateX(8px);

        }

        .nav-item.active {

            background: linear-gradient(135deg, #f8ceec 0%, #a88beb 100%);

        }        

/* coding Responsive layout with micke sidebar-left. "nav"= navigation inline ! grid-area shold indicate red. */

       

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

#smsAside {

  grid-area: right;

  }

.right div {

  grid-area: flex;

}

.sidesms, aside {

    grid-area: space;

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

    grid-row: 1fr !important;

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

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

      padding: 10%;

      border-radius: 12px;

      max-width: auto;

      max-height: 100%;

    overflow-x: hidden;

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

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

  }    

.sidesms h2 {

      color: white;

      font-size: 1.15vw;

      text-align: center;

      padding-top: 4%;

      padding-bottom: 3%;

      max-width: auto;

      max-height: 100%;

      margin-top: 0%;

    border-bottom: 3px solid blueviolet;

  }

.sidesms p {

    color: white;

    font-size: 0.8vw;

    text-align: center;

    line-height: 1vw;  

    margin-bottom: 1px;  

  }    

.sidesms ul {

    list-style: none;

    padding: 4% 0%;

  }

.sidesms li {

      color: black;

      font-size: 0.75vw;

      padding: 12px 8px;

      margin-bottom: 8px;

      border-radius: 8px;

      cursor: pointer;

    transition: all 0.3s ease;

  }    

.sidesms li:hover {

      background: #667eea;

      color: white;

      transform: translateX(5px);

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

  }

   

#menuAside {

  grid-area: right;

  }

.right div {

  grid-area: flex;

}

.sms-menu {

            list-style: none;

        }

        .sms-item {

            background: linear-gradient(135deg, deepskyblue 20%, yellow 80%);  

            display: flex;

            align-items: center;

            grid-gap: 12px;

        }

        .sms-item:hover {

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

            transform: translateX(8px);

        }

        .sms-item.active {

            background: linear-gradient(135deg, #f8ceec 0%, #a88beb 100%);

        }        

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

 

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

#pageFooter {

  grid-area: down;

}

.down div {

  grid-area: auto;

}

.center, footer {

    grid-area: center;

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

    grid-row: 5 / 6 !important;

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

      color: white;

      text-align: center;

      padding: 0px 10px;

      margin-left: -1px;

      margin-right: -1px;

      padding-top: 0.75%;

      border-radius: 10px;

      max-width: auto;

      max-height: 100%;

      margin-top: 0%;

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

  }      

.center, p {

      font-size: 0.85vw;

      line-height: 1vw;

  }

.left, footer {

    grid-area: left;

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

    grid-row: 5 / 6 !important;

      background: linear-gradient(135deg, #f8ceec 0%, #a88beb 100%);

      color: 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 dna script with micke */ -->

.material {

position: relative;

display: flex;

justify-content: center;

align-items: center;

transform-style: preserve-3d;

transform: rotateZ(90deg);

}

@keyframes rotate {

0% {

transform: rotateY(0deg);

}

100% {

transform: rotateX(360deg);

}

}

.dna {/*line*/

    position: relative;

    width: 1px;

    height: 6vw;

    border: 1px dotted white;

    box-shadow: 0 0 15px white;

    background: transparent;

    margin: 0px 0.52vw;

    animation: rotate 3s linear infinite;

}

.dna::before {/*top dot*/

    content: "";

    position: absolute;

    top: -2px;

    left: -5px;

    width: 10px;

    height: 10px;

    background: deeppink;

    border-radius: 50%;

    box-shadow: 0 0 15px deeppink;

}

.dna::after {/*bottom dot*/

content: '';

position: absolute;

bottom: -2px;

left: -5px;

width: 10px;

height: 10px;

background: deepskyblue;

border-radius: 50%;

box-shadow: 0 0 12px deepskyblue;

}

.dna:nth-child(1) {

animation-delay: 0.15s;

}

.dna:nth-child(2) {

animation-delay: 0.3s;

}

.dna:nth-child(3) {

animation-delay: 0.45s;

}

.dna:nth-child(4) {

animation-delay: 0.6s;

}

.dna:nth-child(5) {

animation-delay: 0.75s;

}

.dna:nth-child(6) {

animation-delay: 0.9s;

}

.dna:nth-child(7) {

animation-delay: 1.05s;

}

.dna:nth-child(8) {

animation-delay: 1.2s;

}

.dna:nth-child(9) {

animation-delay: 1.35s;

}

.dna:nth-child(10) {

animation-delay: 1.5s;

}

.dna:nth-child(11) {

animation-delay: 1.65s;

}

.dna:nth-child(12) {

animation-delay: 1.8s;

}

.dna:nth-child(13) {

animation-delay: 1.95s;

}

.dna:nth-child(14) {

animation-delay: 2.1s;

}

.dna:nth-child(15) {

animation-delay: 2.25s;

}

.dna:nth-child(16) {

animation-delay: 2.4s;

}

.dna:nth-child(17) {

animation-delay: 2.55s;

}

.dna:nth-child(18) {

animation-delay: 2.7s;

}

.dna:nth-child(19) {

animation-delay: 2.85s;

}

.dna:nth-child(20) {

animation-delay: 3.0s;

}

.dna:nth-child(21) {

animation-delay: 3.15s;

}

.dna:nth-child(22) {

animation-delay: 3.3s;

}

.dna:nth-child(23) {

animation-delay: 3.45s;

}

.dna:nth-child(24) {

animation-delay: 3.6s;

}

.dna:nth-child(25) {

animation-delay: 3.75s;

}

.dna:nth-child(26) {

animation-delay: 3.9s;

}

.dna:nth-child(27) {

animation-delay: 4.05s;

}

.dna:nth-child(28) {

animation-delay: 4.2s;

}

<!-- /* coding dna script with micke */ -->

   

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

.menu{

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

    max-width: auto;

    max-height: 100%;

    text-align: center;

}      

.leftmenu {

    float: left;

    margin-top: 12.5%;

    margin-left: 14%;

 }

.leftmenu_1 {

    float: left;

    font-size: 0.5vw;

    line-height: 2;

    margin-top: 2.8%;

    margin-left: 1%;

 }

.rightmenu {

    max-width: auto;

    max-height: 100%;

    float: right;

    margin-top: 0%;

    padding-bottom: 0px;

 }

.menu-bar ul{

    display: inline-flex;

    list-style: none;

}

.menu-bar ul li{

    width: 100px;

    margin: 5px;

    padding: 5px;

    font-size: 15px;

}

.menu-bar ul li a{

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

    color: blue;

    text-decoration: none;

}

.menu-bar ul li :hover{

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

    padding: 2px 2px;

    margin-bottom: 2px;

    border-radius: 2px;

    cursor: pointer;

    transition: all 0.1s ease;

    font-size: 15px;

    color: white;

  transform: translateX(1px);

}

.menu-bar ul li_id{

    width: 100px;

    margin: 5px;

    padding: 5px;

    font-size: 15px;

}

.menu-bar ul li_id a{

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

    color: white;

    text-decoration: none;

}

.menu-bar ul li_id :hover{

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

    padding: 2px 2px;

    margin-bottom: 2px;

    border-radius: 2px;

    cursor: pointer;

    transition: all 0.1s ease;

    font-size: 15px;

    color: red;

  transform: translateX(1px);

}

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

   

/* coding color script with micke */

.animate-charcter {

  text-transform: uppercase;

  background-image: linear-gradient(

    225deg,

    blueviolet 10%,

    blue 30%,

    deepskyblue 70%,

    yellow 90%

  );

  background-size: auto auto;

  background-clip: border-box;

  background-size: 200% auto;

  color: #fff;

  background-clip: text;

  color: transparent;

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  animation: textclip 3s linear infinite;

  display: inline-block;

  font-size: 1.38vw;

  text-align: center;

  }

@keyframes textclip {

  to {

    background-position: -200% center;

  }

 }

/* coding color script with micke */  

   

/* coding gallery and text section with micke */

.firstsection{

    background-color: none;

    height: 0%;

    margin-top: 1.2%;

    margin-bottom: -0.1%;

}

.firsthalf{

    width: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}

.secondsection{

    background-color: none;

    height: 0%;

    margin-top: 0.6%;

    margin-bottom: 0%;

}

.secondhalf{

    width: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

}

.thirdsection{

    background-color: none;

    height: 0%;

    margin-top: -0.5%;

    margin-bottom: 0%;

}

.thirdhalf{

    width: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    font-weight: none;

    text-transform: none;

}

.fourthsection{

    background-color: none;

    height: 0%;

    margin-top: 0.5%;

    margin-bottom: 0%;

}

.fourthhalf{

    width: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    font-weight: none;

    text-transform: none;

}

.fifthsection{

    background-color: none;

    height: 0%;

    margin-top: 3%;

    margin-bottom: 0%;

}

.fifthhalf{

    width: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

}

.sixsection{

    background-color: none;

    height: 0%;

    margin-top: 1%;

    margin-bottom: 0%;

    text-align: left;

}

.sixhalf{

    width: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

}

.sevensection{

    background-color: none;

    height: 0%;

    margin-top: 3%;

    margin-bottom: -1%;

    text-align: left;

}

.sevenhalf{

    width: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

}

.eigthsection{

    background-color: none;

    height: 0%;

    margin-top: 5%;

    margin-bottom: 0%;

}

.eigthhalf{

    width: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

}

.ninesection{

    background-color: none;

    height: 0%;

    margin-top: 102%;

    margin-bottom: 0%;

    text-align: center;

}

.ninehalf{

    width: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

}

.tensection{

    background-color: none;

    height: 0%;

    margin-top: 3.8%;

    margin-bottom: 0%;

    text-align: center;

}

.tenhalf{

    width: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

}

.elevensection{

    background-color: none;

    height: 0%;

    margin-top: 120%;

    margin-bottom: 0%;

    text-align: center;

}

.elevenhalf{

    width: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

}

.box-main{

    display: flex;

    justify-content: center;

    align-items: center;

    color: black;

    font-size: 16px;

    max-width: auto;

    margin: auto;

    height: 100%;

    margin-top: 0%;

}

/* coding gallery and text section with micke */

   

/* coding magic table - sidebar with micke */

.btn {

    background: linear-gradient(135deg, aqua 20%, gold 80%);

    color: blue;

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

    border-style: none;

    font-size: 0.8vw;

    font-weight: none;

    text-transform: none;

    text-align: right;

    line-height: 0.7vw;

    width: auto;

    margin-top: 0px;

    margin-bottom: 0px;

    border: 3px solid white;

    cursor: pointer;

    padding: 3px 3px;

    border-style: outset;

}

.btn:hover{

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

    color: black;

    padding: 3px 3px;

    border: 3px solid white;

    font-weight: bold;

    text-transform: uppercase;

}

/* coding magic table - sidebar with micke */  

   

/* coding magic button with micke */  

 .btn_1 {

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

    color: aqua;

    font-family: 'Source Sans Pro', sans-serif;

    font-size: 0.8vw;

    text-align: center;

    font-weight: none;

    text-transform: none;

    line-height: 1.2vw;

    width: auto;

    list-style-type: none;

    padding: 0.3vw 0.8vw;

    margin: 0px 4px;

    margin-top: 3%;

    border: 2px solid pink;

    display: inline-block;

    border-radius: 0.3vw 1.2vw;

    position: relative;

    cursor: pointer;

    border-style: solid;

}

.btn_1:hover{

    background-color: white;

    color: red;

    border-radius: 3px 5px;

}    

/* coding magic button with micke */      

   

/* coding magic table - main with micke */      

.btn_2 {

    background: linear-gradient(135deg, greenyellow 20%, gold 80%);

    color: blue;

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

    border-style: none;

    font-size: 0.8vw;

    font-weight: none;

    text-transform: none;

    text-align: right;

    line-height: 0.7vw;

    width: auto;

    margin: 1px 3px;

    margin-top: 0px;

    margin-bottom: 0.1vw;

    border: 3px solid white;

    cursor: pointer;

    padding: 3px 3px;

    border-style: outset;

}

.btn_2:hover{

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

    color: black;

    padding: 3px 3px;

    border: 3px solid white;

    font-weight: bold;

    text-transform: uppercase;

}

.btn_3 {

    background: linear-gradient(135deg, deeppink 20%, gold 80%);

    color: white;

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

    border-style: none;

    font-size: 0.8vw;

    font-weight: none;

    text-transform: none;

    text-align: right;

    line-height: 0.7vw;

    width: auto;

    margin: 1px 3px;

    margin-top: 0px;

    margin-bottom: 0.1vw;

    border: 3px solid white;

    cursor: pointer;

    padding: 3px 3px;

    border-style: outset;

}

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

    width: auto;

    margin: 1px 3px;

    margin-top: 0px;

    margin-bottom: 0.1vw;

    border: 3px solid white;

    cursor: pointer;

    padding: 3px 3px;

    border-style: outset;

}

.btn_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 - main with micke */  

   

/* coding button with micke */

.btn_5 {

    background-color: blueviolet;

    color: white;

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

    font-size: 0.8vw;

    font-weight: none;

    text-transform: none;

    line-height: 1vw;

    width: auto;

    margin: 0.1vw 0.1vw;

    margin-top: 4%;

    border: 3px solid white;

    cursor: pointer;

    padding: 0.1vw 0.2vw;

    padding-top: 0.2vw;

    border-style: outset;

}

.btn_5:hover{

    background-color: white;

    color: red;

    border-style: inset;

}

/* coding button with micke */

 

/* coding button sidebar-sms with micke */        

.btn_6 {

    background: linear-gradient(135deg, deepskyblue 20%, gold 80%);

    color: blue;

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

    border-style: none;

    font-size: 0.8vw;

    font-weight: none;

    text-transform: none;

    line-height: 1vw;

    max-width: 100%;

    height: auto;

    margin-top: 0px;

    margin-bottom: 0%;

    border: 3px solid white;

    cursor: pointer;

    padding: 3px 3px;

    border-style: outset;

}

.btn_6:hover{

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

    color: black;

    padding: 3px 3px;

    border: 3px solid white;

    font-weight: bold;

    text-transform: uppercase;

}

/* coding button sidebar-sms with micke */      

   

/* coding button main-top with micke */    

 p.button {

    background-color: lightgoldenrodyellow;

    color: blue;

    padding: 0vw 0.2vw;

    text-align: center;

    margin-top: 2%;

    text-decoration: none;

    display: inline-block;

    font-size: 1vw;

    border-style: inset;

}

 p.button:hover {

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

    color: white;

}

/* coding button main-top with micke */  

 

/* coding button to above java with micke */      

p.button_1 {

    background-color: none;

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

    color: black;

    padding: 1px, 1px;

    text-align: center;

    text-decoration: none;

    margin-top: 0px;

    display: inline-block;

    font-size: 0.75vw;

    position: relative;

    border-style: none;

}

 p.button_1:hover {

    background-color: white;

}

p.button_2 {

    background-color: none;

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

    color: blue;

    padding: 0px, 0px;

    text-align: left;

    text-decoration: none;

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

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

    margin-top: 0px;

    display: inline-block;

    font-size: 0.75vw;

    line-height: 1vw;

    width: auto;  /* --scroll layout width=auto - second section-- */

    height: 32vw;

    border-style: none;

    overflow-y: scroll;  /* --scroll layout overflow-y - second section-- */

}

 p.button_2:hover {

    background-color: white;

    color: black;

}

p.button_3 {

    background-color: lightgray;

    color: none;

    padding: -4px, 1px;

    text-align: center;

    text-decoration: none;

    max-width: 100%;

    height: 6.55vw;

    margin-top: 0px;

    display: flex;

    line-height: 1vw;

    font-size: 0px;

    border-style: outset;

}

 p.button_3:hover {

    background-color: white;

}

/* coding button to above java with micke */

 

/* coding text with micke */

.text{

    width: 100%;

    margin-top: 0%;

    text-transform: uppercase;

    color: purple;

}

.text-medium{

    font-family: 'piazzolla', serif;

    color: blue;

    font-size: 1vw;

    font-weight: bold;

    text-decoration: none;

    text-transform: none;

}

/* coding text with micke */  

 

/* coding JS images with micke */

img.small {

    width: 9.7vw;

    height: 6.25vw;

}

img.medium {

    width: 18vw;

    height: 18vw;

}

/* coding JS images with micke */    

   

<!-- /* coding java script 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 java script with micke */ -->

   

/* coding table with micke */

 table.one {

                border-spacing: 1px 1px;

                position: center;

            }

            td {

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

                background-color: none;

                padding: 0.1vw 0.1vw;

                border: 1px solid none;

                font-size: 1vw;

                text-align: center;

           }  

            th_1 {

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

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

                padding: 0.25vw 0.25vw;

                font-size: 1.2vw;

                text-align: center;

            }

 table.two {

                border-collapse: collapse;

                width: auto;

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

            }

            th, td {

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

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

                padding: 0px;

                height: auto;

                width: auto;

                font-size: 0px;

                text-align: center;

                font-weight: none;

                text-transform: none;

            }

table.three    td {

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

                background-color: none;

                padding: 0.15vw 0.15vw;

                padding-top: 0.15vw;

                border: 1px solid white;

                font-size: 0.8vw;

                text-align: right;

           }

table.four    td {

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

                background-color: none;

                padding: 0.15vw 0.15vw;

                padding-top: 0.25vw;

                border: 1px solid white;

                font-size: 0.75vw;

                text-align: right;

           }

/* coding table with micke */

 

/* coding powerpoint gallery button with micke */

div.gallery {

  margin: 0px 3px;

  border: 1px solid none;

  float: left;

  max-width: 100%;

  height: auto;

  font-size: 0.6vw;

}

 

div.gallery:hover {

  border: 1px solid none;

  padding: 0px 0px;

  max-width: 100%;

  height: auto;

}

 

div.desc {

  padding: 1px 2px;

  font-size: 0.6vw;

  color: white;

  text-align: center;

  margin-bottom: 0%;

}  

/* coding powerpoint gallery button with micke */      

   

</style>  

   

<body class="forth" id="start">

   <centre class="page">

       

       <!-- /* New Layout Section 1 */ -->

       <div class="top">

          <!-- /* coding color script with micke */ -->

             <div class="leftmenu">

               <div class="container">

                <div class="row">

                 <div class="col-md-12 text-center">

                  <div class="font">

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

                  </div>

                 </div>

                </div>

               </div>    

            </div>

          <!-- /* coding color script with micke */ -->

       </div>

       <!-- /* New Layout Section 1 */ -->

       

            <!-- /* - --------New Layout Section1---------- */ -->

            <header class="above" id=top>

              <div class="menu-bar">

            <div class="menu">

       

            <div class="leftmenu_1">        

              <ul class="nav-menu">

               <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>Discovery</span></i></a> </li>  

              </ul>

            </div>      

             

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

             <ul class="nav-menu">

              <li> <a href="../index.html"><i class="fa fa-home"><span>Home</span></i></a> </li>

              <li_id> <a style="color:blueviolet;" href="formula.html"><i class="fa fa-formula"><span>Formula</span></i></a> </li_id>

              <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> <a href="../Space/space.html"><i class="fa fa-mail"><span>Space</span></i></a> </li>

             </ul>

                </div>

             

 

               

            </div></div>    

            </header>

            <!-- /* ---------New Layout Section1---------- */ -->

   

    <!-- /* ---------New Layout Section2---------- */ -->  

    <article class="content" id="middle">

      <div class="main"> <!-- /* !important: div "main" will give dubble background in article if only have main in article css above, coding with micke */ -->

       <div class="mac-menu"> <!-- /* !important: "mac"=main article content, coding with micke */ -->

         

            <section class="firstsection">

              <div class="box-main">

                <div class="firstHalf">

                 <div class="font">

                   <table class="two">

                    <tr>

                       <td>

                          <h4>Formula Squaremagie 🏠</h4>

                       </td>

                    </tr>

                  </table>      

                </div>

              </div></div>

            </section>        

                                           

            <section class="secondsection">

              <div class="box-main">

                <div class="firstHalf">

                 <div class="font">

                   <table class="two">                

                    <tr>

                       <td>                  

                          <h3><span>Design</span> <span>&#128509;</span> <span>Development</span> <span>&#128509;</span> <span>Hightech</span></h3>  

                       </td>

                   </tr>

                 </table>    

                </div>

              </div></div>

            </section>  

             

            <section class="thirdsection">

              <div class="box-main">

                <div class="fifthHalf">

                 <div class="font">

                   <table class="two">

                    <tr>

                       <td>        

                          <h3><p style="font-size: 0.75vw; padding-top: 0.1vw" class="button"> DOWNLOAD NEW EULER SERIE OF BIMAGIC SQUARE OF ORDER 9 - FORMULA KEY </p></h3>      

                       </td>

                   </tr>

                 </table>    

                </div>

              </div></div>

            </section>  

         

            <section class="fourthsection">

              <div class="box-main">

                <div class="fourthHalf">

                  <div class="font">

                  <table class="two">

                   <tr>

                     <td>

                        <abbr title="Odd Magic Square with Java Script solution, document/html."><a href="MagicSquare/magicsquare_JS.html" target="_blank"><button class="btn_1">Magic Java Script html</button></a></abbr>

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

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

                    </td>

                 </tr>

                </table>

               </div>

              </div></div>

            </section>

         

            <section class="fourthsection">

              <div class="box-main">

                <div class="fourthHalf">

                  <div class="font">

                  <table class="two">

                   <tr>

                     <td>

                        <abbr title="Download Bimagic Square of Order 9B, pdf-file."><a href="../Squarespace_3/BimagicSquare_Order9_2.pdf" target="_blank" download><button class="btn_1">Bimagic Square 9 B pdf</button></a></abbr>

                        <abbr title="Download Bimagic Square of Order 9B, xps-file."><a href="../Squarespace_3/BimagicSquare_Order9_2.xps" target="_blank" download><button class="btn_1">Bimagic Square 9 B xps</button></a></abbr>

                        <abbr title="Download Bimagic Square of Order 9, Formula Key, xlsx-file."><a href="../Squarespace_3/BimagicSquare_Order8-9.xlsx" target="_blank" download><button class="btn_1">Bimagic Square 9 A xlsx</button></a></abbr>

                    </td>

                 </tr>

                </table>

               </div>

              </div></div>

            </section>

                   

            <section class="fifthsection">

              <div class="box-main">

                <div class="fifthHalf">

                 <div class="font">

                 <table class="two">    

                 <th>

                 <button class="btn_2">

                 <table class="four">

                  <tr>

                    <td>2</td>

                    <td>53</td>

                    <td>68</td>

                    <td>75</td>

                    <td>18</td>

                    <td>33</td>

                    <td>37</td>

                    <td>61</td>

                    <td>22</td>

                  </tr>

                  <tr>

                    <td>73</td>

                    <td>16</td>

                    <td>31</td>

                    <td>38</td>

                    <td>62</td>

                    <td>23</td>

                    <td>3</td>

                    <td>54</td>

                    <td>69</td>

                  </tr>

                  <tr>

                    <td>39</td>

                    <td>63</td>

                    <td>24</td>

                    <td>1</td>

                    <td>52</td>

                    <td>67</td>

                    <td>74</td>

                    <td>17</td>

                    <td>32</td>

                  </tr>

                  <tr>

                    <td>71</td>

                    <td>5</td>

                    <td>47</td>

                    <td>36</td>

                    <td>78</td>

                    <td>12</td>

                    <td>25</td>

                    <td>40</td>

                    <td>55</td>

                  </tr>

                  <tr>

                    <td>34</td>

                    <td>76</td>

                    <td>10</td>

                    <td>26</td>

                    <td>41</td>

                    <td>56</td>

                    <td>72</td>

                    <td>6</td>

                    <td>48</td>

                  </tr>

                  <tr>

                    <td>27</td>

                    <td>42</td>

                    <td>57</td>

                    <td>70</td>

                    <td>4</td>

                    <td>46</td>

                    <td>35</td>

                    <td>77</td>

                    <td>11</td>

                  </tr>

                  <tr>

                    <td>50</td>

                    <td>65</td>

                    <td>8</td>

                    <td>15</td>

                    <td>30</td>

                    <td>81</td>

                    <td>58</td>

                    <td>19</td>

                    <td>43</td>

                  </tr>

                  <tr>

                    <td>13</td>

                    <td>28</td>

                    <td>79</td>

                    <td>59</td>

                    <td>20</td>

                    <td>44</td>

                    <td>51</td>

                    <td>66</td>

                    <td>9</td>

                  </tr>

                  <tr>

                    <td>60</td>

                    <td>21</td>

                    <td>45</td>

                    <td>49</td>

                    <td>64</td>

                    <td>7</td>

                    <td>14</td>

                    <td>29</td>

                    <td>80</td>

                  </tr>

                </table></button>

                </th>

                <th>

                <button class="btn_3">

                <table class="four">

                  <tr>

                    <td>4</td>

                    <td>51</td>

                    <td>68</td>

                    <td>73</td>

                    <td>12</td>

                    <td>29</td>

                    <td>41</td>

                    <td>63</td>

                    <td>26</td>

                  </tr>

                  <tr>

                    <td>79</td>

                    <td>18</td>

                    <td>35</td>

                    <td>40</td>

                    <td>60</td>

                    <td>23</td>

                    <td>1</td>

                    <td>48</td>

                    <td>65</td>

                  </tr>

                  <tr>

                    <td>37</td>

                    <td>57</td>

                    <td>20</td>

                    <td>7</td>

                    <td>54</td>

                    <td>71</td>

                    <td>76</td>

                    <td>15</td>

                    <td>32</td>

                  </tr>

                  <tr>

                    <td>69</td>

                    <td>5</td>

                    <td>49</td>

                    <td>30</td>

                    <td>74</td>

                    <td>10</td>

                    <td>27</td>

                    <td>44</td>

                    <td>61</td>

                  </tr>

                  <tr>

                    <td>36</td>

                    <td>80</td>

                    <td>16</td>

                    <td>24</td>

                    <td>41</td>

                    <td>58</td>

                    <td>66</td>

                    <td>2</td>

                    <td>46</td>

                  </tr>

                  <tr>

                    <td>21</td>

                    <td>38</td>

                    <td>55</td>

                    <td>72</td>

                    <td>8</td>

                    <td>52</td>

                    <td>33</td>

                    <td>77</td>

                    <td>13</td>

                  </tr>

                  <tr>

                    <td>50</td>

                    <td>67</td>

                    <td>6</td>

                    <td>11</td>

                    <td>28</td>

                    <td>75</td>

                    <td>62</td>

                    <td>25</td>

                    <td>45</td>

                  </tr>

                  <tr>

                    <td>17</td>

                    <td>34</td>

                    <td>81</td>

                    <td>59</td>

                    <td>22</td>

                    <td>42</td>

                    <td>47</td>

                    <td>64</td>

                    <td>3</td>

                  </tr>

                  <tr>

                    <td>56</td>

                    <td>19</td>

                    <td>39</td>

                    <td>53</td>

                    <td>70</td>

                    <td>9</td>

                    <td>14</td>

                    <td>31</td>

                    <td>78</td>

                  </tr>

                </table></button>

                </th>

                <th>

                <button class="btn_4">

                <table class="four">  

                  <tr>

                    <td>2</td>

                    <td>53</td>

                    <td>68</td>

                    <td>73</td>

                    <td>16</td>

                    <td>31</td>

                    <td>39</td>

                    <td>63</td>

                    <td>24</td>

                  </tr>

                  <tr>

                    <td>75</td>

                    <td>18</td>

                    <td>33</td>

                    <td>38</td>

                    <td>62</td>

                    <td>23</td>

                    <td>1</td>

                    <td>52</td>

                    <td>67</td>

                  </tr>

                  <tr>

                    <td>37</td>

                    <td>61</td>

                    <td>22</td>

                    <td>3</td>

                    <td>54</td>

                    <td>69</td>

                    <td>74</td>

                    <td>17</td>

                    <td>32</td>

                  </tr>

                  <tr>

                    <td>71</td>

                    <td>5</td>

                    <td>47</td>

                    <td>34</td>

                    <td>76</td>

                    <td>10</td>

                    <td>27</td>

                    <td>42</td>

                    <td>57</td>

                  </tr>

                  <tr>

                    <td>36</td>

                    <td>78</td>

                    <td>12</td>

                    <td>26</td>

                    <td>41</td>

                    <td>56</td>

                    <td>70</td>

                    <td>4</td>

                    <td>46</td>

                  </tr>

                  <tr>

                    <td>25</td>

                    <td>40</td>

                    <td>55</td>

                    <td>72</td>

                    <td>6</td>

                    <td>48</td>

                    <td>35</td>

                    <td>77</td>

                    <td>11</td>

                  </tr>

                  <tr>

                    <td>50</td>

                    <td>65</td>

                    <td>8</td>

                    <td>13</td>

                    <td>28</td>

                    <td>79</td>

                    <td>60</td>

                    <td>21</td>

                    <td>45</td>

                  </tr>

                  <tr>

                    <td>15</td>

                    <td>30</td>

                    <td>81</td>

                    <td>59</td>

                    <td>20</td>

                    <td>44</td>

                    <td>49</td>

                    <td>64</td>

                    <td>7</td>

                  </tr>

                  <tr>

                    <td>58</td>

                    <td>19</td>

                    <td>43</td>

                    <td>51</td>

                    <td>66</td>

                    <td>9</td>

                    <td>14</td>

                    <td>29</td>

                    <td>80</td>

                  </tr>

                </table></button>

                </th>

                </table>    

               </div>

              </div>

             </div>    

            </section>  

           

            <div class="font">

              <p style="color: white; text-align: center; font-size: 0.75vw; font-weight: none;">3x Proof of Bimagic Latin-Euler Square of Order 9, with trimagic main diagonal. By @ Mikael Hermansson 2021.</p>

            </div>  

         

          <section class="sixsection">

            <div class="box-main">

              <div class="sixHalf">

                <table class="two">

                 <tr>

                  <td>

                  <abbr title="Download Modern Bimagic Square of Order 16 on Excelsheet 1"><a href="../Squarespace_3/BimagicSquare_Order16_1.xlsx" download><button class="btn_5">Modern Bimagic Square 1</button></a></abbr>

                  <abbr title="Download Modern Bimagic Square of Order 16 on Excelsheet 2"><a href="../Squarespace_3/BimagicSquare_Order16_2.xlsx" download><button class="btn_5">Modern Bimagic Square 2</button></a></abbr>

                  <abbr title="Download Modern Bimagic Square of Order 16 on Excelsheet 3"><a href="../Squarespace_3/BimagicSquare_Order16_3.xlsx" download><button class="btn_5">Modern Bimagic Square 3</button></a></abbr>

                  </td>

                 </tr>  

               </table>

              </div>      

            </div>

          </section>  

   

     <section class="sevensection">

      <div class="box-main">

       <div class="sevenHalf">

     

     <table class="one">

         <ul class="nav-menu">

            <tr>

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

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

            <tr>

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

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

            <tr>

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

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

            <tr>

                <th_1 style="color: white; font-size: 0.8vw">S3=n*S1^2</th_1>

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

            <tr>

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

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

            <tr>

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

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

         </ul>

    </table>  

     

    </div>      

    </div>

   </section>

           

    </div>      

  </div>

 </article>      

 <!-- /* ---------New Layout Section2---------- */ -->

               

  <!-- /* ---------New Layout Section3---------- */ -->  

  <aside class="sidenav" id="left">

    <div class="nav-menu">  

     <h2>Squaremagie space</h2>

     

        <ul class="nav-menu">

               <a style="text-decoration: none;" href="BimagicPrime/primebimagic_n11.html"><li class="nav-item">

                    <span>📁</span>

                    <span>Formula | Prime square 11</span>

                </li></a>

                <a style="text-decoration: none;" href="BimagicPrime/primebimagic_n17a.html"><li class="nav-item">

                    <span>📁</span>

                    <span>Formula | Prime square 17</span>

                </li></a>

                <a style="text-decoration: none;" href="GPfeffermann/bimagicpuzzle_n8.html"><li class="nav-item">

                    <span>📁</span>

                    <span>Formula | G. Pfeffermann 8</span>

                </li></a>

                <a style="text-decoration: none;" href="GPfeffermann/bimagicpuzzle_n9.html"><li class="nav-item">

                    <span>📁</span>

                    <span>Formula | G. Pfeffermann 9</span>

                </li></a>

                <a style="text-decoration: none;" href="GTarry/bimagicsquare_n8a.html"><li class="nav-item">

                    <span>📁</span>

                    <span>Formula | Gaston Tarry 8</span>

                    </li></a>

                <a style="text-decoration: none;" href="AGerardin/bimagicsquare_n8a.html"><li class="nav-item">

                    <span>📁</span>

                    <span>Formula | André Gérardin 8</span>

                </li></a>

                <a style="text-decoration: none;" href="MHermansson/magicsquare_n4.html"><li class="nav-item">

                    <span>📁</span>

                    <span>Formula | Magic square 4</span>

                </li></a>

                <a style="text-decoration: none;" href="MHermansson/magicsquare_n5.html"><li class="nav-item">

                    <span>🔔</span>

                    <span>Formula | Magic square 5</span>

                </li></a>

                 <a style="text-decoration: none;" href="MHermansson/magicsquare_n7.html"><li class="nav-item">

                    <span>🔔</span>

                    <span>Formula | Magic square 7</span>

                    </li></a>

                <a style="text-decoration: none;" href="MHermansson/bimagicsquare_n8a.html"><li class="nav-item">

                    <span>&#128509;</span>

                    <span>Formula | BimagicSquare 8</span>

                </li></a>

                <a style="text-decoration: none;" href="MHermansson/bimagicsquare_n9a.html"><li class="nav-item">

                    <span>📒</span>

                    <span>Formula | BimagicSquare 9</span>

                </li></a>

          </ul>    

           

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

       

       <section class="eigthsection">

         <div class="box-main">

            <div class="eigthHalf">

     

                <button class="btn">

                 <table class="three">

                  <tr>

                    <td>2</td>

                    <td>31</td>

                    <td>63</td>

                    <td>25</td>

                    <td>48</td>

                    <td>77</td>

                    <td>15</td>

                    <td>44</td>

                    <td>64</td>

                  </tr>

                  <tr>

                    <td>68</td>

                    <td>16</td>

                    <td>39</td>

                    <td>55</td>

                    <td>6</td>

                    <td>35</td>

                    <td>81</td>

                    <td>20</td>

                    <td>49</td>

                  </tr>

                  <tr>

                    <td>53</td>

                    <td>73</td>

                    <td>24</td>

                    <td>40</td>

                    <td>72</td>

                    <td>11</td>

                    <td>30</td>

                    <td>59</td>

                    <td>7</td>

                  </tr>

                  <tr>

                    <td>37</td>

                    <td>69</td>

                    <td>17</td>

                    <td>36</td>

                    <td>56</td>

                    <td>4</td>

                    <td>50</td>

                    <td>79</td>

                    <td>21</td>

                  </tr>

                  <tr>

                    <td>22</td>

                    <td>54</td>

                    <td>74</td>

                    <td>12</td>

                    <td>41</td>

                    <td>70</td>

                    <td>8</td>

                    <td>28</td>

                    <td>60</td>

                  </tr>

                  <tr>

                    <td>61</td>

                    <td>3</td>

                    <td>32</td>

                    <td>78</td>

                    <td>26</td>

                    <td>46</td>

                    <td>65</td>

                    <td>13</td>

                    <td>45</td>

                  </tr>

                  <tr>

                    <td>75</td>

                    <td>23</td>

                    <td>52</td>

                    <td>71</td>

                    <td>10</td>

                    <td>42</td>

                    <td>58</td>

                    <td>9</td>

                    <td>29</td>

                  </tr>

                  <tr>

                    <td>33</td>

                    <td>62</td>

                    <td>1</td>

                    <td>47</td>

                    <td>76</td>

                    <td>27</td>

                    <td>43</td>

                    <td>66</td>

                    <td>14</td>

                  </tr>

                  <tr>

                    <td>18</td>

                    <td>38</td>

                    <td>67</td>

                    <td>5</td>

                    <td>34</td>

                    <td>57</td>

                    <td>19</td>

                    <td>51</td>

                    <td>80</td>

                  </tr>

                </table></button>

               

                <div class="font">

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

                </div>

               

          </div>      

        </div>

       </section>                            

           

    </div>  

   </aside>

 <!-- /* ---------New Layout Section3a---------- */ -->    

 

 <!-- /* ---------New Layout Section3b---------- */ -->  

   <aside class="sidesms" id="right">

    <div class="sms-menu">

     <h2>Squarespace magie</h2>

     

       <section class="ninesection">

        <div class="box-main">

         <div class="nineHalf">

             

        <table class="one">

            <tr>

              <div class="font">

                <th_1 style="color: white; font-size: 0.7vw;">dna Animation</th_1>

              </div>  

            </tr>

        </table>

             

     <section class="tensection">

       <div class="box-main">

         <div class="tenHalf">

           <table class="two">

            <tr><th><td_2>

             <div class="material">

               <div class="dna"></div>

               <div class="dna"></div>

               <div class="dna"></div>

               <div class="dna"></div>

               <div class="dna"></div>

               <div class="dna"></div>

               <div class="dna"></div>

               <div class="dna"></div>

               <div class="dna"></div>

               <div class="dna"></div>

               <div class="dna"></div>

               <div class="dna"></div>

               <div class="dna"></div>

               <div class="dna"></div>

               <div class="dna"></div>

               <div class="dna"></div>

               <div class="dna"></div>

               <div class="dna"></div>

               <div class="dna"></div>

               <div class="dna"></div>

               <div class="dna"></div>

               <div class="dna"></div>

               <div class="dna"></div>

               <div class="dna"></div>

               <div class="dna"></div>

               <div class="dna"></div>

               <div class="dna"></div>

               <div class="dna"></div>

             </div>

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

         </table>

        </div>

      </div>  

    </section>    

   

    </div>

    </div>  

    </section>

             

        <section class="elevensection">

          <div class="box-main">

           <div class="elevenHalf">

            <table class="one">

            <tr>

                <td_1><p>The Key</p>

                    <div class="gallery">

                    <abbr title="Original by Chen Qinwu and Chen Mutian, China 2005."><button class="btn_6"><p class=button_3>

                    <a href="../images2/TrimagicSquare_16a.png" style="max-width:100%" alt="Trimagic Square" target="_blank">

                    <img src="../images2/top-03.png" class="small" alt="Trimagic Square"></a>

                    </p></button></abbr>

                    <div class="desc">Trimagic Square Order 16</div>

                    </div>

                </td_1>

            </tr>  

            </table>

           </div>

          </div>        

        </section>                        

       

   </div>              

  </aside>              

  <!-- /* ---------New Layout Section3b---------- */ -->    

       

  <!-- /* coding java script with micke */ -->

               <!-- Trigger/Open The Modal -->

                 <div id="myModal" class="modal">

                 

                 <!-- Modal content -->

               <div class="modal-content">

               <span class="close">&times;</span>

               <h3 style="color:black; text-align: left" class="text-medium" id="program">Space Shuttle Discovery start at Cape Canaveral, Florida 1994.</h3>

               <p class="button_1"><div class="scroll">

                   <p class="button_2"><abbr title="Photocredit: NASA 1994."><img style="max-width: 100%; height: auto;" src="../images/moon1.jpg" alt="Space Shuttle Discovery" class="medium" /></abbr>      

                   <B>The Space Shuttle</B><br />

The world's first reusable spacecraft launched like a rocket, maneuvered in Earth orbit like a spacecraft and landed like an airplane. It was comprised of the orbiter, the main engines, the external tank, and the solid rocket boosters.<br /><br />

The Space Shuttle was the world’s first reusable spacecraft, and the first spacecraft in history that can carry large satellites both to and from orbit. The Shuttle launches like a rocket, maneuvers in Earth orbit like a spacecraft and lands like an airplane. Each of the three Space Shuttle orbiters now in operation—Discovery, Atlantis and Endeavour—is designed to fly at least 100 missions. So far, altogether they have flown a combined total of less than one-fourth of that.<br /><br />

Columbia was the first Space Shuttle orbiter to be delivered to NASA’s Kennedy Space Center, Fla., in March 1979. Columbia and the STS-107 crew were lost Feb. 1, 2003, during re-entry. The Orbiter Challenger was delivered to KSC in July 1982 and was destroyed in an explosion during ascent in January 1986. Discovery was delivered in November 1983. Atlantis was delivered in April 1985. Endeavour was built as a replacement following the Challenger accident and was delivered to Florida in May 1991. An early Space Shuttle Orbiter, the Enterprise, never flew in space but was used for approach and landing tests at the Dryden Flight Research Center and several launch pad studies in the late 1970s.<br /><br />

The Space Shuttle consists of three major components: the Orbiter which houses the crew; a large External Tank that holds fuel for the main engines; and two Solid Rocket Boosters which provide most of the Shuttle’s lift during the first two minutes of flight. All of the components are reused except for the external fuel tank, which burns up in the atmosphere after each launch.

The longest the Shuttle has stayed in orbit on any single mission is 17.5 days on mission STS-80 in November 1996. Normally, missions may be planned for anywhere from five to 16 days in duration. The smallest crew ever to fly on the Shuttle numbered two people on the first few missions. The largest crew numbered eight people. Normally, crews may range in size from five to seven people. The Shuttle is designed to reach orbits ranging from about 185 kilometers to 643 kilometers (115 statute miles to 400 statute miles) high.<br /><br />

The Shuttle has the most reliable launch record of any rocket now in operation. Since 1981, it has boosted more than 1.36 million kilograms (3 million pounds) of cargo into orbit. More than than 600 crew members have flown on its missions. Although it has been in operation for almost 20 years, the Shuttle has continually evolved and is significantly different today than when it first was launched. NASA has made literally thousands of major and minor modifications to the original design that have made it safer, more reliable and more capable today than ever before.<br /><br />

Since 1992 alone, NASA has made engine and system improvements that are estimated to have tripled the safety of flying the Space Shuttle, and the number of problems experienced while a Space Shuttle is in flight has decreased by 70 percent. During the same period, the cost of operating the Shuttle has decreased by one and a quarter billion dollars annually—a reduction of more than 40 percent. At the same time, because of weight reductions and other improvements, the cargo the Shuttle can carry has increased by 7.3 metric tons (8 tons.)<br /><br />

<B>Main Engines</B><br />

The three Space Shuttle Main Engines, in conjunction with the Solid Rocket Boosters, provide the thrust to lift the Orbiter off the ground for the initial ascent. The main engines continue to operate for 8.5 minutes after launch, the duration of the Shuttle’s powered flight.<br /><br />

After the solid rockets are jettisoned, the main engines provide thrust which accelerates the Shuttle from 4,828 kilometers per hour (3,000 mph) to over 27,358 kilometers per hour (17,000 mph) in just six minutes to reach orbit. They create a combined maximum thrust of more than 1.2 million pounds.<br /><br />

As the Shuttle accelerates, the main engines burn a half-million gallons of liquid propellant provided by the large, orange external fuel tank. The main engines burn liquid hydrogen—the second coldest liquid on Earth at minus 423 degrees Fahrenheit (minus 252.8 degrees Celsius)—and liquid oxygen.<br /><br />

The engines’ exhaust is primarily water vapor as the hydrogen and oxygen combine. As they push the Shuttle toward orbit, the engines consume liquid fuel at a rate that would drain an average family swimming pool in under 25 seconds generating over 37 million horsepower. Their turbines spin almost 13 times as fast as an automobile engine spins when it is running at highway speed.<br /><br />

The main engines develop thrust by using high-energy propellants in a staged combustion cycle. The propellants are partially combusted in dual preburners to produce high-pressure hot gas to drive the turbopumps.

Combustion is completed in the main combustion chamber. Temperatures in the main engine combustion chamber can reach as high as 6,000 degrees Fahrenheit (3,315.6 degrees Celsius).<br /><br />

Each Space Shuttle Main Engine operates at a liquid oxygen/liquid hydrogen mixture ratio of 6 to 1 to produce a sea level thrust of 179,097 kilograms (375,000 pounds) and a vacuum thrust of 213,188 (470,000 pounds).

The engines can be throttled over a thrust range of 65 percent to 109 percent, which provides for a high thrust level during liftoff and the initial ascent phase but allows thrust to be reduced to limit acceleration to 3 g’s during the final ascent phase. The engines are gimbaled to provide pitch, yaw and roll control during the ascent.<br /><br />

<B>Solid Rocket Boosters</B><br />

The Solid Rocket Boosters (SRBs) operate in parallel with the main engines for the first two minutes of flight to provide the additional thrust needed for the Orbiter to escape the gravitational pull of the Earth. At an altitude of approximately 45 km (24 nautical miles), the boosters separate from the orbiter/external tank, descend on parachutes, and land in the Atlantic Ocean. They are recovered by ships, returned to land, and refurbished for reuse. The boosters also assist in guiding the entire vehicle during initial ascent. Thrust of both boosters is equal to 5,300,000 lbs.<br /><br />

<B>Propellant Properties</B><br />

16% Atomized aluminum powder (fuel)<br />

69.8% Ammonium perchlorate (oxidizer)<br />

.2% Iron oxide powder (catalyst)<br />

12% Polybutadiene acrylic acid acrylamide (binder)<br />

2% Epoxy curing agent<br /><br />

In addition to the solid rocket motor, the booster contains the structural, thrust vector control, separation, recovery, and electrical and instrumentation subsystems.

The solid rocket motor is the largest solid propellant motor ever developed for space flight and the first built to be used on a manned craft. The huge motor is composed of a segmented motor case loaded with solid propellants, an ignition system, a movable nozzle and the necessary instrumentation and integration hardware.<br /><br />

Each solid rocket motor contains more than 450,000 kg (1,000,000 lb.) of propellant, which requires an extensive mixing and casting operation at a plant in Utah. The propellant is mixed in 600-gallon bowls located in three different mixer buildings. The propellant is then taken to special casting buildings and poured into the casting segments.<br /><br />

Cured propellant looks and feels like a hard rubber typewriter eraser. The combined polymer and its curing agent is a synthetic rubber. Flexibility of the propellant is controlled by the ratio of binder to curing agent and the solid ingredients, namely oxidizer and aluminum. The solid fuel is actually powdered aluminum — a form similar to the foil wraps in your kitchen — mixed with oxygen provided by a chemical called ammonium perchlorate.<br /><br />

<B>External Tank</B><br />

The External Tank, or ET, is the “gas tank” for the Orbiter; it contains the propellants used by the Space Shuttle Main Engines.<br /><br />

The tank is also the “backbone” of the Shuttle during the launch, providing structural support for attachment with the solid rocket boosters and orbiter.<br /><br />

The tank is the only component of the Space Shuttle that is not reused. Approximately 8.5 minutes into the flight, with its propellant used, the tank is jettisoned.<br /><br />

At liftoff, the External Tank absorbs the total (7.8 million pounds) thrust loads of the three main engines and the two solid rocket motors.<br /><br />

When the Solid Rocket Boosters separate at an altitude of approximately 45 kilometers (28 miles), the orbiter, with the main engines still burning, carries the external tank piggyback to near orbital velocity, approximately 113 kilometers (70 miles) above the Earth. The now nearly empty tank separates and falls in a preplanned trajectory with the majority of it disintegrating in the atmosphere and the rest falling into the ocean.<br /><br />

The three main components of the External Tank are an oxygen tank, located in the forward position, an aft-positioned hydrogen tank, and a collar-like intertank, which connects the two propellant tanks, houses instrumentation and processing equipment, and provides the attachment structure for the forward end of the solid rocket boosters.<br /><br />

The hydrogen tank is 2.5 times larger than the oxygen tank but weighs only one-third as much when filled to capacity. The reason for the difference in weight is that liquid oxygen is 16 times heavier than liquid hydrogen.

The skin of the External Tank is covered with a thermal protection system that is a 2.5-centimeter (1-inch) thick coating of spray-on polyisocyanurate foam. The purpose of the thermal protection system is to maintain the propellants at an acceptable temperature, to protect the skin surface from aerodynamic heat and to minimize ice formation.<br /><br />

The External Tank includes a propellant feed system to duct the propellants to the Orbiter engines, a pressurization and vent system to regulate the tank pressure, an environmental conditioning system to regulate the temperature and render the atmosphere in the intertank area inert, and an electrical system to distribute power and instrumentation signals and provide lightning protection.<br /><br />

The tank’s propellants are fed to the Orbiter through a 43-centimeter (17-inch) diameter connection that branches inside the orbiter to feed each main engine.<br /><br />

<B>Orbiter Discovery</B><br />

Discovery (OV-103) was NASA’s third space shuttle orbiter to join the fleet, arriving for the first time at the Kennedy Space Center in Florida in November 1983.<br /><br />

After checkout and processing, it was launched on Aug. 30, 1984, for its first mission, 41-D, to deploy three communications satellites.<br /><br />

Since that inaugural flight, Discovery has completed more than 30 successful missions, surpassing the number of flights made by any other orbiter in NASA’s fleet. Just like all of the orbiters, it has undergone some major modifications over the years. The most recent began in 2002 and was the first carried out at Kennedy. It provided 99 upgrades and 88 special tests, including new changes to make it safer for flight.<br /><br />

Discovery has the distinction of being chosen as the Return to Flight orbiter twice. The first was for STS-26 in 1988, and the second when it carried the STS-114 crew on NASA’s Return to Flight mission to the International Space Station in July 2005.<br /><br />

The choice of the name “Discovery” carried on a tradition drawn from some historic, Earth-bound exploring ships of the past. One of these sailing forerunners was the vessel used in the early 1600s by Henry Hudson to explore Hudson Bay and search for a northwest passage from the Atlantic to the Pacific.<br /><br />

Another such ship was used by British explorer James Cook in the 1770s during his voyages in the South Pacific, leading to the discovery of the Hawaiian Islands. In addition, two British Royal Geographical Society ships have carried the name “Discovery” as they sailed on expeditions to the North Pole and the Antarctic.<br /><br />

Destined for exploring the heavens instead of the seas, it was only fitting that NASA’s Discovery carried the Hubble Space Telescope into space during mission STS-31 in April 1990, and provided both the second and third Hubble servicing missions (STS-82 in February 1997 and STS-103 in December 1999).<br /><br />

During its many successful trips to space, Discovery has carried satellites aloft, ferried modules and crew to the International Space Station, and provided the setting for countless scientific experiments.<br /><br />

https://www.nasa.gov/reference/the-space-shuttle/

</p>

    </div>  

   </div>

  </div>                      

       

    <script class="script.js">

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

       

    <!-- /* ---------New Layout Section4---------- */ -->

    <footer class="left" id="down">

        <div class="font"><span>Link |</span><a style="text-decoration: none; color:blue" href="formula.special.html" target="_blank"><span> Special Footer on Formula</span></a></div>          

    </footer>        

    <footer class="center" id="down">

        <div class="font">&copy;<span id="year">2026</span><span> Squaremagie Space. All rights reserved.</span></div>          

    </footer>

    <footer class="right" id="down">

        <div class="font">&copy;<span id="year">2026</span><span> Mikael Hermansson </span></div>          

    </footer>

    <!-- /* ---------New Layout Section4---------- */ -->                

                         

   </centre>  

  </body>

</html>