<!DOCTYPE html>

<head>

<title>Squaremagie Links</title>

<style>

img {

max-width: 100%;

height: auto;

}

</style>

</head>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

/* ! important to have "centre" into page instead for only "body" ! */

/* ! important to have body forth in the page display - forth=draw up text, layout design ! */

#pageBody {

grid-area: start;

}

.start div {

grid-area: auto;

}

.centre.forth, body {

display: page content;

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

background-repeat: no-repeat;

background-size: 100% 100%;

display: flex!important;

justify-content: center;

align-items: center;

float: center;

width: 100%;

min-height: 100vh;

max-width: auto;

max-height: 100%;

}

/* ! important to have "above" instead for header and "left-center-right" 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; /* ! importand to have colon ";" after the template in grid-template-area: otherwise the page 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, #667eea 0%, #764ba2 100%);

width: 100%;

min-height: 100vh;

max-width: auto;

max-height: 100%;

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

overflow-y: auto;

margin: 0;

}

/* Building responsive layouts for tablets */

@media (max-width: 1024px) {

.page {

display: grid;

grid-template-areas:

"top above above"

"nav main sms"

"inline content space"

"left center right" !important;

grid-template-rows: auto 1fr auto;

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

grid-gap: 10px;

padding: 10px;

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

min-height: 100vh;

max-width: auto;

max-height: 100%;

margin: 0;

}

.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" !important;

grid-template-rows: auto 1fr auto;

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

grid-gap: 10px;

padding: 10px;

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

min-height: 100vh;

max-width: auto;

max-height: 100%;

margin: 0;

}

.header h1 {

font-size: 12px;

margin-bottom: 4px;

}

.main {

padding: 8px 4px;

}

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

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

#pageHeader {

grid-area: top;

}

.top div {

grid-area: flex;

}

.top, header {

grid-area: top;

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

grid-row: 1 / 2 !important;

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

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

color: white;

padding: 2px 10px;

border-radius: 12px;

max-width: auto;

max-height: 100%;

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

}

.top.above, header {

grid-area: above;

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

grid-row: 1 / 2 !important;

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

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

color: white;

padding: 2px 10px;

border-radius: 12px;

max-width: auto;

max-height: 100%;

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

}

.above p {

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

font-size: 1.15vw;

line-height: 1.25vw;

text-align: center;

padding-bottom: 0.4vw;

margin-top: 3.25%;

}

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

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

#mainArticle {

grid-area: middle;

}

.middle div {

grid-area: center;

}

.main.content, article {

grid-area: content;

grid-column: 1fr !important;

grid-row: 1fr !important;

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

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

background-repeat: no-repeat;

background-size: 100% 100%;

justify-content: center;

align-items: center;

min-height: 100vh;

max-width: auto;

max-height: 100%;

padding: 2%;

padding-bottom: 0%;

border-radius: 8px;

border-bottom: none;

position: relative;

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

}

.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-bottom: 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.7vw;

text-align: center;

line-height: 0.7vw;

margin-top: 0px;

border-bottom: none;

}

#menuSection {

grid-area: center;

}

.mac-menu {

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

}

.mac-section.one {

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

padding: 5px;

border-radius: 8px;

margin: 4px 4px;

margin-top: 2%;

margin-bottom: 0%;

border-left: 4px solid #667eea;

}

.mac-section.one:hover {

background: white;

padding: 5px;

border-radius: 8px;

margin: 4px 4px;

margin-top: 2%;

margin-bottom: 0%;

border-left: 4px solid #667eea;

}

.mac-section.two {

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

padding: 5px;

border-radius: 8px;

margin: 4px 4px;

margin-top: 1.4%;

margin-bottom: 0%;

border-left: 4px solid #667eea;

}

.mac-section.two:hover {

background: white;

padding: 5px;

border-radius: 8px;

margin: 4px 4px;

margin-top: 1.4%;

margin-bottom: 0%;

border-left: 4px solid #667eea;

}

.mac-section.active {

background: lightgoldenrodyellow;

padding: 8px;

padding-left: 10px;

border-radius: 8px;

margin: 4px 4px;

margin-top: 0%;

margin-bottom: 1.4%;

border-left: none;

}

.mac-section h1 {

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

color: #667eea;

font-size: 1vw;

line-height: 1;

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;

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

line-height: 1;

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 orange (vsc). */

#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%, white 100%);

padding: 10%;

padding-bottom: 0%;

border-radius: 12px;

max-width: auto;

max-height: 100%;

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

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

}

