/*
Theme Name: Lumen
Theme URI:
Author: Me
Author URI:
Description:
Version: 1
License:
License URI:
Text Domain: lumen
Tags:
*/



/* PARAMETERS *****************************************************************/

:root {
  --site-width:      960px;
  --header-height:   418px;
  --nav-height:      120px;
  --footer-height:   375px;
  --post-width:      500px;
  --nav-button-size: 50px;
  --net-button-size: 25px;
  --net-button-grow: 5px;
}

* {
  box-sizing: border-box;
}



/* TEXT ***********************************************************************/

.title {
  border-image: url("images/Title_Background.png") 30 fill / 30px / 8px round;
  margin-top: 20px;
  margin-bottom: 15px;
  padding: 0;
}

h1 {
  line-height: 35px;
  color: white;
  font-family: 'Ubuntu Condensed', sans-serif;
  font-size: 1.2em;
  text-align: center;
  margin: 0;
  padding: 5px;
}

h2 {
  color: white;
  font-family: 'Ubuntu Condensed', sans-serif;
  font-size: 1.2em;
  text-align: center;
}

p, li, td, a, a:visited, a:link, a:active, a:hover {
  text-decoration: none;
  color: white;
  font-family: 'Ubuntu Condensed', sans-serif;
  font-size: 1em;
  text-align: justify;
}

a, a:visited, a:link, a:active, a p, a:visited p, a:link p, a:active p {
  text-decoration: underline;
  color: #6dd1ad;
}

a:hover, a:hover p {
  text-decoration: underline;
  color: #0ff8a4;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

.center {
  text-align: center;
}

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}



/* PAGE ***********************************************************************/

html {
  margin:  0 !important;
  padding: 0 !important;
  overflow-x: hidden;
}

body {
  margin:  0 !important;
  padding: 0 !important;
  background-color: black;
}

.page-sized {
  width: var(--site-width);
  max-width: 100vw;
}

.page-centered {
  left: 50%;
  top:  0;
  transform: translateX(-50%);
}

#left-side {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(calc((-100%) - 253px));
  width: 228px;
  height: 100%;
  background-image: url("images/Body_Background1_Left.png");
  background-position: 0% 0%;
  background-size: 228px 670px;
  background-repeat: repeat-y;
}

#right-side {
  position: absolute;
  width: 234px;
  height: 100%;
  max-width: calc(100% - (50% + 247px));
  left: 50%;
  transform: translateX(247px);
  background-image: url("images/Body_Background1_Right.png");
  background-position: 0% 0%;
  background-size: 234px 670px;
  background-repeat: repeat-y;
}

#content {
  position: relative;
  min-height: calc(100vh + (var(--header-height) - var(--nav-height)));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}



/* BACKGROUND *****************************************************************/

.background {
  position: absolute;
  will-change: transform;
  height: 100%;
}

.no-js .background {
  display: none;
}

#background1 {
  background-image: url("images/Body_Background_Base.png");
  background-size: 960px 695px;
  background-position: top;
  background-repeat: repeat-y;
}

.no-js .nojs-background1 {
  background-image: url("images/Body_Background_Base.png");
  background-size: 960px 695px;
  background-position: top;
  background-repeat: repeat-y;
}

#background2 {
  background-image: url("images/Body_Background2_Bottom.png");
  background-position: bottom;
  background-size: 960px 376px;
  background-repeat: no-repeat;
}

.no-js .nojs-background2 {
  background-image: url("images/Body_Background2_Bottom.png");
  background-position: bottom;
  background-size: 960px 376px;
  background-repeat: no-repeat;
}

#background-left {
  left: 50%;
  transform: translateX(calc((-100%) - 261px));
  width: 219px;
  background-image: url("images/Body_Background2_Left.png");
  background-position: 0% 0%;
  background-size: 219px 557px;
  background-repeat: repeat-y;
}

#background-right {
  width: 308px;
  max-width: calc(100% - (50% + 172px));
  left: 50%;
  transform: translateX(172px);
  background-image: url("images/Body_Background2_Right.png");
  background-position: 0% 0%;
  background-size: 308px 527px;
  background-repeat: repeat-y;
}

.js #nojs-left-background {
  display: none;
}

.no-js #nojs-left-background {
  position: absolute;
  left: 50%;
  transform: translateX(calc((-100%) - 261px));
  width: 219px;
  height: 100%;
  z-index: -1;
  background-image: url("images/Body_Background2_Left.png");
  background-position: 0% 0%;
  background-size: 219px 557px;
  background-repeat: repeat-y;
}

.js #nojs-right-background {
  display: none;
}

.no-js #nojs-right-background {
  position: absolute;
  width: 308px;
  max-width: calc(100% - (50% + 172px));
  left: 50%;
  height: 100%;
  z-index: -1;
  transform: translateX(172px);
  background-image: url("images/Body_Background2_Right.png");
  background-position: 0% 0%;
  background-size: 308px 527px;
  background-repeat: repeat-y;
}



