/*FONTS*/

@font-face {
  font-family: anta;
  src: url(fonts/Anta/Anta-Regular.ttf);
  }

@font-face {
  font-family: bruno;
  src: url(fonts/Bruno_Ace/BrunoAce-Regular.ttf);
  }

@font-face {
  font-family: genos;
  src: url(fonts/Genos/Genos-VariableFont_wght.ttf);
}

@font-face {
  font-family: michroma;
  src: url(fonts/Michroma/Michroma-Regular.ttf);
}

@font-face {
  font-family: zen;
  src: url(fonts/Zen_Dots/ZenDots-Regular.ttf);
}


/*PARAMETRES GENERAUX*/

body {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 100vh;
  background-image: url("backgrounds/shootingstar.gif");
  background-repeat: repeat;
  background-position: center;
  font: 19px 'Anta';
  text-shadow: 0px 0px 1px #bbb;
  color:#fff;
  line-height:19px;
  max-width: 1366px;
  margin-left: auto;
  margin-right: auto;
}  

#layout {
  margin: 13px auto;
  width: 98%;
}

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

.container {
  height: 450px;
  overflow: auto;
}

i {font-style:italic;color:#aaa;}     

.row {
  display: flex;
  background-color: #e4b2b2de;
  padding: 5px;
  border-radius: 10px;
}

.column {
  flex: auto;
  padding: 10px;
  font: 15px georgia,monospace;
}
  
::-webkit-scrollbar {
  width: 8px;
  height: 0px; 
  background: transparent;
}

.top_img{
  position: relative;
  right: -10%;
  top: -165%;
  width: 150px;
}

h1{
  font: 19px 'Anta';
  text-shadow: 0px 0px 1px #bbb;
  color:#fff;
  line-height:19px;
}


/*Boxes*/

.title {
  font:17px 'bruno';
  text-transform:uppercase;
  color:hsl(155, 40%, 61%);
  background:hsl(155, 87%, 85%);
  letter-spacing:3px;
  text-align:left;
  padding:2px;
  padding-left:8px;
  padding-top:4px;
  padding-bottom:4px;
  border-top-left-radius:5px;
  border-top-right-radius:5px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.box {
  background:transparent;
  overflow: auto;
  border:3px solid hsl(155, 87%, 85%);
  border-top:0px;
  border-bottom-left-radius:5px;
  border-bottom-right-radius:5px;
  padding:8px;
  margin-bottom:2px;
}

.side_box {
  background:transparent;
  overflow: auto;
  border:3px solid hsl(155, 87%, 85%);
  border-top:0px;
  border-bottom-left-radius:5px;
  border-bottom-right-radius:5px;
  padding:8px;
  margin-bottom:2px;
  line-height:13px;
  font:italic bold 15px georgia,monospace;
  text-align:left;
}

.overflow_box {
  background:transparent;
  border:3px solid hsl(155, 87%, 85%);
  border-top:0px;
  border-bottom-left-radius:5px;
  border-bottom-right-radius:5px;
  padding:8px;
  margin-bottom:2px;
  line-height:13px;
  font: bold 15px georgia,monospace;
  text-align:left;
  height: 153px;
  overflow: auto;
}


/*Menus*/

#menu a {
  display:inline-block;
  background:#8decd0;
  margin-bottom:4px;
  padding:1px;
  padding-top:2px;
  padding-left:6px;
  width:97%;
  line-height:13px;
  font:italic 15px georgia,monospace;
  text-transform:lowercase;
  letter-spacing:3px;
  text-align:left;
  border-radius:5px;
  color:hsl(155, 40%, 61%);
}
  
#menu a:hover {
  display:inline-block;
  background:#b8fae6;
  line-height:13px;
  font:italic 15px georgia,monospace;
  text-transform:lowercase;
  letter-spacing:3px;
  border-radius:5px
}


/*Links*/

