/* =========================
   GLOBAL RESET
========================= */

* {
    box-sizing: border-box;
  }
  
  

  body {
    margin: 0;
    font-family: 'Press Start 2P', monospace;
    color: #cfe8ff;
    min-height: 100vh;
    overflow-y: auto;   /* ENABLE vertical scroll */
  overflow-x: hidden; /* DISABLE horizontal scroll */
    background: radial-gradient(circle at center, #0b1a3a 0%, #02030f 70%);

  }
   
    p  { text-align: center;
        max-width: 900px;
        line-height: 1.8;
        /*width: 50%; /* == (400px + 20px + 20px) * .5 = 220px */
        height: 50%; /* == (160px + 30px + 30px) * .25 = 55px */
        /*margin: 5%; == (400px + 20px + 20px) * .05 = 22px
        padding: 5%; /* == (400px + 20px + 20px) * .05 = 22px 
        background: cyan;*/
        font-size: 1.2rem;
        margin: 60px auto;
        padding: 40px;
        background: rgba(5, 10, 30, 0.85);
        border: 2px solid #3b4fff;
        box-shadow: 0 0 30px rgba(60, 90, 255, 0.3); 

    }

    .pmusic {
      text-align: center;
      max-width: 900px;
        line-height: 1.8;
      /*width: 50%; /* == (400px + 20px + 20px) * .5 = 220px */
      font-size: 0.65rem;
      margin: 60px auto;
      padding: 40px;
      /* == (160px + 30px + 30px) * .25 = 55px */
      /*margin: 5%; == (400px + 20px + 20px) * .05 = 22px
      padding: 5%; /* == (400px + 20px + 20px) * .05 = 22px 
      background: cyan;*/
  
    }
  
    /* =========================
    NAVIGATION
  ========================= */

  .nav {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 30px;
    z-index: 20;
  }
  
  .nav a {
    color: #7aa2ff;
    text-decoration: none;
    font-size: 0.65rem;
    letter-spacing: 2px;
    border-bottom: 1px solid transparent;
  }
  
  .nav a:hover {
    border-color: #7aa2ff;
  }


  
  
  /* =========================
     SPACE BACKGROUND
  ========================= */
  
  .space-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    background: radial-gradient(circle at center, #0b1a3a 0%, #02030f 70%);
  }
  
  .stars,
  .stars2,
  .stars3 {
    position: absolute;
    inset: 0;
    background-repeat: repeat;
  }
  
  /* Bright primary stars */
  .stars {
    background-image:
      radial-gradient(4px 4px at 20% 30%, rgba(255,255,255,0.9), transparent 60%),
      radial-gradient(5px 5px at 80% 70%, rgba(200,220,255,0.9), transparent 65%),
      radial-gradient(3px 3px at 50% 50%, rgba(255,255,255,0.8), transparent 60%),
      radial-gradient(6px 6px at 10% 90%, rgba(180,200,255,0.9), transparent 70%),
      radial-gradient(4px 4px at 90% 10%, rgba(255,255,255,0.85), transparent 60%);
    background-size: 400px 400px;
    filter: drop-shadow(0 0 6px rgba(160,190,255,0.6));
    opacity: 0.9;
  }
  
  /* Secondary stars */
  .stars2 {
    background-image:
      radial-gradient(3px 3px at 40% 60%, rgba(150,180,255,0.6), transparent 65%),
      radial-gradient(4px 4px at 70% 20%, rgba(170,200,255,0.6), transparent 65%);
    background-size: 600px 600px;
    filter: drop-shadow(0 0 10px rgba(120,160,255,0.5));
    opacity: 0.6;
  }
  
  /* Distant stars */
  .stars3 {
    background-image:
      radial-gradient(2px 2px at 30% 40%, rgba(130,160,255,0.5), transparent 70%);
    background-size: 900px 900px;
    filter: drop-shadow(0 0 14px rgba(100,140,255,0.4));
    opacity: 0.4;
  }
  
  
  /* =========================
     SCANLINES
  ========================= */
  
  .scanlines {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.03),
      rgba(255,255,255,0.03) 1px,
      transparent 1px,
      transparent 4px
    );
    z-index: 10;
  }
  
  
  /* =========================
     TITLE & MENU
  ========================= */
  
  .title {
    text-align: center;
    font-size: 5rem;
    padding-top: 80px;   /* increase this */
    padding-bottom: 20px;
    color: #00ff66 ;
    /* color: #7aa2ff; */
    /* #00ff66 */
    text-shadow:
      0 0 10px #5b7cff,
      0 0 20px #5b7cff;
  }
  
  .menu {
    display: flex;
    justify-content: center;
    gap: 30px;
    background: #1a1f3a;
    padding: 15px;
    border-top: 2px solid #3b4fff;
    border-bottom: 2px solid #3b4fff;
    font-size: 1.3rem;
  }
  
  .menu span {
    color: #9fb6ff;
  }
  
  
  /* =========================
     TERMINAL
  ========================= */
  
  .terminal {
    text-align: center;
    max-width: 900px;
    margin: 40px auto;
    padding: 40px;
    background: rgba(5, 10, 30, 0.85);
    border: 2px solid #3b4fff;
    box-shadow: 0 0 30px rgba(60, 90, 255, 0.3);
  }
  
   #output {
    white-space: pre-wrap;
    font-size: 1.2rem;
    line-height: 1.8; */
   }

   /* .input-line {
    display: flex;
    margin-top: 20px;
  }                     
  
  .input-line span {
    margin-right: 10px;
  } */
  
  input {
    background: transparent;
    border: none;
    color: #00ff66;
    font-family: inherit;
    font-size: 0.7rem;
    outline: none;
    width: 100%;
  } 
  
  
  /* =========================
     ANIMATIONS
  ========================= */
  
  @keyframes drift {
    from { transform: translateY(0); }
    to   { transform: translateY(-1000px); }
  }
  
  @keyframes twinkle {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
  }
  
  /* Apply animations */
  .stars {
    animation:
      drift 160s linear infinite,
      twinkle 6s ease-in-out infinite;
  }
  
  .stars2 {
    animation:
      drift 220s linear infinite,
      twinkle 9s ease-in-out infinite;
  }
  
  .stars3 {
    animation:
      drift 300s linear infinite,
      twinkle 12s ease-in-out infinite;
  }
  
  /* =========================
   ACTIVE MENU STATES
========================= */