/* HEADER *********************************************************************/

#header {
  position: sticky;
  position: -webkit-sticky;
  top: calc((var(--header-height) - var(--nav-height)) * -1);
  height: var(--header-height);
}

#header-top {
  top: 0;
  width: 100%;
  height: 317px;
  background-image: url("images/Header_Sky_Background.png");
  background-size: 960px 317px;
  background-repeat: no-repeat;
  background-position: center top;
}

#header-front {
  --width:  864px;
  --height: 174px;
  position: absolute;
  width: 100%;
  height: var(--height);
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  background-image: url("images/Header_Sky_Background3.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: var(--width) var(--height);
}

#header-bottom {
  position: absolute;
  bottom: 0;
  width:  100%;
  height: 301px;
  background-image: url("images/Header_Base.png");
  background-size: 960px 301px;
  background-repeat: no-repeat;
  background-position: center bottom;
}

#header-fern1 {
  --width:  425px;
  --height: 242px;
  position: absolute;
  width:  var(--width);
  height: var(--height);
  top: 95px;
  left: 50%;
  transform: translateX(calc((-100%) - 120px));
  background: url("images/Header_Fern1.png");
  background-repeat: no-repeat;
  background-size: var(--width) var(--height);
}

#header-fern2 {
  --width:  399px;
  --height: 242px;
  position: absolute;
  width: var(--width);
  max-width: calc(100% - (50% - 120px));
  height: var(--height);
  top: 90px;
  left: 50%;
  transform: translateX(-120px);
  background: url("images/Header_Fern2.png");
  background-repeat: no-repeat;
  background-size: var(--width) var(--height);
}

#header-fern3 {
  --width:  375px;
  --height: 259px;
  position: absolute;
  width: var(--width);
  max-width: calc(100% - (50% + 200px));
  height: var(--height);
  top: 90px;
  left: 50%;
  transform: translateX(200px);
  background: url("images/Header_Fern3.png");
  background-repeat: no-repeat;
  background-size: var(--width) var(--height);
}

#header-sky {
  --width:  314px;
  --height: 273px;
  position: absolute;
  width:  var(--width);
  height: var(--height);
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: url("images/Header_Sky_Background2.png");
  background-repeat: no-repeat;
  background-size: var(--width) var(--height);
  mix-blend-mode: screen;
}

#header-logo {
  --width:  calc(490px / 2);
  --height: calc(492px / 2);
  position: absolute;
  width:  var(--width);
  height: var(--height);
  top: 30px;
  left: 50%;
  transform: translateX(calc(-50% - 4px));
  background: url("images/Logo_LumenSection.svg");
  background-repeat: no-repeat;
  background-size: var(--width) var(--height);
}



/* NAV ************************************************************************/

#nav-bar {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.nav-button {
  width: var(--nav-button-size);
  height: var(--nav-button-size);
}

.nav-button span {
  display: none;
}

#nav-home {
  background-image: url("images/Button_Home_Base.svg");
  background-size: var(--nav-button-size) var(--nav-button-size);
}

#nav-home:hover {
  background-image: url("images/Button_Home_Highlight.svg");
  background-size: var(--nav-button-size) var(--nav-button-size);
}

body.page-home #nav-home {
  background-image: url("images/Button_Home_Selected.svg");
  background-size: var(--nav-button-size) var(--nav-button-size);
}

body.page-home #nav-home:hover {
  background-image: url("images/Button_Home_Highlight.svg");
  background-size: var(--nav-button-size) var(--nav-button-size);
}

#nav-news {
  background-image: url("images/Button_News_Base.svg");
  background-size: var(--nav-button-size) var(--nav-button-size);
}

#nav-news:hover {
  background-image: url("images/Button_News_Highlight.svg");
  background-size: var(--nav-button-size) var(--nav-button-size);
}

body.page-news #nav-news {
  background-image: url("images/Button_News_Selected.svg");
  background-size: var(--nav-button-size) var(--nav-button-size);
}

body.page-news #nav-news:hover {
  background-image: url("images/Button_News_Highlight.svg");
  background-size: var(--nav-button-size) var(--nav-button-size);
}

#nav-about {
  background-image: url("images/Button_Team_Base.svg");
  background-size: var(--nav-button-size) var(--nav-button-size);
}

#nav-about:hover {
  background-image: url("images/Button_Team_Highlight.svg");
  background-size: var(--nav-button-size) var(--nav-button-size);
}

body.page-about #nav-about {
  background-image: url("images/Button_Team_Selected.svg");
  background-size: var(--nav-button-size) var(--nav-button-size);
}

body.page-about #nav-about:hover {
  background-image: url("images/Button_Team_Highlight.svg");
  background-size: var(--nav-button-size) var(--nav-button-size);
}