a:link, a:visited, a:active { 
  color:#8d8d8d;text-decoration:none;
}
a:hover {
  color:#71f0ca;
}


/*HEADER*/

#header1 {
  width: 99%;
  float: left;
  margin: 0 auto;
  margin-left: 0.5%;
  margin-right: 0.5%;
}

#header2 {
  height: 40px;
  background: #6aa89e60;
  margin: 0px;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  padding-bottom: 3px;
}

#sitename a {
  font:40px 'pixelify sans', courier;
  color:hsl(155, 87%, 85%);
}


/*NAVIGATION*/

#navigation1 {
  width: 100%;
  float: left;
  margin: 0px;
}

#navigation2 {
  height: 25px;
  line-height:20px;
  background: #6aa89e60;
  margin-bottom:10px;
  padding:1px;
  padding-top:2px;
  text-align:center;
  border-bottom-left-radius:10px;
  border-bottom-right-radius:10px;
}
  
#navigation2 a { 
  width:150px;
  display:inline-block;
  background:hsl(155, 40%, 61%); 
  font:bold 15px 'bruno';
  text-transform:uppercase;
  padding:4px; 
  letter-spacing:3px;
  color:hsl(155, 87%, 85%);
  border-bottom-left-radius:5px;
  border-bottom-right-radius:5px;
  border-top-left-radius:5px;
  border-top-right-radius:5px;
}
  
#navigation2 a:hover {
  background:#defdf6; 
}


/*MAIN CONTENT*/

#content1 {
  background-color: #6aa89e60;
  width: 59.5%;
  float: left;
  margin-left: 0.8%;
  margin-right: 0.8%;
  border-bottom-left-radius:10px;
  border-bottom-right-radius:10px;
  border-top-left-radius:10px;
  border-top-right-radius:10px;}

#content2 {
  margin: 0px;
  padding:6px;
  background:transparent;
  border-top:0px;
}


/*LEFT SIDEBAR*/

#left1 {
  background-color: #6aa89e60;
  width:19%;
  float: left;
  margin: auto;
  margin-left: 0.5%;
  border-bottom-left-radius:10px;
  border-bottom-right-radius:10px;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
}

#left2 {
  margin: 0px;
  padding:6px;
}


/*RIGHT SIDEBAR*/

#right1 {
  background-color: #6aa89e60;
  width: 19%;
  float: left;
  margin: auto;
  border-bottom-left-radius:10px;
  border-bottom-right-radius:10px;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
}

#right2 {
  margin: 0px;
  padding:6px;
}


/*FOOTER*/

#footer1 {
  width: 100%;
  float: left;
  margin: 0 auto;
  clear: both;
}

#footer2 {
  height: 100px;
  line-height:40px;
  font: 13px 'Zen';
  color: #6aa89e60;
  text-align:center;
  margin: 0px;
}


/*RESPONSIVE IMAGE GALLERY*/

div.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

div.gallery-item {
  margin: 5px;
  border: 1px solid #ccc;
  width: calc(33% - 20px);
  position: relative;
}

div.gallery-item-small {
  margin: 5px;
  border: 1px solid #ccc;
  width: calc(25% - 20px);
  position: relative;
}

div.gallery-item img {
  width: 100%;
  height: auto;
}

div.gallery-item div.desc {
  padding: 15px;
  text-align: center;
}

@media only screen and (max-width: 768px) {
  div.gallery-item {
    width: calc(50% - 20px);
  }
}

@media only screen and (max-width: 480px) {
  div.gallery-item {
    width: calc(100% - 20px);
  }
}

/*TOOLTIP*/

.tooltiptext {
  visibility: hidden;
  width: 130px;
  background-color: #e4b2b2de;
  color: #ffffff;
  text-align: left;
  font: 14px georgia,monospace;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  top: 105px;
  left: -2%;
}

div.gallery-item:hover .tooltiptext {
  visibility: visible;
}