.page-home .menu a[href="home.html"],
.page-music .menu a[href="music.html"],
.page-about .menu a[href="about.html"],
.page-contact .menu a[href="contact.html"] {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(180, 200, 255, 0.9);
  border-bottom: 1px solid #ffffff;
}


/* =========================
   COUNTDOWN
========================= */

.countdown {
    text-align: center;
    margin-top: 100px;
    margin-bottom: 20px;
    font-size: 2rem;
    color: #9fb6ff;
    text-shadow: 0 0 6px rgba(120,160,255,0.6);
  }
  
  #countdown-label {
    display: block;
    margin-bottom: 10px;
    opacity: 0.8;
  }
  
  #countdown-timer {
    
    font-size: 3rem;
    letter-spacing: 3px;
    margin-top: 50px;
    color: #ffffff;
  }
  #countdown {
    display: flex;
    gap: 20px;
    font-family: monospace;
  }
  
  .time-block {
    text-align: center;
  }
  
  .label {
    display: block;
    font-size: 0.7rem;
    opacity: 0.6;
    letter-spacing: 1px;
  }
  
  .time-block span:last-child {
    font-size: 2rem;
  }
  
  /* =========================
   SOCIAL ICON
========================= */
/* =========================
   SOCIAL ICON GROUP
========================= */

.social-icons {
  position: fixed;
  bottom: 20%; 
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 26px;
  z-index: 30;
  opacity: 0.8;
}

.social-icons a {
  display: inline-flex;
}

.social-svg {
  width: 100px;
  height: 100px;
  fill: #7aa2ff;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.social-icons a:hover .social-svg {
  transform: scale(1.2);
  filter: drop-shadow(0 0 8px rgba(120,160,255,0.9));
}