#nav-games {
  background-image: url("images/Button_Games_Base.svg");
  background-size: var(--nav-button-size) var(--nav-button-size);
}

#nav-games:hover {
  background-image: url("images/Button_Games_Highlight.svg");
  background-size: var(--nav-button-size) var(--nav-button-size);
}

body.page-games #nav-games {
  background-image: url("images/Button_Games_Selected.svg");
  background-size: var(--nav-button-size) var(--nav-button-size);
}

body.page-games #nav-games:hover {
  background-image: url("images/Button_Games_Highlight.svg");
  background-size: var(--nav-button-size) var(--nav-button-size);
}

#nav-contact {
  background-image: url("images/Button_Contact_Base.svg");
  background-size: var(--nav-button-size) var(--nav-button-size);
}

#nav-contact:hover {
  background-image: url("images/Button_Contact_Highlight.svg");
  background-size: var(--nav-button-size) var(--nav-button-size);
}

body.page-contact #nav-contact {
  background-image: url("images/Button_Contact_Selected.svg");
  background-size: var(--nav-button-size) var(--nav-button-size);
}

body.page-contact #nav-contact:hover {
  background-image: url("images/Button_Contact_Highlight.svg");
  background-size: var(--nav-button-size) var(--nav-button-size);
}



/* CONTENT ********************************************************************/

.post {
  display: block;
  width: 90vw;
  max-width: var(--post-width);
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 30px;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-image: url("images/Full_9split.png") 36 fill / 36px / 0px round;
}

.post p {
  margin-bottom: 30px;
}

.post table {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 10px;
  margin-bottom: 25px;
  table-layout: fixed;
}

.post td {
  text-align: center;
  font-size: 1em;
  margin: 0;
  padding: 0;
}

.post td strong {
  display: block;
  font-size: 1.2em;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

@media screen and (max-width: 350px) {
  .post td {
     font-size: 3.5vw;
  }
  
  .post td strong {
     font-size: 4.5vw;
     padding-left: 0;
     padding-right: 0;
  }
}

.post img {
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.post iframe {
  max-width: 100%;
}

#oldnew {
  display: block;
  width: 90vw;
  max-width: var(--post-width);
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 30px;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 0;
  padding-bottom: 0;
  border-image: url("images/Full_9split.png") 36 fill / 36px / 0px round;
}

.grid {
  display: block;
  width: 90vw;
  max-width: var(--post-width);
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.grid .element {
  display: block;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 30px;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 30px;
  padding-bottom: 30px;
  border-image: url("images/Full_9split.png") 36 fill / 36px / 0px round;
}

.grid img {
  display: block;
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
}



/* FOOTER *********************************************************************/

#footer {
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: var(--footer-height);
  background-size: 960px 374px;
  background-repeat: no-repeat;
  background-position: bottom;
}

.footer-default {
  background-image: url("images/Body_Background1_Bottom.png");
}

.footer-citrouille {
  background-image: url("images/Body_Background1_Bottom_Citrouille.png");
}

#follow {
  background-image: url("images/FollowUs.png");
  background-size: 168px 43px;
  background-repeat: no-repeat;
  width: 168px;
  height: 43px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 0;
  margin-bottom: 0;
}

#socialmedias {
  height: calc(var(--net-button-size) + var(--net-button-grow));
  margin-top: 0;
  margin-bottom: 9px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

#copyright {
  height: 25px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 0;
  margin-bottom: 0;
}

#copyright p {
  margin: 0;
  padding: 0;
  text-align: center;
}



/* SOCIAL MEDIAS **************************************************************/

.socialmedia {
  width:  calc(var(--net-button-size) + var(--net-button-grow));
  height: calc(var(--net-button-size) + var(--net-button-grow));
  background-size: var(--net-button-size) var(--net-button-size);
  background-position: center;
  background-repeat: no-repeat;
  margin-left: 10px;
  margin-right: 10px;
}

.socialmedia:hover {
  width:  calc(var(--net-button-size) + var(--net-button-grow));
  height: calc(var(--net-button-size) + var(--net-button-grow));
  background-size: calc(var(--net-button-size) + var(--net-button-grow)) calc(var(--net-button-size) + var(--net-button-grow));
  background-position: center;
  background-repeat: no-repeat;
}

#instagram {
  background-image: url("images/Link_Instagram.png");
}

#youtube {
  background-image: url("images/Link_Youtube.png");
}

#facebook {
  background-image: url("images/Link_Facebook.png");
}

#twitter {
  background-image: url("images/Link_Twitter.png");
}



/* BUTTONS ********************************************************************/

.hidden {
  display: none;
}

.button-container:hover .visible
{
  display: none;
}

.button-container:hover .hidden {
  display: block;
}



/* TARGET *********************************************************************/

.target:target {
  display: block;
  position: relative;
  visibility: hidden;
  top: -120px;
}