.sidenav h2 {

color: green;

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

font-size: 0.94vw;

text-align: center;

line-height: 1vw;

margin-bottom: 0px;

}

.sidenav ul {

list-style: none;

padding: 4% 0%;

}

.sidenav li {

color: blue;

font-size: 0.75vw;

padding: 12px 8px;

margin-bottom: 8px;

border-radius: 8px;

cursor: pointer;

transition: all 0.3s ease;

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

}

.sidenav li:hover {

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

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, #e0c3fc 0%, white 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%, white 100%);

}

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

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

#smsAside {

grid-area: right;

}

.right div {

grid-area: flex;

}

.sidesms, aside {

grid-area: space;

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

grid-row: 1fr !important;

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

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

padding: 10%;

padding-bottom: 0%;

border-radius: 12px;

max-width: auto;

max-height: 100%;

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

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;

}

.sidesms p {

color: blueviolet;

font-size: 0.98vw;

text-align: center;

line-height: 1vw;

margin-top: 4%;

}

.sidesms ul {

list-style: none;

padding: 4% 0%;

}

.sidesms li {

color: blue;

font-size: 0.75vw;

padding: 12px 8px;

margin-bottom: 8px;

border-radius: 8px;

cursor: pointer;

transition: all 0.3s ease;

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

}

.sidesms li:hover {

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

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

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, #e0c3fc 0%, white 100%);

}

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

/* coding responsive bottom section with micke, grid-area shold indicate orange (vsc). */

#pageFooter {

grid-area: bottom;

}

.bottom 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(to top, rgba(0, 0, 0, 0.4), transparent);

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

line-height: 1vw;

text-align: center;

}

.left, footer {

grid-area: left;

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

grid-row: 5 / 6 !important;

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

color: blue;

text-align: center;

padding: 8px 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.8vw;

line-height: 1vw;

}

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

line-height: 1vw;

}

/* coding Responsive down footer section with micke, grid-area shold indicate red (brackets). */

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

.menu{

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

max-width: auto;

max-height: 100%;

text-align: center;

}

.leftmenu {

float: left;

margin-top: 12.5%;

margin-left: 14%;

}

.leftmenu_1 {

float: left;

font-size: 0.5vw;

line-height: 2;

margin-top: 2.8%;

margin-left: 1%;

}

.rightmenu {

max-width: auto;

max-height: 100%;

float: right;

margin-top: 0%;

padding-bottom: 0px;

}

.menu-bar ul{

display: inline-flex;

list-style: none;

}

.menu-bar ul li{

width: 100px;

margin: 5px;

padding: 5px;

font-size: 15px;

}

.menu-bar ul li a{

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

color: white;

text-decoration: none;

}

.menu-bar ul li :hover{

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

padding: 2px 2px;

margin-bottom: 2px;

border-radius: 2px;

cursor: pointer;

transition: all 0.1s ease;

font-size: 15px;

color: white;

transform: translateX(1px);

}

.menu-bar ul li_id1{

width: 100px;

margin: 5px;

padding: 5px;

font-size: 15px;

}

.menu-bar ul li_id1 a{

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

color: white;

text-decoration: none;

}

.menu-bar ul li_id1 :hover{

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

padding: 2px 2px;

margin-bottom: 2px;

border-radius: 2px;

cursor: pointer;

transition: all 0.1s ease;

font-size: 15px;

color: red;

transform: translateX(1px);

}

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

/* coding color script with micke */

.animate-charcter {

text-transform: uppercase;

background-image: linear-gradient(

225deg,

purple 10%,

blueviolet 30%,

deeppink 70%,

yellow 90%

);

background-size: auto auto;

background-clip: border-box;

background-size: 200% auto;

color: #fff;

background-clip: text;

color: transparent;

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

animation: textclip 3s linear infinite;

display: inline-block;

font-size: 1.38vw;

text-align: center;

}

@keyframes textclip {

to {

background-position: -200% center;

}

/* coding color script with micke */

/* coding gallery and text section with micke */

.firstsection{

background-color: none;

height: 0%;

margin-top: 1.3%;

margin-bottom: 0%;

}

.firsthalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

.secondsection{

background-color: none;

height: 0%;

margin-top: 0.1%;

margin-bottom: 0%;

}

.secondhalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

}

