<!DOCTYPE html>

<head>

<title>Squaremagie photocollection 4</title>

<style>

img {

max-width: 100%;

height: auto;

}

</style>

</head>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

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

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

#pageBody {

grid-area: start;

}

.start div {

grid-area: auto;

}

centre.forth, body {

display: page content;

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

background-repeat: no-repeat;

background-size: 100% 100%;

display: flex!important;

justify-content: center;

align-items: center;

float: center;

width: 100%;

min-height: 100vh;

max-width: auto;

max-height: 100%;

}

/* ! important to have id: "top" instead for header and id: "down" instead for footer - "main"=article content, "nav"=navigation inline, "sms"=squaremagie space ! */

.page {

display: grid;

grid-template-areas:

"top above above"

"nav main main"

"inline content content"

"left center center" !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 auto;

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%, pink 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 main"

"inline content content"

"left center center";

grid-template-rows: auto 1fr auto;

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

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%, pink 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 main"

"inline content content"

"left center center";

grid-template-rows: auto 1fr auto;

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

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

grid-gap: 10px;

padding: 10px;

min-height: 100vh;

max-width: auto;

max-height: 100%;

margin: 0;

}

.header h1 {

font-size: 12px;

margin-bottom: 4px;

}

.main {

padding: 8px 4px;

}

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

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

#pageHeader {

grid-area: top;

}

.top div {

grid-area: flex;

}

.top, header {

grid-area: top;

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

grid-row: 1 / 2 !important;

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

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

color: white;

padding: 2px 10px;

border-radius: 12px;

max-width: auto;

max-height: 100%;

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

}

.top.above, header {

grid-area: above;

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

grid-row: 1 / 2 !important;

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

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

color: white;

padding: 2px 10px;

border-radius: 12px;

max-width: auto;

max-height: 100%;

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

}

.above p {

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

font-size: 1.15vw;

line-height: 1.25vw;

text-align: center;

padding-bottom: 0.4vw;

margin-top: 3.25%;

}

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

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

#mainArticle {

grid-area: middle;

}

.middle div {

grid-area: center;

}

.main.content, article {

grid-area: content;

grid-column: 1fr !important;

grid-row: 1fr !important;

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

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

background-repeat: no-repeat;

background-size: 100% 100%;

justify-content: center;

align-items: center;

min-height: 100vh;

max-width: auto;

max-height: 100%;

margin-bottom: 0%;

padding: 2%;

padding-bottom: 2%;

border-radius: 8px;

border-bottom: none;

position: relative;

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

}

.font h1{

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

color: white;

font-size: 1.6vw;

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

padding: 0px;

margin-top: 0%;

}

.font h2{

color: aqua;

font-size: 1.1vw;

text-align: center;

margin-bottom: 0.1vw;

border-bottom: none;

margin-top: 0px;

}

.font h3{

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

color: white;

font-size: 1.8vw;

line-height: 1.8vw

text-align: center;

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

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

border-bottom: none;

padding: 0px;

margin-top: 0%;

}

.font h4{

color: white;

font-size: 1.5vw;

text-align: center;

padding-bottom: 2px;

margin-top: 0%;

margin-bottom: 0%;

border-bottom: 3px solid #667eea;

}

.font h5 {

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

font-size: 1vw;

text-align: left;

padding-left: 0px;

margin-bottom: 5px;

margin-top: 0%;

}

.font p{

color: greenyellow;

font-size: 0.63vw;

text-align: center;

line-height: 0.7vw;

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

padding: 6px;

border-radius: 8px;

margin: 4px 4px;

margin-top: 3%;

margin-bottom: 0%;

border-left: 4px solid #667eea;

}

.mac-section:hover {

background: white;

padding: 6px;

border-radius: 8px;

margin: 4px 4px;

margin-top: 3%;

margin-bottom: 0%;

border-left: 4px solid #667eea;

}

.mac-section.active {

background: white;

padding: 6px;

padding-left: 6px;

border-radius: 8px;

margin: 4px 4px;

margin-top: 3%;

margin-bottom: 0%;

border-left: 4px solid #667eea;

}

