body {
  margin: 0;
  padding: 0;
  background-position: center;
  background: #aaa;
  font-family: "PT Sans", sans-serif;
  font-size: small;
  font-weight: normal;
  line-height: 1.1rem;
  color: white;
  overflow-x: hidden;
}


section#main {
  min-height: 100vh;
  margin: 0px auto;
  background: linear-gradient(90deg, #3877ff 20px, #333 20px, #555 70px);
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 500px) {
  section#main {
    background: #555;
  }
}

section#main-tiles {
  min-height: 100vh;
  margin: 0px auto;
  background: linear-gradient(90deg, #3877ff 20px, #333 20px, #555 70px);
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 500px) {
  section#main-tiles {
    background: #555;
  }
}


section#header-home {
  margin: 0px 0px 0px 0px;
  padding: 10px 0px 0px 0px;
  background: linear-gradient(180deg, #222, transparent);
  text-align: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

section#header-home a {
  margin-left: 20px;
  animation: header-home-animate;
  animation-duration: 1.0s;
  animation-timing-function: ease-out;
  transition-duration: 300ms;
}
@media screen and (max-width: 500px) {
  section#header-home a {
    margin-left: 0px;
  }
}
@keyframes header-home-animate {
  0%   {transform: perspective(1000px) translate3d(0px, -75px, 0px) rotateX(75deg) scaleX(0.5);}
  100% {transform: perspective(1000px) translate3d(0px,   0px, 0px) rotateX( 0deg) scaleX(1.0);}
}

section#header-home a:hover {
  transform: scale(1.05);
}

section#header-home img {
  width: 100%;
}


section#header {
  margin: 0px 0px 0px 0px;
  padding: 10px 0px 0px 0px;
  background: linear-gradient(180deg, #222, transparent);
  text-align: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
section#header a {
  transition-duration: 300ms;
  margin-left: 20px;
}
@media screen and (max-width: 500px) {
  section#header a {
    margin-left: 0px;
  }
}
section#header a:hover {
  transform: scale(1.05);
}
section#header img {
  width: 100%;
}


section#picto {
  margin-top: -67px;
  width: 100px;
  z-index: 10;
  pointer-events: none;
}
@media screen and (max-width: 700px) {
  section#picto {
    margin-top: -33px;
    width: 70px;
  }
}


section#picto-animate-home {
  margin-top: -67px;
  width: 100px;
  z-index: 10;
  animation-name: picto-animate-home;
  animation-duration: 500ms;
  pointer-events: none;
}
@media screen and (max-width: 700px) {
  section#picto-animate-home {
    margin-top: -33px;
    width: 70px;
  }
}
@keyframes picto-animate-home {
  0%   {transform: scale(0.0); }
  100% {transform: scale(1.0);}
}


section#picto-animate-other{
  margin-top: -67px;
  width: 100px;
  z-index: 10;
  animation-name: picto-animate-other;
  animation-duration: 3s;
  animation-timing-function: cubic-bezier(.17,.67,.61,3);
  animation-iteration-count: infinite;
  pointer-events: none;
}
@media screen and (max-width: 700px) {
  section#picto-animate-other {
    margin-top: -33px;
    width: 70px;
  }
}
@keyframes picto-animate-other {
  0%   {transform: scale(1.0); }
  70%  {transform: scale(1.0);}
  80%  {transform: scale(1.3);}
  100% {transform: scale(1.0);}
}

/********************************************/

nav#menu {
  min-width: 580px;
  min-height: 32px;
  align-self: center;
  margin: -25px 0px 0px 20px;
  padding: 0px 0px 0px 0px;
  background: linear-gradient(180deg, #081033 10%, #122a5f);
  border-radius: 5px;
  float: left;
  flex-direction: row;
  box-shadow: 0px 15px 20px 5px #0002;
}
@media screen and (max-width: 580px) {
  nav#menu {
    min-width: auto;
    margin: -19px 0px 0px 0px;
    padding: 0px;
  }
}

nav#menu ul {
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  flex-wrap: wrap;
}

nav#menu li {
  list-style-type: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  transition-property: background-color;
  transition-duration: 300ms;
}

nav#menu li#bricks:hover {
  background-color: #999;
}