.thirdsection{

background-color: none;

height: 0%;

margin-top: 0%;

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

margin-bottom: 0%;

}

.fourthhalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: right;

font-weight: none;

text-transform: none;

text-align: right;

}

.fifthsection{

background-color: none;

height: 0.3%;

margin-top: 1%;

margin-bottom: 0%;

}

.fifthhalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

font-weight: none;

text-transform: none;

}

.sixsection{

background-color: none;

height: 0.3%;

margin-top: 1%;

margin-bottom: 0%;

}

.sixhalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

font-weight: none;

text-transform: none;

}

.sevensection{

background-color: none;

height: 0%;

margin-top: 0.5%;

margin-bottom: 0%;

}

.sevenhalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

font-weight: none;

text-transform: none;

}

.box-main{

display: flex;

justify-content: center;

align-items: center;

color: black;

font-size: 16px;

max-width: auto;

margin: auto;

height: 100%;

margin-top: 0%;

}

/* coding gallery and text section with micke */

.btn_1 {

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

color: white;

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

border: none;

font-size: 15px;

font-weight: none;

text-transform: none;

line-height: 15px;

width: auto;

margin: 0px 0px;

margin-top: 5px;

margin-bottom: 1px;

border: 2px solid white;

cursor: pointer;

padding: 3px 3px;

border-style: outset;

}

.btn_1:hover{

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

color: black;

font-weight: bold;

text-transform: uppercase;

}

.btn_2{

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

color: white;

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

border: none;

font-size: 0px;

font-weight: bold;

text-transform: uppercase;

line-height: 0px;

width: auto;

margin: 0px 1px;

margin-top: 5px;

margin-bottom: 2px;

border: 3px solid white;

cursor: pointer;

}

.btn_2:hover{

background-color: none;

color: black;

}

.btn_3{

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

color: white;

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

border: none;

font-size: 0px;

font-weight: bold;

text-transform: uppercase;

line-height: 0px;

width: auto;

margin: 0px 1px;

margin-top: 5px;

margin-bottom: 0px;

border: 3px solid white;

cursor: pointer;

padding: 0px 0px

max-width: 100%;

max-height: auto;

}

.btn_3:hover{

background-color: none;

color: black;

}

.btn_4{

background-color: lightgray;

color: blue;

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

font-size: 0.7vw;

font-weight: none;

text-transform: none;

line-height: 1.2vw;

width: auto;

margin: 0px 2px;

margin-top: 1vw;

border: 3px solid white;

cursor: pointer;

padding: 1px 10px;

border-style: outset;

}

.btn_4:hover{

background-color: white;

color: red;

border-style: inset;

}

.btn_5 {

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

color: white;

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

border: none;

font-size: 15px;

font-weight: none;

text-transform: none;

line-height: 15px;

width: auto;

margin: 0px 0px;

margin-top: 5px;

margin-bottom: 1px;

border: 2px solid white;

cursor: pointer;

padding: 3px 3px;

border-style: outset;

}

.btn_5:hover{

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

color: black;

font-weight: bold;

text-transform: uppercase;

}

p.button {

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

background-color: white;

color: blue;

text-align: center;

text-decoration: none;

display: inline-block;

font-weight: none;

text-transform: none;

font-size: 14px;

margin-top: 2%;

padding: 2px 5px;

border-style: inset;

}

p.button:hover {

background-color: blueviolet;

color: white;

}

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

position: relative;

border-style: none;

}

p.button_1:hover {

background-color: white;

}

p.button_2 {

background-color: none;

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

color: black;

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

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

height: 576px;

border-style: none;

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

}

p.button_2:hover {

background-color: white;

color: black;

}

/* coding text with micke */

.text{

width: 100%;

margin-top: 0%;

text-transform: uppercase;

color: white;

}

.text h2 {

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

color: black;

font-size: 1vw;

text-align: left;

font-weight: none;

text-transform: none;

}

text-align: center;

margin-top: 0px;

}

p_1{

text-align: center;

margin-top: 1px;

font-size: 16px;

}

.text-medium{

font-family: 'piazzolla', serif;

font-weight: bold;

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

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

color: green;

font-size: 1.1vw;

}

.text-small{

font-size: 15px;

text-align: left;

}

.btn-sm{

padding: 6px 10px;

vertical-align: middle;

}

