@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Telugu:wght@700&family=Poppins:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');

body {
	background-image: url('https://lucienzeal.neocities.org/shrines/glitter-background.png');
  background-color: #fffbed;
  background-size: cover;
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
  color: #382705;
}

hr {
  margin: 4px;
  border: 0;
  height: 1px;
  background-color: #382705;
}

b {
  font-weight: 600;
}

a {
	color: #382705;
  font-weight: normal;
}

a:hover {
	color: #e0aa3e;
}

::selection {
  background: rgb(250,228,152,0.2);
  color: #e0aa3e;
}

.underline {
    text-decoration: underline;
}

.container {
  margin: auto;
	width: 1000px;
  border: solid #382705 1px;
	box-shadow: 0 5px 10px 0 rgba(82,58,20,0.75);
}

.header {
  position: relative;
  height: 150px;
	background: rgb(149,0,0);
	background: url('https://lucienzeal.neocities.org/shrines/glitter-header-image.png'), url('https://lucienzeal.neocities.org/shrines/glitter-header-image.png'), linear-gradient(0deg, rgba(146,111,52,1) 0%, rgba(224,170,62,1) 60%, rgba(250,243,152,1) 100%);
  background-position: bottom center;
  background-repeat: no-repeat;
  border-bottom: solid #382705 1px;
}

.header:after {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 180px;
  background: rgba(0,0,0,0.2);
  padding: 5px;
  color: #f9f2d6;
  font-size: 80%;
  content: "Left to right: James, Nicky, Richey, Sean [©BBC2, 1992]";
}

.main {
	display: flex;
}

.left {
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 930px;
  width: 200px;
  background: url('https://lucienzeal.neocities.org/shrines/glitter-leopard.jpg');
  background-size: auto 100%;
  background-position: 50%;
  padding: 10px;
  color: white;
}

.left img {
  width: 100%;
  filter: drop-shadow(0 0 5px black);
}

.right {
  width: 800px;
  background: white;
  padding: 5px;
}

.right .row {
  display: flex;
  gap: 5px;
}

.right .box {
  border: solid #382705 1px;
  margin: 0 0 5px 0;
}

.right .title {
	border-bottom: solid #382705 1px;
	background: rgb(149,0,0);
	background: url('https://i.postimg.cc/rmdXzL6p/glitter-header-26px.png'), url('https://i.postimg.cc/rmdXzL6p/glitter-header-26px.png'), linear-gradient(0deg, rgba(146,111,52,1) 0%, rgba(224,170,62,1) 60%, rgba(250,243,152,1) 100%);
  background-repeat: repeat;
	padding: 7px 0 2px 10px;
  color: #fff;
  text-shadow: rgb(56, 39, 5) 1px 0px 0px, rgb(56, 39, 5) 0.540302px 0.841471px 0px, rgb(56, 39, 5) -0.416147px 0.909297px 0px, rgb(56, 39, 5) -0.989993px 0.14112px 0px, rgb(56, 39, 5) -0.653644px -0.756803px 0px, rgb(56, 39, 5) 0.283662px -0.958924px 0px, rgb(56, 39, 5) 0.96017px -0.279416px 0px;
  text-transform: uppercase;
  font-family: "Noto Serif Telugu", serif;
}

.right .box-inner {
  margin: 4px;
  outline: solid white 3px;
  border: solid #382705 1px;
	background: rgb(255,255,255);
	background: linear-gradient(180deg, rgba(250,228,152,1) 0, rgba(255,255,255,1) 25px);
  padding: 7px;
}

.right .box-inner p {
  margin: 0;
  text-align: justify;
  text-indent: 5px;
  font-size: 90%;
  line-height: 110%;
}

.right #members .box-inner p {
  text-indent: 0;
}

.popup {
  position: relative;
  display: inline-block;
  text-decoration: underline;
  text-decoration-color: #f00;
}

.popup .popuptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.2s;
}

.popup .popuptext img {
  height: 100px;
  width: 100px;
}

.popup:hover .popuptext {
  visibility: visible;
  opacity: 1;
}

.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.popup:hover .popuptext {
  visibility: visible;
}

.screenreader {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}