@charset "UTF-8";
/* Style général */
body {
  font-family: "SpongeBob Font Condensed", sans-serif;
  margin: 0;
  background-color: turquoise;
  cursor: url("../cursor2.png"), default;
  max-width: 100vw;
  height: 100vh;
  overflow-x: hidden;
}

:root {
  --spongeblue: rgba(19, 1, 102, 0.9);
}

h1 {
  font-family: "SpongeBob Font Wide", sans-serif;
  color: yellow;
}

/* Mise en page commune */
.maincontainer {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 7rem;
  margin: 0;
}

.secondcontainer {
  width: 70%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-track {
  background: coral;
}

::-webkit-scrollbar-thumb {
  background: yellow;
}

/* Navigation */
header {
  display: flex;
  position: fixed;
  justify-content: space-between;
  width: 100%;
  top: 0;
  height: 5rem;
  background-color: var(--spongeblue);
  align-items: center;
  z-index: 10;
}

.logo {
  height: 80%;
  margin-left: 1rem;
  transition: all 0.2s;
}

.logo:hover {
  transform: scale(1.05);
  transition: all 0.2s;
}

/* Barre de navigation mobile */
#link {
  display: none;
}

#burger {
  width: 2em;
  height: 4px;
  background: yellow;
  display: inline-block;
  position: relative;
  margin-right: 2em;
}

#burger::before,
#burger::after {
  content: "";
  width: 2em;
  height: 4px;
  background: yellow;
  display: inline-block;
  position: absolute;
}

#burger::before {
  top: -10px;
}

#burger::after {
  top: 10px;
}

/* Barre de navigation desktop */
nav li {
  display: inline-block;
  margin: 0 2rem;
}

nav a {
  text-decoration: none;
  color: yellow;
  font-size: 2rem;
  transition: all 0.4s ease-in-out;
  cursor: url("../cursor1.png"), pointer;
}

nav a:hover {
  color: coral;
  font-size: 2.2rem;
  transition: all 0.2s ease-in-out;
}

.fanclub {
  background-color: yellow;
  border: 5px dotted white;
  border-radius: 50px;
  transition: all 0.4s ease-in-out;
  padding: 0 1em;
  margin-right: 1rem;
}

.fanclub:hover {
  background-color: coral;
  transform: scale(1.05);
  transition: all 0.3s ease-in-out;
}

.fanclub a {
  text-decoration: none;
  color: black;
  cursor: url("../cursor1.png"), pointer;
}