.center{

text-align: left;

}

img.small {

width: 9vw;

height: 9vw;

}

/* coding text with micke */

/* The Modal (background) */

.modal {

display: none; /* Hidden by default */

position: fixed; /* Stay in place */

z-index: 1; /* Sit on top */

padding-top: 8vw; /* Location of the box */

left: 0;

top: 0;

width: 100%; /* Full width */

height: 100%; /* Full height */

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

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

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

color: black;

text-align: left;

}

/* Modal Content */

.modal-content {

background-color: #fefefe;

margin: auto;

padding: 15px;

border: 1px solid #888;

width: 31%;

height: scroll;

}

/* The Close Button */

.close {

color: red;

float: right;

font-size: 28px;

font-weight: bold;

}

.close:hover,

.close:focus {

color: #000;

text-decoration: none;

cursor: pointer;

}

/* coding table with micke */

table.one {

border-collapse: collapse;

width: 100%;

margin-top: 0%;

border-spacing: 1px 1px;

position: center;

}

td {

background-color: none;

padding: 0.15vw 0.15vw;

border: 2px solid none;

position: center;

}

table.two {

border-collapse: collapse;

width: auto;

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

}

th, td_2 {

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

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

padding-right: 0px;

height: auto;

width: auto;

font-size: 0px;

text-align: right;

}

table.three td {

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

background-color: none;

padding: 0.12vw 0.12vw;

border: 1px solid white;

font-size: 0.87vw;

line-height: 0.81vw;

text-align: right;

}

table.four td {

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

background-color: none;

padding: 0.12vw 0.12vw;

border: 1px solid white;

font-size: 0.87vw;

line-height: 0.81vw;

text-align: right;

}

/* coding table with micke */

/* coding Responsive sidebar layout with micke - advertising space-item */

.gallery.one {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(25%, 100%));

grid-auto-rows: 10vw;

grid-gap: 0px;

width: 0;

height: 0;

min-height: auto;

min-width: 100%;

max-width: auto;

margin: 0 auto;

margin-top: 8%;

}

.gallery-item {

position: relative;

overflow: hidden;

border-radius: 12px;

cursor: pointer;

margin-bottom: -18%;

transition: transform 0.4s ease, box-shadow 0.4s ease;

}

.gallery-item:hover {

transform: scale(1.05);

box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);

z-index: 10;

}

.gallery-item::before {

content: '';

position: absolute;

background: linear-gradient(135deg, rgba(102, 126, 234, 0.3), rgba(118, 75, 162, 0.3));

opacity: 0;

transition: opacity 0.3s ease;

}

.gallery-item:hover::before {

opacity: 1;

}

.item-content {

position: relative;

width: 100%;

height: 100%;

display: flex;

align-items: center;

justify-content: center;

color: white;

font-size: 1vw;

font-weight: 500;

text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);

}

.item-overlay {

position: absolute;

bottom: 0;

left: 0;

right: 0;

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

padding: 20px;

transform: translateY(100%);

transition: transform 0.3s ease;

}

.gallery-item:hover .item-overlay {

transform: translateY(0);

}

.item-title {

color: white;

font-size: 0.9vw;

font-weight: 600;

margin-bottom: 10px;

}

.item-description {

color: rgba(255, 255, 255, 0.8);

font-size: 0.75vw;

}

/* Building responsive layouts with strategic spans */

.gallery-item:nth-child(1) {

}

.gallery-item:nth-child(2) {

}

/* coding Responsive sidebar layout with micke - advertising space-item */

.gallery {

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

--g: 0px; /* control the gap */

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

display: grid;

grid-gap: var(--g);

height: calc(1*var(--s) + 0*var(--g));

aspect-ratio: 1;

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

}

.gallery > img {

width: 0;

height: 0;

min-height: 100%;

min-width: 100%;

object-fit: cover;

cursor: pointer;

filter: grayscale(80%);

transition: .35s linear;

}

.gallery img:hover{

filter: grayscale(0);

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

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

}

</style>

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

</div>

</div>

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

<li :hover> <a style="color:white; cursor: pointer;" id="myBtn"><i class="fa fa-intel;"><span>Intel chip</span></i></a> </li>

</ul>

</div>

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

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

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

<li> <a href="../Trimagic/trimagic.html"><i class="fa fa-square">Trimagic</i></a> </li>