.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: #4a5568;

line-height: 1.2;

font-size: 0.9vw;

margin-bottom: 4px;

text-align: left;

}

.mac-section:hover p {

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

color: black;

font-size: 0,9vw;

line-height: 1.2;

text-align: left;

padding: 0px;

margin-bottom: 4px;

}

/* 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, #667eea 0%, purple 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.1vw;

text-align: center;

padding-top: 4%;

padding-bottom: 3%;

max-width: auto;

max-height: 100%;

margin-bottom: 0%;

border-bottom: 3px solid greenyellow;

}

.sidenav p {

color: white;

font-size: 0.9vw;

text-align: center;

padding-bottom: 3%;

line-height: 0.9;

margin-top: 0%;

border-bottom: 1px solid greenyellow;

}

.sidenav ul {

list-style: none;

padding: 4% 0%;

}

.sidenav li {

color: greenyellow;

font-size: 0.75vw;

padding: 12px 8px;

margin-bottom: 8px;

border-radius: 8px;

cursor: pointer;

transition: all 0.3s ease;

}

.sidenav li:hover {

background: #667eea;

color: white;

transform: translateX(5px);

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

}

#menuAside {

grid-area: left;

}

.left div {

grid-area: flex;

}

.nav-menu {

list-style: none;

}

.nav-item {

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

display: flex;

align-items: center;

grid-gap: 12px;

}

.nav-item:hover {

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

transform: translateX(8px);

}

.nav-item.super {

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

}

.nav-item.active {

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

}

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

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

#smsAside {

grid-area: right;

}

.right div {

grid-area: flex;

}

.sidesms, aside {

grid-area: space;

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

grid-row: 1fr !important;

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

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

padding: 10%;

border-radius: 12px;

max-width: auto;

max-height: 100%;

overflow-x: hidden;

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

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

}

.sidesms h2 {

color: white;

font-size: 1.1vw;

text-align: center;

padding-top: 4%;

padding-bottom: 3%;

max-width: auto;

max-height: 100%;

margin-top: 0%;

border-bottom: 3px solid greenyellow;

}

.sidesms p {

color: white;

font-size: 1vw;

text-align: center;

line-height: 0.9vw;

margin-top: 0%;

}

.sidesms ul {

list-style: none;

padding: 4% 0%;

}

.sidesms li {

color: yellow;

font-size: 0.75vw;

padding: 12px 8px;

margin-bottom: 8px;

border-radius: 8px;

cursor: pointer;

transition: all 0.3s ease;

}

.sidesms li:hover {

background: #667eea;

color: white;

transform: translateX(5px);

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

}

#menuAside {

grid-area: right;

}

.right div {

grid-area: flex;

}

.sms-menu {

list-style: none;

}

.sms-item {

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

display: flex;

align-items: center;

grid-gap: 12px;

}

.sms-item:hover {

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

transform: translateX(8px);

}

.sms-item.super {

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

}

.sms-item.active {

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

}

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

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

#pageFooter {

grid-area: down;

}

.down div {

grid-area: auto;

}

.center, footer {

grid-area: center;

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

grid-row: 5 / 6 !important;

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

color: white;

text-align: center;

padding: 0px 10px;

margin-left: -1px;

margin-right: -1px;

padding-top: 0.75%;

border-radius: 10px;

max-width: auto;

max-height: 100%;

margin-top: 0%;

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

}

.center, p {

font-size: 0.85vw;

line-height: 1vw;

}

.left, footer {

grid-area: left;

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

grid-row: 5 / 6 !important;

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

color: green;

text-align: center;

padding: 10px 10px;

margin-left: -1px;

margin-right: -1px;

border-radius: 10px;

max-width: auto;

max-height: 100%;

margin-top: 0%;

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

}

.left, p {

font-size: 0.75vw;

line-height: 0.9vw;

}

.right, footer {

grid-area: right;

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

grid-row: 5 / 6 !important;

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

color: blue;

text-align: center;

padding: 10px 10px;

margin-left: -1px;

margin-right: -1px;

border-radius: 10px;

max-width: auto;

max-height: 100%;

margin-top: 0%;

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

}

.right, p {

font-size: 0.75vw;

line-height: 0.9vw;

}

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

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

.menu{

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

max-width: auto;

max-height: 100%;

text-align: center;

}

.leftmenu {

float: left;

margin-top: 12%;

margin-left: 14%;

}

.leftmenu_1 {

float: left;

font-size: 0.5vw;

line-height: 2;

margin-top: 2.8%;

margin-left: 1%;

}

.rightmenu {

max-width: auto;

max-height: 100%;

float: right;

margin-top: 0%;

padding-bottom: 0px;

}

.menu-bar ul{

display: inline-flex;

list-style: none;

}

.menu-bar ul li{

width: 100px;

margin: 5px;

padding: 5px;

font-size: 15px;

}

.menu-bar ul li a{

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

color: white;

text-decoration: none;

}

.menu-bar ul li :hover{

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

padding: 2px 2px;

margin-bottom: 2px;

border-radius: 2px;

cursor: pointer;

transition: all 0.1s ease;

font-size: 15px;

color: white;

transform: translateX(1px);

}

.menu-bar ul li_id{

width: 100px;

margin: 5px;

padding: 5px;

font-size: 15px;

}

.menu-bar ul li_id a{

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

color: white;

text-decoration: none;

}

.menu-bar ul li_id :hover{

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

padding: 2px 2px;

margin-bottom: 2px;

border-radius: 2px;

cursor: pointer;

transition: all 0.1s ease;

font-size: 15px;

color: red;

transform: translateX(1px);

}

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

/* coding color script with micke */