nav#menu li#floatbutton:hover {
  background-color: #999;
}

nav#menu li#sajex {
  width: 30px;
  background-color: transparent;
  cursor: default;
}
@media screen and (max-width: 500px) {
  nav#menu li#sajex {
    width: 2px;
    margin-left: -15px;
    margin-right: 10px;
  }
}

nav#menu li#push {
  flex-grow: 1;
  background-color: transparent;
  cursor: default;
}

nav#menu li#sel {
  background-color: #3877ff;
}

nav#menu li#sel:hover {
  background-color: #0046dc;
}

nav#menu li:hover {
  background-color: #0046dc;
}

nav#menu a {
  padding: 11px 14px 9px 14px;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  display: flex;
  flex-direction: row;
}

nav#menu img {
  height: 16px;
}

nav#menu li#bricks a img {
  margin: -5px 0px;
  height: 24px;
}

nav#menu li#floatbutton a img {
  margin: -5px 0px;
  height: 24px;
}

/********************************************/

nav#submenu {
  position: sticky;
  min-height: 35px;
  top: 0px;
  z-index: 9;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  align-self: center;
  margin: 10px 0px 40px 20px;
  padding: 5px 10px 3px 10px;
  background: linear-gradient(to top, #2857bb 60%, #123fa0);
  border: solid 5px #122a5f;
  float: left;
  box-shadow: 0px 10px 10px 0px #0002;
  transition-property: all;
  transition-duration: 600ms;
}
@media screen and (max-width: 500px) {
  nav#submenu {
    margin: 8px 0px 20px 0px;
  }
}

nav#submenu ul {
  margin: 0px;
  padding: 0px;
}

nav#submenu li {
  display: flex;
  float: left;
  list-style-type: none;
  margin: 0px;
  transition-property: background-color;
  transition-duration: 300ms;
}

nav#submenu a {
  padding: 10px;
  color: #fff;
  text-decoration: none;
}

nav#submenu li#sel a {
  background-color: #222;
}

nav#submenu li:hover a {
  background-color: #3877ff;
}

nav#submenu li a img {
  width: 18px
}

/********************************************/


p {
  margin: 0px;
}

section#subtitle {
  margin-left: 20px;
  text-align: center;
  font-size: x-large;
  font-weight: bold;
  line-height: normal;
  color: #ddd;
  text-shadow: 0px 2px 12px #000;
}
@media screen and (max-width: 500px) {
  section#subtitle {
    margin-left: 0px;
  }
}

section#subtitle-left {
  margin-left: 10px;
  padding-left: 40px;
  font-size: x-large;
  font-weight: bold;
  line-height: normal;
  color: #b7ceff;
}


section#page {
  margin-left: 20px;
  transform-origin: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (max-width: 500px) {
  section#page {
    margin-left: 0px;
  }
}


section#contact-image {
  margin: 10px 0px;
  text-align: center;
  font-size: x-large;
  font-weight: bold;
  line-height: normal;
  color: #eee;
}

section#contact-image img {
  width: 100%;
  max-width: 400px;
}


section#bilingual-title {
  max-width: 840px;
  width: 100%;
  margin: 30px 0px 0px 0px;
  display: flex;
  flex-grow: 1;
  align-self: center;
  font-size: x-large;
  font-weight: bold;
  line-height: normal;
}

section#bilingual-title p:nth-child(odd) {
  margin-left: 10px;
  flex-grow: 1;
  flex-basis: 0;
}

section#bilingual-title p:nth-child(even) {
  margin-right: 10px;
  flex-grow: 1;
  flex-basis: 0;
  font-style: italic;
  text-align: right;
}

section#bilingual-title a {
  color: #3877ff;
  text-decoration: none;
  transition-duration: 300ms;
}

section#bilingual-title a:hover {
  text-decoration: underline;
}


section#samples {
  margin-left: 20px;
  align-self: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
@media screen and (max-width: 500px) {
  section#samples {
    margin-left: 0px;
  }
}

section#samples a {
  display: flex;
  justify-content: center;
}

section#samples a img:hover {
  background: #3877ff;
  transform: scale(1.05);
}