<li> <a href="../History/history.html"><i class="fa fa-images">History</i></a> </li>

<li_id1> <a style="color:aqua;" href="../Links/links.html"><i class="fa fa-links">Links</i></a> </li_id1>

<li> <a href="../Space/space.html"><i class="fa fa-mail">Space</i></a> </li>

</ul>

</div>

</header>

<tr>

<td>

<h4>Squaremagie Space X</h4>

</div>

</td>

</tr>

</table>

</div>

</div></div>

</section>

<tr>

<td>

<h3> <span>Design</span> <span>🗽</span> <span>Development</span> <span>🗽</span> <span>Hightech</span> </h3>

</div>

</td>

</tr>

</table>

</div>

</div></div>

</section>

<tr>

<td>

<h3><p style="font-size: 0.72vw; padding-top: 0.2vw;" class="button"> WE ARE THE ONE OF THE WORLD's TOP CREATIVE HIGHTECH AGENCIES </p></h3>

</div>

</td>

</tr>

</table>

</div>

</div></div>

</section>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></button>

</td_2></th>

</table></button></a>

</td_2></th>

</table></button></a>

</td_2></th>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></button>

</td_2></th>

</table>

</div>

</div></div>

</section>

<p> Bimagic Square of Order 8 with 4x trimagic diagonal. By @ Mikael Hermansson. Photo credit1: Nikon, credit2: NASA 1994. </p>

</div>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></button>

</td_2></th>

</table></button></a>

</td_2></th>

</table></button></a>

</td_2></th>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></button>

</td_2></th>

</table>

</div>

</div></div>

</section>

<p> Bimagic Square of Order 8 with 4x trimagic diagonal. By @ Mikael Hermansson 2021. Photo credit1: Internet, credit2: Intel. </p>

</div>

<tr>

<td_2>

<abbr title="Download chapter 11 of Holger Danielsson: Magic Square book. pdf-file"><a href="../Squarespace_3/Chapter11_HolgerDanielsson.pdf" target="_blank" download><button class="btn_4">Chapter 11</button></a></abbr>

<abbr title="Download Nikon Lithography story: Magic Squares and Hightech. pdf-file"><a href="../Squarespace_3/Nikon_Lithography.pdf" target="_blank" download><button class="btn_4">Lithography</button></a></abbr>

<abbr title="Download Chen Qinwu story: Trimagic Square of Order 16. pdf-file"><a href="../Squarespace_3/Tri16Story.pdf" target="_blank" download><button class="btn_4">Chen Qinwu</button></a></abbr>

</td_2>

</tr>

</table>

</div>

</section>

<h1>Squaremagie Links</h1>

<p>Recommend links in the menu-bar, opens in new window. Modern multimagie squares represent one of the most powerful tools into feature for quantum computing and quantum key cryptography. The space-room inside the semi-chips are measured with bi- and trimagic squares and with the speed of light constant <i>c</i>, to what the speed correspond in the nature. According to <q>Modern Quantum Mechanics</q> its only possible to measure the speed of light on the Hydrogen atom surface (download Mickes Excelsheet of MQM 2023 and MQM 2024). The key design for modern hightech are possibly to follow with latest update in the newsroom links into the sidebar menu.</p>

</div>

<h2>Squaremagie Story</h2>

<p>Download Nikon Lithography story: Magic Squares and Hightech, on the button above. It's gives one introduction in how the hightech industry are handel magic squares of multimagie in tomorrows semi-chips. In the sidebar menu are links to multimagie homepages with download of the latest from China multimagie squares, computer analysis of bimagic squares of order 8 - 9 and new books of magic squares and the construction of squares into multimagie. This <q>know how</q> is importen for heightech.</p>

</div>

</section>

</div>

</article>

<h2>Squaremagie links</h2>

<span>Home | Christian Boyer</span>

</li></a>

<span>Home | Holger Danielsson</span>

</li></a>

<span>Home | Walter Trump</span>

</li></a>

<span>Home | Aale de Winkel</span>

</li></a>

<span>Magic Square Wikipedia</span>

</li></a>

<span>Lithography | Nikon</span>

</li></a>

<span>Newsroom | Apple</span>

</li></a>

<span>Newsroom | Dell</span>

</li></a>

<span>Newsroom | Intel</span>

</li></a>

<span>Majorana | Microsoft</span>

</li></a>

