<!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>🗽</span> <span>Development</span> <span>🗽</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>🗽</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">×</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">©<span id="year">2026</span><span> Squaremagie
Space. All rights reserved.</span></div>
</footer>
<footer class="right" id="down">
<div class="font">©<span id="year">2026</span><span> Mikael Hermansson </span></div>
</footer>
<!-- /* ---------New Layout Section4---------- */ -->
</centre>
</body>
</html>