section#samples img {
  max-width: calc(100% - 20px);
  object-fit: contain;
  margin: 10px;
  text-align: center;
  padding: 4px;
  box-shadow: 0px 10px 15px #333;
  background: linear-gradient(180deg, transparent, #333 20%);
  transition-property: background-color, transform;
  transition-duration: 300ms;
}


section#samples-blupi {
  margin: 10px;
  text-align: center;
}

section#samples-blupi img {
  max-width: calc(100% - 20px);
  object-fit: contain;
  margin: 10px;
  text-align: center;
  padding: 4px;
  box-shadow: 0px 10px 15px #333;
  background: linear-gradient(180deg, transparent, #333 20%);
  transition-property: background-color, transform;
  transition-duration: 300ms;
}

section#samples-blupi a img:hover {
  background: #ffd500;
  transform: scale(1.05);
}

section#samples-bugs-defense {
  margin: 10px;
  text-align: center;
}

section#samples-bugs-defense img {
  max-width: calc(100% - 20px);
  object-fit: contain;
  margin: 10px;
  text-align: center;
  padding: 4px;
  transition-property: background-color, transform;
  transition-duration: 300ms;
}

section#samples-bugs-defense a img:hover {
  background-color: #00ff00;
  transform: scale(1.05);
}


section#body {
  max-width: 820px;
  width: calc(100% - 20px);
  margin: 10px;
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  gap: 30px;
  align-self: center;
}

section#body li {
  list-style-type: none;
}

section#body a {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  background-color: #3877ff;
  border-radius: 5px;
  padding: 2px 5px;
  transition-property: color;
  transition-duration: 300ms;
}

section#body a:hover {
  background-color: #222;
}

section#body p {
  flex-grow: 1;
  flex-basis: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

section#body p:nth-child(even) {
  font-style: italic;
  text-align: right;
}

p#blupi a:hover {
  color: #ffd500;
}

p#bugs-defense a {
  color: #00ff00;
}

p#bugs-defense a:hover {
  color: #00ff00;
  background-color: #222222;
  border-radius: 6px;
  margin: -2px -5px;
  padding: 2px 5px;
  transition-property: all;
  transition-duration: 300ms;
}

p#game a:hover {
  color: #00ff00;
}


section#tiles {
  width: calc(100% - 20px);
  flex-grow: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-self: center;
  margin: 30px 0px 30px 20px;
  justify-content: center;
  align-content: flex-start;
}
@media screen and (max-width: 500px) {
  section#tiles {
    margin: 30px 0px 30px 0px;
  }
}

section#tiles a {
  color: #bbb;
  text-decoration: none;
  display: flex;
  flex-direction: row;
  gap: 30px;
  align-items: center;
  transition-property: color;
  transition-duration: 300ms;
}

section#tiles a:hover {
  color: #fff;
}

section#tile {
  padding: 15px;
  background-color: #2a2a2a;
  border-color: transparent;
  border-style: solid;
  border-width: 5px;
  border-radius: 5px;
  box-sizing: border-box;
  position: relative;
  width: 402px;
  align-content: center;
  transition-property: background-color, border-color;
  transition-duration: 300ms;
}

section#tile:hover {
  background-color: #222;
  border-color: #3877ff;
}

section#push {
  flex-grow: 1;
}

/********************************************/

footer {
  height: 70px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding: 0px 30px 0px 50px;
  background-color: #222222;
  justify-self: center;
}

@media screen and (max-width: 800px) {
  footer {
    padding: 0px 10px 0px 15px;
  }
}

footer p {
  flex-grow: 1;
  flex-basis: 0;
  color: #888;
}

footer ul {
  margin: 0px;
  padding: 0px;
}

footer li {
  height: 14px;
  float: left;
  list-style-type: none;
  margin: 0px;
  padding: 10px 15px 10px 15px;
  border-radius: 20px;
  display: flex;
  flex-direction: row;
  transition-property: background-color;
  transition-duration: 300ms;
}
@media screen and (max-width: 500px) {
  footer li {
    padding: 10px 8px 10px 8px;
  }
}

footer li#sel {
  background-color: #666;
}

footer li#sel:hover {
  background-color: #444;
}

footer li:hover {
  background-color: #444;
}

footer a {
  color: #ffffff;
  text-decoration: none;
}