<span>Newsroom | Microsoft</span>

</li></a>

<span>Newsroom | Nokia</span>

</li></a>

<span>Newsroom | Ericsson</span>

</li></a>

<span>Newsroom | nVidia</span>

</li></a>

<span>Quantum Key | Toshiba</span>

</li></a>

<span>Newsroom | Toshiba</span>

</li></a>

<span>Semi-chips | Nikon</span>

</li></a>

<span>Newsroom | Nikon</span>

</li></a>

<span>Newsroom | Space X</span>

</li></a>

<span>Newsroom | NASA</span>

</li></a>

<span>Science | Sally Ride</span>

</li></a>

<span>Newsroom | Formula 1</span>

</li></a>

<span>Kimi Räikkönen</span>

</li></a>

<span>Valtteri Bottas</span>

</li></a>

<span>Charles Leclerc</span>

</li></a>

<span>Sebastian Vettel</span>

</li></a>

<span>Nico Rosberg</span>

</li></a>

<span>Max Verstappen</span>

</li></a>

<span>Zlatan Ibrahimovic</span>

</li></a>

<span>Leo Messi</span>

</li></a>

<span>Cristiano Ronaldo</span>

</li></a>

<span>Kylian Mbappé</span>

</li></a>

<span>Roger Federer</span>

</li></a>

<span>Rafael Nadal</span>

</li></a>

<span>Novak Djokovic</span>

</li></a>

<span>Katie Ledecky</span>

</li></a>

<span>Pernille Blume</span>

</li></a>

<span>Sarah Sjöström</span>

</li></a>

<span>Michelle Coleman</span>

</li></a>

<span>Rikako Ikee</span>

</li></a>

<span>Ranomi Kromowidjojo</span>

</li></a>

<span>Katinka Hosszu</span>

</li></a>

<span>Penny Oleksiak</span>

</li></a>

<span>Anna Lindberg</span>

</li></a>

<span>Alina Zagitova</span>

</li></a>

<span>Hanna Hermansson</span>

</li></a>

<span>Yolanda Ngarambe</span>

</li></a>

<span>Michaela Meijer</span>

</li></a>

<span>Angelica Bengtsson</span>

</li></a>

<span>Irene Ekelund</span>

</li></a>

<span>Bianca Salming</span>

</li></a>

<span>Malin Ewerlöf</span>

</li></a>

<span>Khaddi Sagnia</span>

</li></a>

<span>Tove Alexandersson</span>

</li></a>

<span>Frida Karlsson</span>

</li></a>

<span>Laura Muir</span>

</li></a>

<span>Konstanze Klosterhalfen</span>

</li></a>

<span>Katharina Liensberger</span>

</li></a>

<span>Petra Vlhova</span>

</li></a>

<span>Tina Weirather</span>

</li></a>

<span>Tessa Worley</span>

</li></a>

<span>Ester Ledecka</span>

</li></a>

<span>Alice Robinson</span>

</li></a>

<span>Wendy Holdener</span>

</li></a>

<span>Viktoria Rebensburg</span>

</li></a>

<span>Dominik Paris</span>

</li></a>

<span>Frida Hansdotter</span>

</li></a>

<span>Ilka Stuhec</span>

</li></a>

<span>Lara Gut-Behrami</span>

</li></a>

</ul>

</div>

</aside>

<h2>Squaremagie links</h2>

<span>News Buckingham Palace</span>

</li></a>

<span>News Stockholms Palace</span>

</li></a>

<span>Home | Princess Madeleine</span>

</li></a>

<span>Home | Prince Carl Philip</span>

</li></a>

<span>Home | Henrik Larsson</span>

</li></a>

<span>Home | Tilde Johansson</span>

</li></a>

<span>Home | Mikaela Shiffrin</span>

</li></a>

<span>Home | Lindsey Vonn</span>

</li></a>

<span>Home | Michael Phelps</span>

</li></a>

<span>Home | Caeleb Dressel</span>

</li></a>

<span>Home | Lewis Hamilton</span>

</li></a>

</ul>

<p>Super Quantum Computing</p>

</div>

</div>

</aside>

<h2 style="color:black;" class="text-medium" id="program">Intel quantum computing.</h2>

<B>Intel's chip to advance silicon spin qubit research for quantum computing.</B><br />

Intel makes new quantum chip available to university and federal research labs to grow the quantum computing research community.