/* =========================
   vinyl
========================= */
.disk {
width: 150px;
height: 150px;
/* object-fit: cover; */
-webkit-mask-image: url(https://i.postimg.cc/3RYpcLqS/14.png);
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
animation-duration: 3s;
animation-iteration-count: infinite;
}

.disk {
        animation-name: spin;
        animation-timing-function: linear;
    }
    @keyframes spin {
        from { transform: rotate(0deg) }
        to { transform: rotate(360deg) }
    }

    /* =========================
   vinyl with sleeve
========================= */

*{margin:0;padding:0;box-sizing:border-box;}
html,body {
	height: 100%;
	background-image: url('http://s3.amazonaws.com/eyeworksgroupcdn/wp-content/uploads/2015/06/12043432/Silver-Blur-Background-Wallpaper.jpg');
	background-size: cover;
	overflow: hidden;
}
/* #wrap {
	background-color: rgba(251, 250, 250, 0.8);	
} */
#album {
	position: relative;
	top: 80%;
	left: 40%;
  /* transform: translate(-50%, -50%); */
	height: 20vw;
	width: 20%;
	max-height: 75%;
	max-width: 75vh;
}
#cover {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-image: url('images/blue.jpg');
	background-size: 100% 100%;
	box-shadow: 5px 0 20px 0 rgba(0,0,0,0.6),
	            inset 0 0 10px 5px rgba(255,255,255,0.2),
			  inset 0 0 4px 2px rgba(0,0,0,0.2);
	border-radius: 4px;

}
#vinyl {
		position: absolute;
		top: 2.5%;
		left: 2.5%;
		z-index: 0;
		width: 95%;
		height: 95%;
		display: block;
		background-image: url('https://gallery.yopriceville.com/var/resizes/Free-Clipart-Pictures/Music-PNG/Gramophone_Vinyl_LP_Record_PNG_Transparent_Clip_Art_Image.png?m=1462983196');
		background-size: 106% 106%;
		background-position: center;
		box-shadow: 0 0 20px 4px rgba(0,0,0,0.6);
		border-radius: 50%;
		content: '';
		animation: 5s linear spinThat infinite, 1s ease-out getOut 1s forwards;
		/* &::before {
			position: absolute;
			top: 2.5%;
			left: 2.5%;
			z-index: 10;
			width: 95%;
			height: 95%;
			background-image: url('http://www.designresourcebox.com/ths/diverse/blacktextures/82267467.jpg');
			background-size: 100% 100%;
			border-radius: 50%;
			mix-blend-mode: screen;
			opacity: 0.3;
			content: '';
		} */
		/* #print {
			position: absolute;
			top: 33%;
			left: 33%;
			height: 34%;
			width: 34%;
			box-shadow: inset 0 0 0 5px rgba(150,150,150,0.5);
			background-image: url('http://assets.teamrock.com/image/14d29742-c6f7-43f6-bbe1-6bf7b3b34c6f?w=800');
	background-size: cover;
			border-radius: 50%;
		} */
}

@keyframes getOut {
	0% {
		left: 0;
	}
	100% {
		left: 50%;
	}
}
@keyframes spinThat {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.album-text {
  margin-top: 40px;
  text-align: center;
  top: 33%;
	left: 33%;
  font-size: 12px;
  line-height: 1.8;
  color: #cfe8ff;

}

/* clickable record link */
.cover-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 5; /* above vinyl */
}

#cover {
  pointer-events: none; /* let link handle click */
}

.cover-link,
.cover-link:visited,
.cover-link:hover,
.cover-link:active {
  color: inherit;          /* removes menu color */
  text-decoration: none;  /* no underline */
}

.cover-link:hover #cover {
  box-shadow:
    0 0 12px rgba(100, 180, 255, 0.6),
    0 0 24px rgba(100, 180, 255, 0.3);
}

.album-link {
  text-decoration: none;
}

.album-link h2 {
  color: #cfe8ff;          /* your desired color */
  font-size: 20px;
  text-shadow: 0 0 8px rgba(150, 200, 255, 0.4);
}

/* Override menu hover effects */
.album-link h2:hover {
  color: #7fffd4;
}


/* * {
  outline: 1px solid red;
} */