<!DOCTYPE html>

<head>

<title>Bimagic Squares of Order 8 by Gaston Tarry D</title>

</head>

margin: 0;

padding: 0;

box-sizing: border-box;

}

body{

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

background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("../../images/bi.jpg");

background-repeat: no-repeat;

background-size: 100% 100%;

display: autoflex;

justify-content: center;

align-items: center;

min-height: 100vh;

margin: 0;

}

/* The Modal (background) */

.modal {

display: none; /* Hidden by default */

position: fixed; /* Stay in place */

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

padding-top: 100px; /* 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: 562px;

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 menu-bar in header with micke */

.menu{

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

width: 100%;

height: 100px;

text-align: center;

}

.leftmenu {

width: 23%;

float: left;

margin-top: 3%;

}

.rightmenu {

width: 57%;

float: right;

margin-top: 2%;

}

.leftmenu h4{

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

padding-left: 70px;

font-weight: bold;

color: greenyellow;

font-size: 22px;

}

.menu-bar ul{

display: inline-flex;

list-style: none;

}

.menu-bar ul li{

width: 100px;

margin: 5px;

padding: 5px;

font-size: 16px;

}

.menu-bar ul li a{

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

color: white;

text-decoration: none;

}

.menu-bar ul li :hover{

color: red;

border-radius: 0px;

}

.menu-bar .fa{

margin-right: 0px;

margin-top: 0px;

}

.sub-menu-1{

display: none;

}

.menu-bar ul li:hover .sub-menu-1{

display: block;

position: absolute;

background: rgba(0,0,0,0.25);

margin-top: 1px;

margin-left: 0px;

}

.menu-bar ul li:hover .sub-menu-1 ul{

display: block;

margin-top: 5px;

}

.menu-bar ul li:hover .sub-menu-1 ul li{

width: 140px;

height: 30px;

padding: 8px;

border-bottom: 1px dotted #fff;

background: transparent;

border-radius: 0;

text-align: left;

margin-top: 0px;

}

.menu-bar ul li:hover .sub-menu-1 ul li:last-child{

border-bottom: none

margin-right: 0px;

margin-top: 2px;

}

.menu-bar ul li:hover .sub-menu-1 ul li a:hover{

color: red;

}

.fa-angle-right{

float: right;

}

.sub-menu-2{

display: none;

}

.hover-me:hover .sub-menu-2{

position: absolute;

display: block;

margin-top: -13px;

margin-left: 132px;

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

}

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

/* coding menu dropdown with micke */

/* Dropdown Content (Hidden by Default) */

.dropdown-content {

display: none;

position: absolute;

background-color: #f9f9f9;

box-shadow: 0px 8px 10px 0px rgba(0,0,0,0.2);

padding: 5px 10px;

text-align: left;

font-size: 14px;

z-index: 1;

}

/* Links inside the dropdown */

.dropdown-content a {

color: black;

padding: 10px 5px;

text-decoration: none;

display: block;

}

/* Change color of dropdown links on hover */

.dropdown-content a:hover {background-color: #eee}

.dropdown-content a:hover {color: red}

/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-content {

display: block;

}

/* Change the background color of the dropdown button when the dropdown content is shown */

.dropdown:hover .dropbtn {

background-color: greenyellow;

color: black;

font-weight: none;

}

/* coding menu dropdown with micke */

/* coding layout with micke */

body {

display: grid;

grid-template-areas:

"header header header"

"nav article ads"

"footer footer footer";

grid-template-rows: 5% 1fr 5%;

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

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

height: 100vh;

margin: 0;

}

/* Stack the layout on small devices/viewports. */

@media all and (max-width: 575px) {

body {

grid-template-areas:

"header"

"article"

"ads"

"nav"

"footer";

grid-template-rows: 70px 1fr 70px 1fr 70px;

grid-template-columns: 1fr;

}

#pageHeader {

grid-area: header;

}

#pageFooter {

grid-area: footer;

}

#mainArticle {

grid-area: article;

}

#mainNav {

grid-area: nav;

}

#siteAds {

grid-area: ads;

}

header, div {

background: none;

font-size: 17px;

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

color: white;

padding: 15px 0px;

text-align: center;

}

article, div {

padding: 0px 0px;

background: none;

font-size: 16px;

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

color: white;

text-align: center;

margin-top: -34px;

}

nav, div {

padding: 0px 0px;

background: none;

font-size: 16px;

text-align: center;

margin-top: 0px;

}

ads, div {

padding: 0px 0px;

background: none;

font-size: 0px;

color: black;

text-align: center;

margin-top: 0px;

}

