@import url('https://fonts.googleapis.com/css2?family=Epunda+Slab:ital,wght@0,300..900;1,300..900&display=swap');

html, body {
  overflow-x: hidden;
  width: 100%;
}

/* ESTILO HEADER */
header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 60px;
  padding-right: 2rem;
  top: 0;
  left: 10;
  width: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  position: fixed;

}

/* HEADER APÓS SCROLL */
header.scrolled {
  background-color: rgba(0, 0, 0, 0.85);
  padding: 5px 60px;
  backdrop-filter: blur(6px);
}

header h1 {
  color: white;
  font-size: 28px;
  transition: font-size 1s ease;
}

/* H1 APÓS SCROLL */
header.scrolled h1 {
  font-size: 22px;
}

header nav a {
  color: white;
  text-decoration: none;
  margin-left: 20px;
  transition: color 0.3s;
}

header nav a:hover {
  color: #ff5252;
}

/* ESTILO MUSCLE FAN */
.logo a {
  font-size: 20px;
  color: #ff2b2b;
  margin: 0;
  text-decoration: none;
  font-weight: bold;
  position: relative;
  left: 10px;
}

.logo a:visited {
  color: #ff0000;
}

.logo a:hover {
  color: #ffffff;
}

/* LOGO GITHUB */
.github img {
  width: 35px;
  height: 35px;
  margin-left: 15px;
  filter: invert(1);
  transition: transform 0.3s ease, filter 0.3s ease;
  cursor: pointer;
  position: relative;
  top: 10px;
}

.github img:hover {
  transform: scale(1.2);
  filter: invert(47%) sepia(100%) saturate(7433%) hue-rotate(346deg) brightness(100%) contrast(105%);
}

/* INÍCIO, MÚSCULOS, SOBRE */
.nav a {
  color: #ff0000;
  transition: 0.3s;
  margin-right: 2rem;
  font-size: 13px;
  text-decoration: none;
  font-weight: bold;
  position: relative;
  top: -10px;
}

.nav a:visited {
  color: #ff0000;
}

.nav a:hover {
  color: #ffffff;
}

/* ESTILO DO H1, P */
.info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
  padding: 90px 60px;
}

.info h1 {
  font-size: 48px;
  margin-bottom: 10px;
  color: #bbb;
  position: relative;
  top: -25px;
}

.info p {
  color: #bbb;
  font-size: 20px;
  text-align: justify;
  position: relative;
  top: -15px;
}

/* ESTILO IMAGEM */
.illustration img {
  width: 280px;
  filter: drop-shadow(0 0 5px #ff2b2b);
}

/* ESTILO H2,  */
.musculares {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
  padding: 90px 60px;
  background-color: #6b6a6a;
  min-height: 150vh;
  width: 100%;
  box-sizing: border-box;
  
}

.musculares h2 {
  font-size: 40px;
  color: #111111;
  margin-bottom: 20px;
  position: relative;
  top: -135px;
}

.musculares p {
  color: #000000;
  font-size: 20px;
  text-align:left;
  position: relative;
  top: -130px;
  
}

.corpo {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  left: 200px;
  top: -120px;
}


p{
  color: #ffffff;
  font-size: 15px;
}

body{
  margin: 0;
  background-color: #111111;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items:center;
  font-family: "Epunda Slab", serif;
  font-weight: 400;
  opacity: 1;
  transition: opacity 0.5s ease;
}

svg {
    width: 500px;
    height: auto;
    display: flex;
    position: relative;
    top: 130px;
    left: -200px;
    scale: 1.1;
    filter: drop-shadow(0 0 5px #ff2b2b);
}

.muscle {
  fill: #ffffff;
  stroke: #000000;
  stroke-width: 1px;
  transition: fill 0.7s;
  cursor: pointer;
}

.zero-interaction .no-interaction {
  fill: #fd7d14;
  stroke: #000000;
  stroke-width: 0px;
}

.front-side{
  /* esquerda, baixo */
  transform: translateX(-45%) translateY(-100px) scale(4.5);
}

.back-side{
  transform: translateX(2%) translateY(30px) scale(3.6);
}

.chest:hover .muscle{
  fill: red;
}

.shoulder:hover .muscle{
  fill: red;
}

.quadriceps:hover .muscle{
  fill: red;
}

.abs:hover .muscle{
  fill: red;
}

.calf:hover .muscle{
  fill: red;
}

.trapezius:hover .muscle{
  fill: red;
}

.biceps:hover .muscle{
  fill: red;
}

.forearm:hover .muscle{
  fill: red;
}

.triceps:hover .muscle{
  fill: red;
}

.adductor:hover .muscle{
  fill: red;
}

.back:hover .muscle{
  fill: red;
}

.gluteus:hover .muscle{
  fill: red;
}

.abductor:hover .muscle{
  fill: red;
}

.hamstring:hover .muscle{
  fill: red;
}

details {
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 8px;
  background: #1a1a1a;
  color: white;
}

summary {
  cursor: pointer;
  font-weight: bold;
  color: #ff2b2b;
}

details[open] summary {
  color: #fff;
}