*{
  margin:0;
  padding:0;
}


body {
font-family: "Mulish", sans-serif;
background-color:#FE019A;
color:white;
letter-spacing: 3px;
}

h1,h2,h3,h4,h5,a,.button{
  font-family: "Mulish", monospace;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 900;
  color:white;
}

a{
  text-decoration:none;
  color:white;
}


/*Header*/

header{
  text-align:center;
  text-transform:uppercase;
}

header h1{
font-size:64px;
margin-top:1em;
}

/*Content*/

#content{
  width:40%;
  margin:auto;
  padding-bottom:100px;
}

#content-admin{
  width:80%;
  margin:auto;
  padding-bottom:100px;
    min-width:1000px;
}


/*Forms*/

label{
  display:inline-block;
  width:100%;
  text-align:center;
  font-family: 'Mulish';
}

.field{
  width:100%;
  border:none;
  border-bottom:1px solid white;
  background-color: none;
  margin-bottom:10px;
  line-height: 2em;
  font-weight:bold;
  text-align:center;
  caret-color: #FE019A;
  color:#FE019A;
}

.field:hover{
  border-bottom:1px dotted white;
}

.field:focus{
  outline:none;
  border:none;
  border-bottom:1px dotted white;
  border-radius:10px;
}


.button {
  display:block;
  background: transparent;
  width: 20em;
  height: 40px;
  margin:auto;
  margin-top:2em;
  line-height:2em;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
  cursor:pointer;
  border:none;
  border-top:1px solid white;
  border-bottom:1px solid white;
  transition: all .25s;
}

.button:hover{
  width:100%;
  letter-spacing: 10px;
}


/* Videos */


.vid-rec {
  margin:auto;
  border: 1px solid white;
  background-color: white;
  border-radius: 20px;
}

.messageenvoi{
  width:100%;
}

#backgroundintro{
  position: fixed;
  top:0;
  width:100%;
  height:100%;
  background-color: black;
}

#intro{
  position:fixed;
  display:flex;
  top:0;
  width:100%;
  min-height:100%;
}

.controlsintro{
  position: fixed;
  top: 50%; right: 50%;
  transform: translate(50%, -50%);
  padding: 20px;
}

#playpause {
  width: 200px;
  padding: 10px;
  color: white;
  background: none;
  cursor: pointer;
  margin:auto;
  border:none;
  font-family: 'Mulish', sans-serif;
  font-weight:900;
  font-size: 2em;
}

#log{
  text-align: center;
}

#preview-content, #recorded-content{
  margin-top:50px;
}

#recorded-content{
  display:none;
}

/*Pages
    ->Index */
.accueil{
  padding-top:20vh;
}

.accueil label{
  margin-bottom:2em;
}

/* ->Enregistrement */
.display h2{
  text-align:center;
  width:100%;
  margin-bottom:2em;
}

#formulaire{
  margin-top:5em;
}

#formulaire label{
  margin-bottom:1em;
  display:inline-block;
}

.user-form{
  margin-top:2em;
}

/*  ->Err mdp, merci & Err mail */
.erreur{
  text-align:center;
  padding-top:20vh;
}

.bttn-err{
  margin-top:4em;
  color:white;
}

/*Admin*/
.admin{
  margin-top:3em;
}


.admin h2, h3{
  margin-top:1em;
  margin-bottom:3em;
  text-align:center;
}

.bttn-admin{
  display:block;
  background: transparent;
  width: 30em;
  height: 40px;
  margin:auto;
  margin-top:2em;
  line-height:2em;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
  cursor:pointer;
  border:none;
  border-top:1px solid white;
  border-bottom:1px solid white;
  transition: all .25s;
  color:white;
  font-family: 'Mulish', sans-serif;
}

.bttn-admin:hover{
  width:100%;
  letter-spacing: 10px;
}
.cat-admin{
  text-align:center;
  padding:20px;
  border:1px solid white;
  margin-bottom:3em;
  border-radius: 20px;
}
.sscat-admin:not(:last-of-type){
  margin-bottom:3em;
}

.tab-bttn{
  margin-top:2em;;
  margin-bottom:4em;
  color:white;
  display:block;
  background: transparent;
  width: 20em;
  height: 40px;
  line-height:2em;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
  cursor:pointer;
  border:none;
  border-top:1px solid white;
  border-bottom:1px solid white;
  transition: all .25s;
  font-family: 'Mulish', sans-serif;
}

.tab-bttn:hover{
  letter-spacing: 10px;
}

.tab-users{
  text-align:left;
}

.moduser label{
    margin-top:2em;
}

.mails-contenu{
  text-align:left;
}

.apercumail{
  margin-top:1em;
  margin-bottom:1em;
  text-align: left;
}

.apercumail p{
  margin-bottom:1em;
}

[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
width:20px;
height:20px;
background:white;
border:none;
}

[type="checkbox"]:checked{
  color:#FE019A;
}

@media only screen and (max-width: 600px) {
  #content {
    width:70%;
  }

  .button{
    height:auto;
    width:70%;
  }

  header h1{
  font-size:32px;
  }
}