.animate-charcter {

text-transform: uppercase;

background-image: linear-gradient(

225deg,

purple 10%,

blueviolet 30%,

deeppink 70%,

yellow 90%

);

background-size: auto auto;

background-clip: border-box;

background-size: 200% auto;

color: #fff;

background-clip: text;

color: transparent;

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

animation: textclip 3s linear infinite;

display: inline-block;

font-size: 1.38vw;

text-align: center;

}

@keyframes textclip {

to {

background-position: -200% center;

}

/* coding color script with micke */

/* coding gallery and text section with micke */

.firstsection{

background-color: none;

height: 0%;

margin-top: 1%;

margin-bottom: 0%;

}

.firsthalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

.secondsection{

background-color: none;

height: 0%;

margin-top: 3%;

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

text-align: center;

}

.thirdhalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

}

.fourthsection{

background-color: none;

height: 0%;

margin-top: 5%;

margin-bottom: 0%;

text-align: center;

}

.fourthhalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

}

.fifthsection{

background-color: none;

height: 0%;

margin-top: 5%;

margin-bottom: 0%;

text-align: center;

}

.fifthhalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

}

.sixsection{

background-color: none;

height: 0%;

margin-top: 5%;

margin-bottom: 0%;

text-align: center;

}

.sixhalf{

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

.btn_1 {

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

color: blue;

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

border-style: none;

font-size: 0.8vw;

font-weight: none;

text-transform: none;

line-height: 0.8;

max-width: 100%;

height: auto;

margin-right: 0px;

margin-bottom: 2px;

border: 3px solid white;

cursor: pointer;

padding: 3px 3px;

border-style: outset;

}

.btn_1:hover{

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

color: black;

padding: 3px 3px;

border: 3px solid white;

font-weight: bold;

text-transform: uppercase;

}

.btn_2 {

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

color: blue;

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

border-style: none;

font-size: 0.8vw;

font-weight: none;

text-transform: none;

line-height: 0.8;

max-width: 100%;

height: auto;

margin-left: 0px;

margin-bottom: 2px;

border: 3px solid white;

cursor: pointer;

padding: 3px 3px;

border-style: outset;

}

.btn_2:hover{

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

color: black;

padding: 3px 3px;

border: 3px solid white;

font-weight: bold;

text-transform: uppercase;

}

.btn_3 {

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

color: blue;

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

border-style: none;

font-size: 0.8vw;

font-weight: none;

text-transform: none;

line-height: 0.8;

max-width: 100%;

height: auto;

margin-left: 0px;

margin-bottom: 2px;

border: 3px solid white;

cursor: pointer;

padding: 3px 3px;

border-style: outset;

}

.btn_3:hover{

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

color: black;

padding: 3px 3px;

border: 3px solid white;

font-weight: bold;

text-transform: uppercase;

}

.btn_4 {

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

color: blue;

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

border-style: none;

font-size: 0.8vw;

font-weight: none;

text-transform: none;

line-height: 0.8;

max-width: 100%;

height: auto;

margin-right: 0px;

margin-bottom: 2px;

border: 3px solid white;

cursor: pointer;

padding: 3px 3px;

border-style: outset;

}

.btn_4:hover{

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

color: black;

padding: 3px 3px;

border: 3px solid white;

font-weight: bold;

text-transform: uppercase;

}

.btn_5 {

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

color: blue;

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

border-style: none;

font-size: 0.8vw;

font-weight: none;

text-transform: none;

line-height: 0.8;

max-width: auto;

height: 100%;

margin-top: 0px;

margin-bottom: 2px;

border: 3px solid white;

cursor: pointer;

padding: 3px 3px;

border-style: outset;

}

.btn_5:hover{

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

color: black;

padding: 3px 3px;

border: 3px solid white;

font-weight: bold;

text-transform: uppercase;

}

/* coding magic table with micke */

/* coding button to above java with micke */

p.button_1 {

background-color: none;

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

color: black;

padding: 1px, 1px;

text-align: center;

text-decoration: none;

margin-top: 0px;

display: inline-block;

font-size: 0.75vw;

position: relative;

border-style: none;

}

p.button_1:hover {

background-color: white;

}

p.button_2 {

background-color: none;

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

color: blue;

padding: 0px, 0px;

text-align: left;

text-decoration: none;

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

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

margin-top: 0px;

display: inline-block;

font-size: 0.75vw;

line-height: 1vw;

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

height: 32vw;

border-style: none;

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

}

p.button_2:hover {

background-color: white;

color: black;

}

/* coding button to above java with micke */

/* coding text with micke */

.text{

width: 100%;

margin-top: 0%;

text-transform: uppercase;

color: purple;

}

.text-medium{

font-family: 'piazzolla', serif;

color: blue;

font-size: 1vw;

font-weight: bold;

text-decoration: none;

text-transform: none;

}

/* coding text with micke */

/* coding JS images with micke */

img.small {

width: 9.7vw;

height: 6.25vw;

}

img.medium {

width: 18vw;

height: 18vw;

}

/* coding JS images with micke */

/* The Modal (background) */

.modal {

display: none; /* Hidden by default */

position: fixed; /* Stay in place */

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

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

left: 0;

top: 0;

width: 100%; /* Full width */

height: 100%; /* Full height */

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

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

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

color: black;

text-align: left;

}

/* Modal Content */

.modal-content {

background-color: #fefefe;

margin: auto;

padding: 15px;

border: 1px solid #888;

width: 31%;

height: scroll;

}

/* The Close Button */

.close {

color: red;

float: right;

font-size: 28px;

font-weight: bold;

}

.close:hover,

.close:focus {

color: #000;

text-decoration: none;

cursor: pointer;

}

/* coding table with micke */

table.one {

border-collapse: collapse;

width: 100%;

margin-top: 0%;

border-spacing: 2px 1px;

position: center;

text-align: center;

}

td {

background-color: none;

padding: 3px 2px;

border: 2px solid none;

position: center;

text-align: center;

}

table.two {

border-collapse: collapse;

width: auto;

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

}

th, td_2 {

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

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

padding: 0px;

height: auto;

width: auto;

font-size: 0px;

text-align: right;

}

table.three td {

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

background-color: none;

padding: 0.15vw 0.15vw;

padding-top: 0.15vw;

border: 1px solid white;

font-size: 0.8vw;

text-align: right;

}

table.four td {

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

background-color: none;

padding: 0.15vw 0.15vw;

padding-top: 0.25vw;

border: 1px solid white;

font-size: 0.75vw;

text-align: right;

}

/* coding table with micke */

.gallery {

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

--g: 0.2vw; /* control the gap */

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

display: grid;

grid-gap: var(--g);

width: calc(5*var(--s) + 4*var(--g));

aspect-ratio: 1;

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

}

.gallery > img {

width: 0;

height: 0;

min-height: 100%;

min-width: 100%;

object-fit: cover;

cursor: pointer;

filter: grayscale(80%);

transition: .35s linear;

}

.gallery img:hover{

filter: grayscale(0);

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

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

}

</style>

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

</div>

</div>

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

<li :hover> <a cursor: pointer; id="myBtn"><i class="fa fa-nasa;"><span>Queen</span></i></a> </li>

</ul>

</div>

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

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

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

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

<li_id> <a style="color: aqua;" href="../history.html"><i class="fa fa-images"><span>History</span></i></a> </li_id>

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

<tr>

<td_2>

<h1>Magic Square of Order 5<span>G</span></h1>

</td_2>

</tr>

</table>

</div>

</section>

<tr>

<td>

<p style="color: white; font-size: 0.7vw; text-align: center; padding-bottom: 1px">Squaremagie Space 1</p>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></button>

<p>Magic Square Order 5.</p>

</div>

</section>

<p style="color: white; font-size: 0.7vw; text-align: center; padding-bottom: 1px">Squaremagie Space 2</p>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></button>

<p>Magic Square Order 5.</p>

</div>

</section>

<p style="color: white; font-size: 0.7vw; text-align: center; padding-bottom: 1px">Squaremagie Space 3</p>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></button>

<p>Magic Square Order 5.</p>

</div>

</section>

<p style="color: white; font-size: 0.7vw; text-align: center; padding-bottom: 1px">Squaremagie Space 4</p>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></button>

<p>Magic Square Order 5.</p>

</div>

</section>

</td>

<td>

</div>

</div>

</section>

<p style="color: white; font-size: 0.75vw; text-align: center; padding-top: 1px">By @ Mikael Hermansson, 2026.</p>

</td>

<td>

<p style="color: white; font-size: 0.7vw; text-align: center; padding-bottom: 1px">Squaremagie Space 5</p>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></button>

<p style="color: blue">Magic Square Order 5.</p>

</div>

</section>

<p style="color: white; font-size: 0.7vw; text-align: center; padding-bottom: 1px">Squaremagie Space 6</p>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></button>

<p style="color: blue">Magic Square Order 5.</p>

</div>

</section>

<p style="color: white; font-size: 0.7vw; text-align: center; padding-bottom: 1px">Squaremagie Space 7</p>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></button>

<p style="color: blue">Magic Square Order 5.</p>

</div>

</section>

<p style="color: white; font-size: 0.7vw; text-align: center; padding-bottom: 1px">Squaremagie Space 8</p>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></button>

<p style="color: blue">Magic Square Order 5.</p>

</div>

</section>

</td>

</tr>

</table>

</div>

</article>

<h2>Photocollection 4</h2>

<span>Squaremagie sportpage 1</span>

</li></a>

<span>Squaremagie sportpage 2</span>

</li></a>

<span>Squaremagie sportpage 3</span>

</li></a>

<span>Squaremagie sportpage 4</span>

</li></a>

<span>Squaremagie sportpage 5</span>

</li></a>

<span>Squaremagie sportpage 6</span>

</li></a>

<span>Squaremagie sportpage 7</span>

</li></a>

<span>Squaremagie | Gotland 1</span>

</li></a>

<span>Squaremagie | Gotland 2</span>

</li></a>

</ul>

<p style="margin-top: 4%">Magic Square of Order 5</p>

<span>Magic Square of 4-5 pdf</span>

</li></a>

<span>Magic Square of 4-5 xps</span>

</li></a>

<span>Magic Square of 4-5 xlsx</span>

</li></a>

<span>Link | Devils Square 5G</span>

</li></a>

<span>Bimagic square n4-8 pdf</span>

</li></a>

<span>Magic Square n4-7 Html</span>

</li></a>

<span>Excel Magic Square n4-7</span>

</li></a>

</ul>

</div>

</aside>

<h2 class="text-medium" id="program">Queen Camilla</h2>

Her Majesty The <B>Queen Camilla</B> (formerly HRH The Duchess of Cornwall) supports her husband, formerly The Prince of Wales, now His Majesty The King, in carrying out his work and duties. She also undertakes public engagements on behalf of the charities that she supports.<br /><br />

The Queen was born Camilla Rosemary Shand on 17th July 1947 at King’s College Hospital London, the daughter of Major Bruce Middleton Hope Shand and the Hon Rosalind Maud Shand (nee Cubitt).<br /><br />

Major Shand and the Hon Rosalind Cubitt, the daughter of 3rd Baron Ashcombe, married on 2nd January 1946 at St Paul’s, Knightsbridge.<br /><br />

Her Majesty has a sister, Annabel Elliot, and a brother, Mark Shand. Mark Shand, a conservationist, died on 23rd April 2014.<br /><br />

The Shand family lived in East Sussex from 1951 onwards. Major Shand, MC and Bar, was Vice Lord-Lieutenant of East Sussex and Master of the South Downs Hounds for 19 years. He died aged 89 on 11th June 2006 at his home in Dorset.<br /><br />

Mrs Rosalind Shand was 72 when she died in 1994 as a result of osteoporosis. The Queen's grandmother had died from the same condition eight years earlier. The Queen has served as President of the Royal Osteoporosis Society since 2001, having supported the charity since 1994.<br /><br />

The Queen was first educated at Dumbrells School, in Sussex, and then at Queen’s Gate School in South Kensington. She also attended Mon Fertile school in Switzerland and studied at the Institut Britannique in Paris.<br /><br />

On 9th April 2005, The Prince of Wales and Ms. Camilla Parker-Bowles were married in a civil ceremony at the Guildhall, Windsor. They were joined by around 800 guests at a Service of Prayer and Dedication at St George’s Chapel, Windsor Castle. The Service was followed by a reception at Windsor Castle hosted by Her Majesty Queen Elizabeth II.<br /><br />

The Queen was previously married to Brigadier Andrew Parker Bowles and the marriage was dissolved in 1995. The couple had two children, Thomas Henry and Laura Rose, born in 1974 and 1978 respectively.<br /><br />

Since her marriage to The King in 2005, The Queen has become Patron or President of over 100 charities. Her Majesty’s charity work is varied but several themes prevail: health and well-being, promoting literacy, the arts, animal welfare and supporting survivors of rape, sexual assault and domestic violence.<br /><br />

On 9th April 2012, Buckingham Palace announced that Her Majesty Queen Elizabeth II had appointed The Duchess of Cornwall, as she was formerly known, to be a Dame Grand Cross of the Royal Victorian Order (GCVO).<br /><br />

In 2016, The late Queen appointed Her (then) Royal Highness as a member of the Privy Council and more recently, in 2022, a Royal Lady of the Order of the Garter.<br /><br />

Since the change in reign, His Majesty The King has conferred a number of honours to The Queen, including Lady of the Thistle in 2023, and Grand Master and First and Principal Dame Grand Cross of the Most Excellent Order of the British Empire in 2024.<br /><br />

Her Majesty has five grandchildren and five step-grandchildren.<br /><br />

https://www.royal.uk/the-queen<br /><br />

<B>Buckingham Palace</B>, official town residence of the British monarch since 1837, located near Saint James's Park, London. Built by John Sheffield, 1st duke of Buckingham and Normandy, in 1703, the palace was purchased for the royal family in 1761 by George III, although St. James's Palace continued to be the official residence until the accession of Queen Victoria. The neoclassical structure was remodeled by John Nash in 1825. In 1856 a ballroom was added, and in 1913 a new east front was built. Buckingham Palace has about 600 rooms and 20 hectares (50 acres) of gardens. It is noted for its fine collection of paintings.<br /><br />

Microsoft® Encarta® 2009 [DVD]. Redmond, WA: Microsoft Corporation, 2008.<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>

</centre>

</body>

</html>