/* Home */
.city {
  background-image: url("../assets/img/Bikini-Bottom.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
}

.overlay {
  background-color: rgba(0, 0, 0, 0.05);
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Fonds bulles animées */
.bubbless {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}

.bubble {
  max-width: 6%;
  position: relative;
  opacity: 0.8;
}

.bub1 {
  animation: bubvert 2s linear infinite, bubhor 1s ease-in-out infinite alternate, bubsize 2s ease-in-out infinite alternate;
  -webkit-animation: bubvert 2s linear infinite, bubhor 1s ease-in-out infinite alternate, bubsize 2s ease-in-out infinite alternate;
}

.bub2 {
  animation: bubvert 1s linear infinite, bubhor 0.5s ease-in-out infinite alternate, bubsize 3s ease-in-out infinite alternate;
  -webkit-animation: bubvert 1s linear infinite, bubhor 0.5s ease-in-out infinite alternate, bubsize 3s ease-in-out infinite alternate;
}

.bub3 {
  animation: bubvert 3s linear infinite, bubhor 1s ease-in-out infinite alternate, bubsize 1s ease-in-out infinite alternate;
  -webkit-animation: bubvert 3s linear infinite, bubhor 1s ease-in-out infinite alternate, bubsize 1s ease-in-out infinite alternate;
}

.bub4 {
  animation: bubvert 2s linear infinite, bubhor 2s ease-in-out infinite alternate, bubsize 2s ease-in-out infinite alternate;
  -webkit-animation: bubvert 2s linear infinite, bubhor 2s ease-in-out infinite alternate, bubsize 2s ease-in-out infinite alternate;
}

.bub5 {
  animation: bubvert 1.5s linear infinite, bubhor 1.8s ease-in-out infinite alternate, bubsize 1.5s ease-in-out infinite alternate;
  -webkit-animation: bubvert 1.5s linear infinite, bubhor 1.8s ease-in-out infinite alternate, bubsize 1.5s ease-in-out infinite alternate;
}

@-webkit-keyframes bubvert {
  from {
    bottom: 0px;
  }
  to {
    bottom: 100%;
  }
}
@keyframes bubvert {
  from {
    bottom: 0px;
  }
  to {
    bottom: 100%;
  }
}
@-webkit-keyframes bubhor {
  from {
    margin-right: -1%;
  }
  to {
    margin-right: 2%;
  }
}
@keyframes bubhor {
  from {
    margin-right: -1%;
  }
  to {
    margin-right: 2%;
  }
}
@-webkit-keyframes bubsize {
  from {
    width: 2%;
  }
  to {
    width: 6%;
  }
}
@keyframes bubsize {
  from {
    width: 5%;
  }
  to {
    width: 6%;
  }
}
.score {
  font-size: 1.5rem;
  color: yellow;
  text-align: left;
  bottom: 0;
  left: 0;
  margin: 1rem;
  position: absolute;
}

/* Titre Bikini Bottom */
#bikini {
  font-size: 2.4rem;
  -webkit-animation: 1s linear 0s infinite alternate glow;
  animation: 1s linear 0s infinite alternate glow;
  text-align: center;
  position: absolute;
  cursor: url("../cursor1.png"), pointer;
}

/* Effet neon */
@-webkit-keyframes glow {
  from {
    text-shadow: 1px 1px 2px coral, 0 0 1em pink, 0 0 0.2em orange;
  }
  to {
    text-shadow: 5px 4px 10px coral, 1 2 3em pink, 2 5 0.6em orange;
  }
}
@keyframes glow {
  from {
    text-shadow: 1px 1px 2px coral, 0 0 1em pink, 0 0 0.2em orange;
  }
  to {
    text-shadow: 5px 4px 10px coral, 1 2 3em pink, 2 5 0.6em orange;
  }
}
/* Effet doré du lien nav mobile*/
#club {
  display: none;
  -webkit-animation: 2s linear 0s infinite alternate shine;
  animation: 2s linear 0s infinite alternate shine;
}

@-webkit-keyframes shine {
  from {
    color: yellow;
  }
  50% {
    color: silver;
  }
  to {
    color: gold;
  }
}
@keyframes shine {
  from {
    color: yellow;
  }
  50% {
    color: silver;
  }
  to {
    color: gold;
  }
}
/* Popup ville */
.bikinfo {
  position: absolute;
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

#bikdesc {
  background-color: var(--spongeblue);
  padding: 5rem;
  color: white;
  width: 50%;
  text-align: center;
  display: none;
}

/* Friends */
.friend {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 2rem 0;
}

.friendpic {
  width: 25%;
  margin: 1rem;
  border-radius: 50px;
  border: 10px dotted yellow;
  align-self: baseline;
}

.frienddesc {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  text-align: left;
}

/* Tableau friends */
table {
  margin-bottom: 0.5rem;
}

table th, td {
  background-color: white;
  padding: 1rem;
  width: 33%;
}

.starf {
  width: 20%;
}

#secret {
  display: none;
  width: 33%;
}

.secretbutton {
  padding: 0rem 1rem;
  background-color: yellow;
  border: 5px dotted black;
  border-radius: 50px;
  cursor: url("../cursor1.png"), pointer;
  transition: background-color 0.2s ease-in-out;
  margin-bottom: 1rem;
}

.secretbutton:hover {
  background-color: coral;
  transition: background-color 0.2s ease-in-out;
}

.secretbutton:hover + #secret { /* Révèle le tableau caché */
  display: block;
}

audio::-webkit-media-controls-panel {
  background-color: yellow;
}

/* ASK */
#ask {
  margin-top: 6rem;
}

textarea {
  width: 50em;
}

