@charset "UTF-8";
/* taille des écrans */
/* couleurs */
@font-face {
  font-family: "nightmare";
  font-weight: bold;
  src: url("./font/nightmare.ttf"); }

/* CSS général */
* {
  margin: 0;
  padding: 0;
  word-break: break-word; }

html {
  position: relative;
  min-height: 100vh; }

body {
  font-family: 'Carrois Gothic SC', sans-serif;
  width: 100%;
  background-color: #060c02;
  color: #feffff; }
  body:before {
    content: "";
    position: absolute;
    width: 100%;
    min-height: 100%;
    top: 0;
    background-size: cover;
    background-attachment: fixed;
    opacity: .1;
    z-index: -1; }

h1 {
  margin-bottom: 10px;
  text-transform: uppercase; }

a {
  color: #feffff;
  text-decoration: none; }
  a:hover {
    color: #EB6D07; }

p {
  margin-bottom: 3px; }
  @media screen and (max-width: 768px) {
    p {
      font-size: 1.3rem; } }

header {
  background-color: #232124;
  width: 100vw;
  position: fixed;
  top: 0;
  box-shadow: 0px 5px 20px #060c02;
  z-index: 2; }
  header .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1024px;
    margin: auto; }
  header .logo {
    height: 80px;
    width: auto;
    margin: 20px 0; }
    @media screen and (max-width: 767px) {
      header .logo {
        height: 50px; } }

nav {
  flex: 1 1 auto; }
  nav ul {
    display: flex;
    justify-content: flex-end;
    list-style: none;
    font-size: 3.5rem; }
    @media screen and (max-width: 768px) {
      nav ul {
        font-size: 3rem; } }
    nav ul li {
      width: 120px;
      font-family: 'nightmare', Helvetica, Arial, sans-serif;
      text-align: center; }
      nav ul li span {
        color: #615D5E; }
      @media screen and (max-width: 768px) {
        nav ul li {
          width: auto;
          margin-right: 10px; } }

.content {
  margin: 110px auto 30px auto;
  width: calc(100% - 40px);
  max-width: 1024px;
  padding: 20px; }
  .content section {
    padding: 10px 15px;
    border-radius: 20px;
    background: #232124;
    margin-bottom: 20px; }
    .content section h2 {
      padding-bottom: 10px; }
    .content section h3 {
      margin-top: 25px;
      margin-bottom: 10px; }
    .content section img {
      max-width: 100%; }

iframe {
  width: 100%;
  height: 500px; }

footer {
  position: fixed;
  width: 100vw;
  bottom: 0;
  background-color: #232124;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  box-shadow: 0px -5px 20px #060c02; }
  footer p {
    margin: auto;
    padding: 5px 30px;
    font-size: 1rem; }
  footer, footer a {
    color: #615D5E; }

.button {
  background-color: #f6ad3c;
  color: #060c02;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 15px;
  border: none; }
  .button:hover {
    background-color: #EB6D07;
    color: #feffff; }

.none {
  display: none; }

.alert {
  margin-top: 10px;
  width: 100%;
  color: #EB6D07;
  font-weight: 700; }

.large {
  width: 100%; }

.margin-bottom {
  margin-bottom: 20px; }

/* CSS de la page band.php */
.band {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }
  .band section {
    /*width: 45%;*/
    position: relative; }
    .band section a {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      border-radius: 20px; }
      .band section a:hover {
        background-color: #615D5E;
        opacity: 20%; }
    @media screen and (max-width: 768px) {
      .band section {
        width: 100%; } }

.image-member {
  /*max-height: 460px;*/
  width: 100%;
  object-fit: cover; }

.list-fans {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }
  .list-fans .fan {
    width: 45%; }
    @media screen and (max-width: 768px) {
      .list-fans .fan {
        width: 100%; } }

.fans-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center; }
  .fans-header .bloc-filter {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px; }
    .fans-header .bloc-filter p {
      margin-right: 5px; }
    .fans-header .bloc-filter .filter {
      border-radius: 5px; }

form {
  background-color: #615D5E;
  color: #feffff;
  padding: 20px;
  border-radius: 15px;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap; }
  form h2 {
    width: 100%;
    margin-bottom: 20px; }
  form div {
    width: 50%;
    padding-bottom: 5px; }
    @media screen and (max-width: 768px) {
      form div {
        width: 100%; } }
    form div label {
      width: 100px;
      display: inline-block; }
  form [type="text"] {
    background-color: #feffff;
    border-radius: 5px;
    padding: 5px; }

.add-fan {
  margin-bottom: 20px;
  margin-left: 5px; }
/*# sourceMappingURL=main.css.map */