@font-face {
  font-family: VCR;
  src: url(fonts/VCR_OSD_MONO_1.001.ttf);
}
@font-face{
	font-family: IBM_VGA;
  src: url(fonts/Web437_IBM_VGA_8x14.woff);
}
@font-face{
	font-family: Ubuntu;
	src: url(fonts/UbuntuMono-R.ttf);
}

body{
	background-image: url("pictures/teabg3.webp");
		background-size: 100%;
		background-attachment: fixed;
		backdrop-filter: blur(10px) brightness(80%);
	max-width: 1000px;
	margin:auto;
	font-family:Ubuntu,monospace;
	color:white;
	font-size:18px;
	padding:14px;


	a:link{color: orange;}
	a:visited{color:orange;}
	a:hover{color: darkorange;}
}
.title{
	font-size: clamp(0px, 1vw, 20px);
	font-weight: normal;
	text-align: center;
	background-color: rgb(3,51,2);
	border-radius: 15px;
	border: 2px dashed darkseagreen;
	color:darkseagreen;
	margin:20px;
}
article{
	width:auto;
	justify-content: center;
	border: 4px double white;
	padding:20px;
	margin:15px;
	background-color:rgba(3,51, 2, 0.7);
	  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(3px);
}
pre{font-family: IBM_VGA}

.linkbox{
	font-family: IBM_VGA;
	border: 4px double magenta;
	background-color:rgba(83, 14, 101, 0.7);
	padding:10px;
	margin:10px;
	a:link{color: magenta;}
	a:visited{color:magenta;}
	a:hover{color: darkmagenta;}
}
.linkbox_wip{
	font-family: IBM_VGA;
	border: 4px double darkorange;
	background-color:rgba(139, 64, 0, 0.7);
	padding:10px;
	margin:10px;
	a:link{color: orange;}
	a:visited{color:orange;}
	a:hover{color: darkorange;}
}

.flex{
	display:flex;
}
.buttonzone{
	text-align: center;
}
.linkbuttons{text-align: center}
.linkbuttons img{
	height: 31px;
	width: auto;
}

/* ---- MUSIC PLAYER ---- */
.musicplayer{
	display: ;
}
.controls{
	display: ;
}
.seeking{
	display: flex;
}
.musicbuttons{
	margin: auto;
	display: flex;
  justify-content: space-between;
}
.volume{
	margin: auto;
	display: flex;
  justify-content: center;
}
/*----------------*/

button{
	font-family: IBM_VGA;
	font-size: 16px;
	padding:16px;
	margin:16px;
	width:250px;
}

.musicbutton {
  position: relative;
  border: 4px double white;
  font-family: IBM_VGA;
  text-shadow: 2px 2px #000000;
  font-size: 18px;
  padding: 18px;
  margin: 16px;
  width: 250px;
  height:100px;
  color: white;
  overflow: hidden;
  background: none; /* remove default background */
  cursor: pointer;
  top: 0;
}

/* blurred background image using CSS variable */
.musicbutton::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg) center/cover no-repeat;
  filter: blur(3px);
  transform: scale(1.1); /* prevent visible blur edges */
  z-index: -2;
}

/* optional dark overlay for better text contrast */
.musicbutton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: -1;
}
@keyframes wing1 {
  from {left:80px; top:250px;transform: rotate(45deg);}
  to {left:80px; top:250px;transform: rotate(5deg);}
}
@keyframes wing2 {
  from {left:40px; top:310px;transform: rotate(20deg);}
  to {left:40px; top:310px;transform: rotate(-20deg);}
}
@keyframes wing3 {
  from {left:80px; top:370px; transform: rotate(-10deg);}
  to {left:80px; top:370px; transform: rotate(-45deg);}
}
@keyframes wing4 {
  from {right:360px; top:250px;transform: rotate(-45deg) scaleX(-1);}
  to {right:360px; top:250px;transform: rotate(-5deg) scaleX(-1);}
}
@keyframes wing5 {
  from {right:320px; top:310px;transform: rotate(-20deg) scaleX(-1);}
  to {right:320px; top:310px;transform: rotate(20deg) scaleX(-1);}
}
@keyframes wing6 {
  from {right:360px; top:370px; transform: rotate(10deg) scaleX(-1);}
  to {right:360px; top:370px; transform: rotate(45deg) scaleX(-1);}
}

.wing{
	position:absolute;
	transform-origin: 294px 78px;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-direction:alternate;
	animation-timing-function: ease-in-out;
	z-index: 2;
}
h1{
	font-family: IBM_VGA;
	font-weight: normal;
	text-align:center;
	width:100%;
}

li {
	list-style-type: '+ ';
}

p{
	width:100%;
}