/* Styles pour le site Minecraft */

/* Arrière-plan */
body {
    background-color: #1a1a1a;
    font-family: "Open Sans", Arial, sans-serif;
    color: #ffffff;
    background-image: url('../images/background.jpg');
    background-size: cover;
    line-height: 1.25;
}

/* En-tête */
header {
    background-color: #333333;
    padding: 20px;
    text-align: center;
}

header h1 {
    font-size: 36px;
    margin: 0;
    color: #ff6600;
}

/* Liens */
a {
    color: #ff6600;
    text-decoration: none;
}

/*a:hover { text-decoration: underline; }*/

/* Boutons */
.button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #ff6600;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.button_kiki {
    display: inline-block;
    padding: 10px 20px;
    margin: 10px 20px;
    background-color: #ff6600;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.button:hover { background-color: #ff8533; }

.button_kiki:hover { 
    background-color: #ff8533; 
    color: #333333;
    font-style: italic;
    }

/* Contenu principal */
.main-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

h1 { text-align: center; }

.container {
    width: 90%;
    margin: auto;
    background-color: rgba(50, 50, 50, 0.9);
    padding: 20px;
    border-radius: 15px;
}

.container h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: rgba(255,133,51, 0.7);
}

/* Pied de page */
footer {
    background-color: #333333;
    padding: 10px;
    text-align: center;
    color: #ffffff;
}

/* Styles spécifiques pour Minecraft */
.minecraft-logo {
    width: 50px;
    height: 50px;
    /*margin-bottom: 10px;*/
}

/* Ajoutez vos propres règles CSS pour personnaliser davantage votre site ! */
.serveurs-minecraft_org {
background-color: black;
color: #ffffff;
/*font-family: "MinecraftRegular";*/
font-size: 16px;
padding: 10px;
display: inline-block;
}

/*
table {
  border: 1px solid #333;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}

table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

table tr {
  background-color: #555;
  border: 1px solid #ddd;
  padding: .35em;
}

table th,
table td {
  padding: .625em;
  text-align: center;
}

table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}
*/
@media screen and (max-width: 600px) {
  table { border: 0; }

  table caption { font-size: 1.3em; }
  
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: center;
  }
  
  table td::before {

    content: attr(aria-label);

    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  table td:last-child { border-bottom: 0; }
}


.contribution_detail {
    width: 80%;
}

.text-bg-mon-bleu {
  color: #000 !important;
  /*background-color: RGBA(86, 176, 240, 0.9) !important;*/
  background-color: RGBA(8, 146, 251, 0.9) !important;
}

/* la valeur rgba modifie la couleur des traits au milieu de l icone */
.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,133,51, 0.4)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

/* modifie le cadre/border du toggler icon */
.custom-toggler.navbar-toggler {
  border-color: rgb(255,133,51, 0.5);
} 

/*
Orange
#ff8533;
RGB(255,133,51)
https://www.colorxs.com/color/hex-FF8533
https://rgbacolorpicker.com/
*/

.video {
   height: 100%;
   width: 100%;
   margin: 0;
   padding:0;
   position: relative;
   video#bgvid {
     min-width: 100%;
     min-height: 100%;
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
   }
}
/* alliages */

#result-title { 
  background: #b67514;
  font-size: 20px;
  color: #fff;
  padding: 0.5em;
  border-radius: 0.5em;
  font-family: sans-serif;
  text-align: center;
  font-weight: bold;
}

#result-money, #result-alliage, #result-detail-total, #result-detail-total-stack, #result-detail-total-stackb {
  background-color: #FFFFE0; /* Couleur de lumière */
  border: 1px solid #DAA520; /* Couleur d'or */
  padding: 5px;
  margin-bottom: 10px;
  border-radius: 5px;
  display: inline-block;
  font-size: 0.9em;
  color: grey;
  /*text-align: center; */
  margin-top: 5px;
}

.glow { filter: drop-shadow(0px 0px 6px hsl(276, 100%, 44%)); }

/* .convertisseur */
    #stackTooltip, #blockStackTooltip {
      background-color: #FFFFE0; /* Couleur de lumière */
      border: 1px solid #DAA520; /* Couleur d'or */
      padding: 5px;
      margin-bottom: 10px;
      border-radius: 5px;
      display: inline-block;
      font-size: 0.9em;
      color: grey;
    }
  #shulkerTooltip, #blockShulkerTooltip {
      background-color: #FFFFE0; /* Couleur de lumière */
      border: 1px solid #DAA520; /* Couleur d'or */
      padding: 5px;
      margin-bottom: 10px;
      border-radius: 5px;
      display: inline-block;
      font-size: 0.9em;
      color: grey;
    }
  .shulker-grid {
    background-image: url('../images/shulker_vide.png');
    background-repeat: no-repeat;
    width: 514px;
    height: 209px;
    display: grid;
    grid-template-columns: repeat(9, 50px);
    /*grid-gap: 4px;*/
    row-gap: 2px;
    column-gap: 4px;
    padding-top : 48px;
    padding-left : 18px;
    margin-bottom: 10px;
  }
  .shulker-grid div {
    width: 50px;
    height: 48px;
    /*border: 1px solid #000;*/
    text-align: center;
    padding-top: 15px;
  }
  .filled {
    /*background-color: #000;
    color: #FFF;*/
    color: black;
  }
  .partial {
    /*background-color: #808080;
    color: #FFF;*/
    color: orange;
  }
  .empty {
    /*background-color: #FFF;
    color: #000;*/
    color: white;
  }