footer div {

padding: 0px 0px;

background: none;

font-size: 15px;

margin-top: 0px;

}

/* coding layout with micke */

/* coding gallery and text section with micke */

.firstsection{

background-color: none;

height: 0%;

margin-top: 0%;

}

.firsthalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

.secondsection{

background-color: none;

height: 0%;

margin-top: 2px;

}

.secondhalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

.thirdsection{

background-color: none;

height: 0%;

margin-top: 0%;

}

.thirdhalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

.fourthsection{

background-color: none;

height: 0%;

margin-top: 0%;

}

.fourthhalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

font-weight: none;

text-transform: none;

text-align: right;

}

.fifthsection{

background-color: none;

height: 0%;

margin-top: 0%;

}

.fifthhalf{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

font-weight: none;

text-transform: none;

text-align: right;

}

.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-color: rgba(255,255,255, 0.25);

color: white;

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

border: none;

font-size: 14px;

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

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

line-height: 14px;

width: auto;

margin: 0px 3px;

margin-top: 12px;

margin-bottom: 0px;

border: 3px solid white;

cursor: pointer;

padding: 3px 3px;

border-style: outset;

}

.btn_1:hover{

background-color: white;

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

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

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

line-height: 16px;

width: auto;

padding: 0px 0px;

margin: 0px 3px;

margin-bottom: 0px;

margin-top: 8px;

border: 3px solid white;

cursor: pointer;

padding: 2px 2px;

border-style: outset;

}

.btn_2:hover{

background-color: white;

color: black;

font-weight: bold;

text-transform: uppercase;

}

p.button_1 {

background-color: lightgoldenrodyellow;

color: blue;

text-align: center;

font-weight: none;

text-transform: none;

text-decoration: none;

display: inline-block;

font-size: 15px;

margin-top: 3%;

margin-bottom: 0px;

padding: 2px 5px;

border-style: inset;

}

p.button_1:hover {

background-color: purple;

color: white;

}

p.button_2 {

background-color: red;

color: white;

padding: 1px, 1px;

text-align: center;

text-decoration: none;

margin-top: 18px;

display: inline-block;

font-size: 14px;

border-style: outset;

}

p.button_2:hover {

background-color: white;

color: red;

}

p.button_3 {

background-color: none;

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

color: blue;

padding: 1px, 1px;

text-align: left;

text-decoration: none;

font-weight: none;

text-transform: none;

margin-top: 0%;

display: inline-block;

font-size: 15px;

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

height: 630px;

border-style: inset;

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

}

p.button_3:hover {

background-color: white;

color: black;

}

/* coding text with micke */

.text{

width: 100%;

margin-top: 0%;

text-transform: uppercase;

color: red;

}

.text h1{

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

font-weight: 700px;

font-size: 36px;

margin-top: 2%;

text-align: center;

}

.text h2{

font-size: 18px;

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

font-weight: 500px;

text-align: left;

}

.text h3{

font-size: 13px;

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

text-align: center;

}

.text h4{

font-size: 12px;

font-family: 'Helvetica';

text-align: center;

margin-top: 0%;

}

.text h5{

font-size: 13px;

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

font-weight: none;

text-transform: none;

}

text-align: center;

}

.text-medium{

font-family: 'piazzolla', serif;

font-weight: bold;

color: green;

font-size: 20px;

}

.text-small{

font-size: 18px;

text-align: left;

}

.btn-sm{

padding: 6px 10px;

vertical-align: middle;

}

.center{

text-align: left;

}

img.small {

width: 191px;

height: 225px;

}

/* coding text with micke */

/* coding menu bar JS with micke+ */

.dropbtn {

background-color: lightblue;

color: white;

padding: 6px 10px;

font-size: 15px;

cursor: pointer;

text-align: center;

border: 3px solid white;

border-style: outset;

margin-top: 0%;

}

.dropbtn:hover, .dropbtn:focus {

background-color: yellowgreen;

color: black;

padding: 6px 10px;

border: 3px solid white;

border-style: inset;

}

.dropdown {

position: relative;

display: inline-block;

}

.dropdown-content {

display: none;

position: absolute;

background-color: #f1f1f1;

min-width: 152px;

font-size: 14px;

overflow: auto;

text-align: left;

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

z-index: 1;

}

.dropdown-content a {

color: blue;

padding: 5px 5px;

text-decoration: none;

display: block;

}

.dropdown a:hover {

background-color: #ddd;

color: red;

}

.show {display: block;}

/* coding menu bar JS with micke+ */

/* coding table with micke */

table.one_1 {

border-spacing: 1px 1px;

position: center;

}