#submitbutton {
  background-color: yellow;
  color: black;
  font-family: "SpongeBob Font Condensed", sans-serif;
  padding: 1rem;
  border-radius: 50px;
  cursor: url("../cursor1.png"), pointer;
}

#wikibob {
  width: 90%;
}

/* Spongeclub */
#fanh {
  margin: 3rem 0;
}

#rank {
  text-align: left;
  line-height: 2rem;
}

/* Footer */
footer {
  color: yellow;
  text-align: center;
  height: 4rem;
  position: relative;
  bottom: 0;
  margin-top: 6rem;
  background-color: rgb(19, 1, 102);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Responsive */
@media all and (max-width: 900px) {
  nav li {
    margin: 0 1rem;
  }
  nav a {
    font-size: 1.4rem;
  }
  nav a:hover {
    font-size: 1.5em;
  }
}
@media all and (max-width: 720px) {
  #bikini {
    font-size: 1.8rem;
  }
  textarea {
    width: 20em;
  }
  h1 {
    font-size: 1.6rem;
  }
  h2 {
    font-size: 1.2em;
  }
  h3 {
    font-size: 1em;
  }
  p, tr, form {
    font-size: 0.8em;
  }
  #club {
    display: inline-block;
  }
  .fanclub {
    display: none;
  }
  #link {
    display: block;
  }
  .navlist {
    background: var(--spongeblue);
    position: absolute;
    width: 100%;
    top: 5rem;
    left: 0;
    padding: 1em 0;
    transform: scaleY(0);
    transform-origin: center top;
    transition: all 0.3s ease;
    margin: 0;
  }
  ul.open {
    transform: scaleY(1);
  }
  ul li {
    text-align: center;
  }
  nav a:hover {
    font-size: 1.4rem;
  }
  .bubble {
    max-width: 15%;
    position: relative;
    opacity: 0.8;
  }
  .bub0 {
    display: none;
  }
  .bub1 {
    animation: bubvert 4s linear infinite, bubhor 1s ease-in-out infinite alternate, bubsize 2s ease-in-out infinite alternate;
    -webkit-animation: bubvert 4s linear infinite, bubhor 1s ease-in-out infinite alternate, bubsize 2s ease-in-out infinite alternate;
  }
  .bub2 {
    animation: bubvert 3s linear infinite, bubhor 0.5s ease-in-out infinite alternate, bubsize 3s ease-in-out infinite alternate;
    -webkit-animation: bubvert 3s linear infinite, bubhor 0.5s ease-in-out infinite alternate, bubsize 3s ease-in-out infinite alternate;
  }
  .bub3 {
    animation: bubvert 5s linear infinite, bubhor 1s ease-in-out infinite alternate, bubsize 1s ease-in-out infinite alternate;
    -webkit-animation: bubvert 5s linear infinite, bubhor 1s ease-in-out infinite alternate, bubsize 1s ease-in-out infinite alternate;
  }
  .bub4 {
    animation: bubvert 4.5s linear infinite, bubhor 2s ease-in-out infinite alternate, bubsize 2s ease-in-out infinite alternate;
    -webkit-animation: bubvert 4.5s linear infinite, bubhor 2s ease-in-out infinite alternate, bubsize 2s ease-in-out infinite alternate;
  }
  .bub5 {
    animation: bubvert 5.5s linear infinite, bubhor 1.8s ease-in-out infinite alternate, bubsize 1.5s ease-in-out infinite alternate;
    -webkit-animation: bubvert 5.5s linear infinite, bubhor 1.8s ease-in-out infinite alternate, bubsize 1.5s ease-in-out infinite alternate;
  }
  @-webkit-keyframes bubsize {
    from {
      width: 2%;
    }
    to {
      width: 6%;
    }
  }
  @keyframes bubsize {
    from {
      width: 12%;
    }
    to {
      width: 15%;
    }
  }
  .friend {
    flex-direction: column;
  }
  .friendpic {
    align-self: center;
    width: 50%;
  }
  .frienddesc {
    align-items: center;
  }
  #rank li {
    text-align: left;
  }
} /*# sourceMappingURL=styles.css.map *//*# sourceMappingURL=styles.css.map */