What’s New: Today (2023-06-15), Intel announced the release of its newest quantum research chip, Tunnel Falls, a 12-qubit silicon chip, and it is making the chip available to the quantum research community. In addition, Intel is collaborating with the Laboratory for Physical Sciences (LPS) at the University of Maryland, College Park’s Qubit Collaboratory (LQC), a national-level Quantum Information Sciences (QIS) Research Center, to advance quantum computing research.<br /><br />

“Tunnel Falls is Intel’s most advanced silicon spin qubit chip to date and draws upon the company’s decades of transistor design and manufacturing expertise. The release of the new chip is the next step in Intel’s long-term strategy to build a full-stack commercial quantum computing system. While there are still fundamental questions and challenges that must be solved along the path to a fault-tolerant quantum computer, the academic community can now explore this technology and accelerate research development.”

–<B>Jim Clarke</B>, director of Quantum Hardware, Intel.<br /><br />

Why It Matters: Currently, academic institutions don’t have high-volume manufacturing fabrication equipment like Intel. With Tunnel Falls, researchers can immediately begin working on experiments and research instead of trying to fabricate their own devices. As a result, a wider range of experiments become possible, including learning more about the fundamentals of qubits and quantum dots and developing new techniques for working with devices with multiple qubits.<br /><br />

To further address this, Intel is collaborating with LQC as part of the Qubits for Computing Foundry (QCF) program through the U.S. Army Research Office to provide Intel’s new quantum chip to research laboratories. The collaboration with LQC will help democratize silicon spin qubits by enabling researchers to gain hands-on experience working with scaled arrays of these qubits. The initiative aims to strengthen workforce development, open the doors to new quantum research and grow the overall quantum ecosystem.<br /><br />

The first quantum labs to participate in the program include LPS, Sandia National Laboratories, the University of Rochester, and the University of Wisconsin-Madison. LQC will work alongside Intel to make Tunnel Falls available to additional universities and research labs. The information gathered from these experiments will be shared with the community to advance quantum research and to help Intel improve qubit performance and scalability.

“The LPS Qubit Collaboratory, in partnership with the Army Research Office, seeks to tackle the hard challenges facing qubit development and develop the next generation of scientists who will create the qubits of tomorrow,” said Charles Tahan, chief of Quantum Information Science, LPS. “Intel’s participation is a major milestone to democratizing the exploration of spin qubits and their promise for quantum information processing and exemplifies LQC’s mission to bring industry, academia, national labs, and government together.”

<B>Dr. Dwight Luhman</B>, distinguished member of Technical Staff at Sandia National Laboratories, said, “Sandia National Laboratories is excited to be a recipient of the Tunnel Falls chip. The device is a flexible platform enabling quantum researchers at Sandia to directly compare different qubit encodings and develop new qubit operation modes, which was not possible for us previously. This level of sophistication allows us to innovate novel quantum operations and algorithms in the multi-qubit regime and accelerate our learning rate in silicon-based quantum systems. The anticipated reliability of Tunnel Falls will also allow Sandia to rapidly onboard and train new staff working in silicon qubit technologies.“

<B>Mark A. Eriksson</B>, department chair and <B>John Bardeen</B> Professor of Physics, Department of Physics, University of Wisconsin-Madison, said, “UW-Madison researchers, with two decades of investment in the development of silicon qubits, are very excited to partner in the launch of the LQC. The opportunity for students to work with industrial devices, which benefit from Intel’s microelectronics expertise and infrastructure, opens important opportunities both for technical advances and for education and workforce development.”

https://newsroom.intel.com/new-technologies/quantum-computing-chip<p/>

</div>

// Get the modal

var modal = document.getElementById("myModal");

// Get the button that opens the modal

var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal

var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal

btn.onclick = function() {

modal.style.display = "block";

}

// When the user clicks on <span> (x), close the modal

span.onclick = function() {

modal.style.display = "none";

}

// When the user clicks anywhere outside of the modal, close it

window.onclick = function(event) {

if (event.target == modal) {

modal.style.display = "none";

}

</script>

</footer>

</footer>

<div class="footer"><span class="widget-icon">💰</span><span id="mail">Email:</span><a style="color: green; text-decoration-line: none" href="mailto:squaremagie@outlook.com"><span> Squaremagie Space </span></a></div>

</footer>

</centre>

</body>

</html>