table.one_2 {

border-spacing: 2px 1px;

position: center;

}

td {

background-color: none;

padding: 3px 3px;

border: 1px solid white;

}

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

}

/* coding table with micke */

/* coding footer with micke */

:root {

box-sizing: border-box;

margin: 0px;

padding: 0px;

font-family: sans-serif;

}

body {

height: 100vh;

overflow: hidden;

}

.footer {

position: absolute;

bottom: 0;

left: 0;

right: 0;

padding: 1rem;

background: none;

color: lightcyan;

font-weight: 500;

display: flex;

justify-content: center;

align-items: center;

margin-top: 0;

gap: 0.2rem;

}

/* coding footer with micke */

/* coding JS footer with micke */

let year = document.querySelector("#year");

$(document).ready(function () {

year.innerText = new Date().getFullYear();

});

/* coding JS footer with micke */

</style>

<body>

<tr>

<td_2>

<button onclick="myFunction()" class="dropbtn">Gaston Tarry index</button>

<a href="bimagicsquare_n8a.html">Bimagic Squares 1</a>

<a href="bimagicsquare_n8b.html">Bimagic Squares 2</a>

<a href="bimagicsquare_n8c.html">Bimagic Squares 3</a>

<a style="color:purple;" href="bimagicsquare_n8d.html">Bimagic Squares 4</a>

</div>

</td_2>

</tr>

</table>

</div>

</section>

</div>

<ul>

<li> <a style="color:aqua;" href="../formula.html"><i class="fa fa-formula">Formula</i></a>

<ul>

<li class="hover-me"><a href="#"><i class="fa fa-angle-right">Bimagic Prime</i></a>

<ul>

<li><a href="../BimagicPrime/primemagic_n4.html"><i>Prime Magic n4</i></a></li>

<li><a href="../BimagicPrime/primebimagic_n9.html"><i>PrimeBimagic 9</i></a></li>

<li><a href="../BimagicPrime/primebimagic_n11.html"><i>PrimeBimagic 11</i></a></li>

<li><a href="../BimagicPrime/primebimagic_n16.html"><i>PrimeBimagic 16</i></a></li>

<li><a href="../BimagicPrime/primebimagic_n17a.html"><i>PrimeBimagic 17</i></a></li>

<li><a href="../BimagicPrime/primebimagic_n17b.html"><i>PrimeBimagic 17</i></a></li>

<li><a href="../BimagicPrime/primebimagic_n18.html"><i>PrimeBimagic 18</i></a></li>

<li><a href="../BimagicPrime/primebimagic_n25a.html"><i>PrimeBimagic 25</i></a></li>

<li><a href="../BimagicPrime/primebimagic_n25b.html"><i>PrimeBimagic 25</i></a></li>

</ul>

</div>

</li>

<li class="hover-me"><a href="#"><i class="fa fa-angle-right">G. Pfeffermann</i></a>

<ul>

<li><a href="../GPfeffermann/bimagicpuzzle_n8.html"><i>Bimagic puzzle 1</i></a></li>

<li><a href="../GPfeffermann/bimagicpuzzle_n9.html"><i>Bimagic puzzle 2</i></a></li>

</ul>

</div>

</li>

<li class="hover-me"><a href="#"><i class="fa fa-angle-right">Gaston Tarry</i></a>

<ul>

<li><a href="bimagicsquare_n8a.html"><i>Bimagic Sq1. n8</i></a></li>

<li><a href="bimagicsquare_n8b.html"><i>Bimagic Sq2. n8</i></a></li>

<li><a href="bimagicsquare_n8c.html"><i>Bimagic Sq3. n8</i></a></li>

<li><a href="bimagicsquare_n8d.html"><i>Bimagic Sq4. n8</i></a></li>

</ul>

</div>

</li>

<li class="hover-me"><a href="#"><i class="fa fa-angle-right">André Gérardin</i></a>

<ul>

<li><a href="../AGerardin/bimagicsquare_n8a.html"><i>Bimagic Sq1. n8</i></a></li>

<li><a href="../AGerardin/bimagicsquare_n8b.html"><i>Bimagic Sq2. n8</i></a></li>

<li><a href="../AGerardin/bimagicsquare_n8c.html"><i>Bimagic Sq3. n8</i></a></li>

<li><a href="../AGerardin/bimagicsquare_n8d.html"><i>Bimagic Sq4. n8</i></a></li>

</ul>

</div>

</li>

<li class="hover-me"><a href="#"><i class="fa fa-angle-right">M. Hermansson</i></a>

<ul>

