﻿:root {
  --theme-bleu: #49a4e0;
  --theme-blanc-transparent: rgba(255,255,255,0.3);
  --theme-bleu-pale: rgb(192, 192, 192);
  --theme-bleu-fonce: rgb(85, 85, 85);
  --theme-vert: #408450;
  --theme-blanc: white;
  --theme-noir: black;

  --theme-bordure-rondeur: 0.5rem;
}

html {
  font-family:'Cream Cake', sans-serif;
  font-size:48px;
}

#liste-botte {
  list-style-type:none;
}

.liste-botte-item {
  color:var(--theme-bleu);
  text-transform : capitalize;
  text-decoration:none;
}

#liste-montagne li {
  position:relative;
  display:block;
  margin-bottom:0.25rem;
  background-color:var(--theme-blanc-transparent);
  border-radius:var(--theme-bordure-rondeur);
  padding:0.25rem;
  padding-left:1.50rem;
  box-shadow: 2px 2px var(--theme-blanc);
}

#liste-montagne li::before {
   content:url(./favicon-32x32.png);
   text-align:center;
   color:#000;
   font-size:1.25rem;
   position:absolute;
   top:0.1rem;
   left:0.25rem;
   height:1rem;
   width:1rem;
}


fieldset {
  color:var(--theme-bleu);
  border-color: var(--theme-bleu);
  border-radius:var(--theme-bordure-rondeur);
}

input[type="text"],
textarea {
  display:block;
  width:100%;
  border:none;
  background-color:var(--theme-blanc-transparent);
  border-radius:var(--theme-bordure-rondeur);
}

#page-chargement-application{
  position:relative;
  height:100vh;
  background-repeat:no-repeat;
  background-size:contain;
  background-position:bottom center;
  background-attachment:fixed;

  text-align:center;
  font-size:2rem;
  font-weight:normal;
  line-height:1.8rem;

  padding:10%;
  color:var(--theme-blanc);
  text-shadow: 2px 2px var(--theme-noir);
  animation: pulse 1.5s infinite;
  animation-direction: alternate;
}

@keyframes pulse {
  0% {
    background-color:var(--theme-bleu-fonce);
  }
  100% {
    background-color:var(--theme-bleu-pale);
  }
}



.page {
  position:relative;
  background-color:var(--theme-bleu-pale);
  padding:5%;
  min-height: 100vh;
  box-sizing: border-box;

  background-repeat:no-repeat;
  background-size:cover;
  background-position:right bottom;
  background-attachment:fixed;
  background-size: 40%;
  color:var(--theme-bleu);
}


.page h1{
  text-align:center;
  font-size:2rem;
  font-weight:normal;
  line-height:1.8rem;
  color:var(--theme-vert);
  text-shadow: 2px 2px var(--theme-blanc);

}

.page h2,
.page p {
  background-color:var(--theme-blanc-transparent);
  border:0px transparent solid;
  border-radius:var(--theme-bordure-rondeur);
  padding:0.25rem;
}


.action{
  position:relative;
  display:block;
  text-decoration: none;
  font-family:sans-serif;
  background-color:#ee2525;
  color:var(--theme-blanc);
  border:0px transparent solid;
  border-radius:var(--theme-bordure-rondeur);
  padding:0.25rem;
  font-size:1rem;
  text-align:center;
  width:50%;
  margin:0 auto;
  box-sizing: border-box;
  margin-top:0.25rem;
  margin-bottom:0.25rem;
  box-shadow: 2px 2px var(--theme-blanc);
}

.action:active {
  border:0px transparent solid;
}

#liste-montagne li a{
  text-decoration: none;
  color: black;
  text-shadow: 3px 3px grey;
}

h3{
  text-shadow: 2px 2px #3c86b8;
}