<li><a href="../MHermansson/magicsquare_n4.html"><i>Square Order 4</i></a></li>

<li><a href="../MHermansson/magicsquare_n5.html"><i>Square Order 5</i></a></li>

<li><a href="../MHermansson/magicsquare_n6.html"><i>Square Order 6</i></a></li>

<li><a href="../MHermansson/magicsquare_n7.html"><i>Square Order 7</i></a></li>

<li><a href="../MHermansson/bimagicsquare_n9a.html"><i>Latin Square 9A</i></a></li>

<li><a href="../MHermansson/bimagicsquare_n9b.html"><i>Latin Square 9B</i></a></li>

<li><a href="../MHermansson/bimagicsquare_n9c.html"><i>Latin Square 9C</i></a></li>

</ul>

</div>

</li>

</ul>

</div>

</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> <a href="../../Links/links.html"><i class="fa fa-links">Links</i></a> </li>

<li> <a href="../../Contact/contact.html"><i class="fa fa-mail">Contact</i></a> </li>

</ul>

</div>

</div></div>

</header>

<tr>

<td_2>

<h4 style="color:blueviolet">DESIGN * DEVELOPMENT * HIGHTECH</h4>

</td_2>

</tr>

<tr>

<td_2>

<h1>Bimagic Square of Order 8</h1>

</td_2>

</tr>

<tr>

<td_2>

<h3><p class="button_1"> Gaston Tarry 13-16. Published in French magazine: <cite>L'Echo de Paris</cite>, 1903. </p></h3>

</td_2>

</tr>

</table>

</div>

</section>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></button>

</td_2></th>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></button>

</td_2></th>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></button>

</td_2></th>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></button>

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

</table>

</div>

</section>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

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

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

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

</table>

</div>

</section>

<tr>

<td_2>

<p class="button_2"><button id="myBtn">Pop up Window</button></p>

<h2 class="text-small" id="program">Biography of Gaston Tarry:</h2>

<class="small" alt="Tarry" />

<B>Gaston Tarry</B> (Villefranche de Rouergue 1843 - Le Havre 1913) was born in the Aveyron, a region in the center of France. He studied mathematics at the Lycée Saint-Louis in Paris, and spent his working life in Algeria in the French Financial Administration (Contributions Diverses de l’Administration des Finances). France had invaded Algeria in 1830 and French rule was established by 1847. Tarry was part of the French administration in Algeria, retiring in 1902. Although he was an amateur mathematician, Tarry had an amazing ability to analyse combinatorial problems. His passion for magic squares started when he was in his fifties and meet his friend of Alger, Brutus Portier. Together they investigated mathematically problems and, you guessed it, he discovered also the first 16th-order panmagic square. That will say the first bimagic square of order 16. This started his passion for magic squares. Over time, he wrote a large number of articles in various scientific magazines of the period, where the bimagic squares of order 8 where published when he was back in Paris, year 1903. He was searching after algorithm to solve the squares and the first known trimagic square of order 128 is also credited to Gaston Tarry and it was presented in a French magazine 1905. He called his method of magic square construction the "cabalistic condensator" and wrote:<br /><cite>This condensator is a real magic machine charged at the limit. In discharging it, we will obtain magical effects. The discharge can only stay in a good conductive environment, a magic field.</cite><br /><br />

Tarry also solved Euler's 36 Officer Problem, proving that two orthogonal Latin squares of order 6 does not exist. The problem as stated by Euler is as follows: <i>How can a delegation of six regiments, each of which sends a colonel, a lieutenant-colonel, a major, a captain, a lieutenant, and a sub-lieutenant be arranged in a regular 6 × 6 array such that no row or column duplicates a rank or a regiment?</i> He showed it in two articles in French magazine that such an arrangement is impossible (4k+2).<br /><br />

A panmagic square (pandiagonal magic, also called diabolic) is a square which is magic for all its lines, all its columns, and all its full or broken diagonals (not only the two main diagonals).</p>

</div>

</td_2>

</tr>

</table>

</div>

</section>

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

</article>

/* When the user clicks on the button,

toggle between hiding and showing the dropdown content */

function myFunction() {

document.getElementById("myDropdown").classList.toggle("show");

}

// Close the dropdown if the user clicks outside of it

window.onclick = function(event) {

if (!event.target.matches('.dropbtn')) {

var dropdowns = document.getElementsByClassName("dropdown-content");

var i;

for (i = 0; i < dropdowns.length; i++) {

var openDropdown = dropdowns[i];

if (openDropdown.classList.contains('show')) {

openDropdown.classList.remove('show');

}

</script>

</footer>

</body>

</html>