body {
  background-image: url("/images/background/twilight1.jpeg");
  background-attachment: fixed;
  font-family:"ms pgothic";
  background-size: 140%;
  background-repeat: no-repeat;
  background-position: left;
  color: #140228;
}

h1 {
  text-align: right;
  background-color: #303054;
  color:  white;
}

h3 {
  font-size: 16px;
  background-color: #cab1d3;
}


 .title {
  width: 97%;
  border-bottom: dotted black 2px;
  text-align: right;
  padding: 0 .25em .5em .25em;
  margin-top: -.5em;
  height: 1em;
  font-weight: bold;
}

main {
  width: 26em;
  height: 40em;
  border: double black 2px;
  border-radius: 35px 0px 10px 10px;
  position: absolute;
  left: 18em;
  top: 1em;
  background-image: url("/images/background/greendots.jpg");
  background-size: 15em;
  padding: 0;
}

header {
  width: 25.1em;
  border-radius: 35px 0px 0px 10px;
  border-bottom: dotted black 2px;
  padding: .25em 0.7em 0 .25em;
  background-image: url("/images/girlfriend/cloudedstars.jpg");
  background-size: 25em;
  height: 5em;
}

.description {
  width: 100%;
  border-bottom: dotted black 2px;
  padding: 0 0 1em 0;
  overflow: hidden;
  background-image: url("/images/girlfriend/greentexture.jpg");
  background-size: 10em;
  font-weight: bold;
  height: 1em;
  text-align: center;
}

.portrait {
  float: left;
  width: 9.5em;
  height: 9.4em;
  padding: 0;
  margin-right: 1em;
  
}

.portrait img {
  width: 9.5em;
  float: left;
  margin:0;
}


.about {
  border: dotted black 2px;
  width: 24.75em;
  height: 9.5em;
  margin-top: .5em;
  margin-left: .5em;
  float: left;
  background-image: url("/images/girlfriend/clovermemo.jpg");
  background-size: 13.75em;
  padding: 0;
  margin-bottom: .5em;
  overflow: scroll;
}

.about ul {
  width: 21.5em;
  margin-top: .5em;
  list-style-type: none;
}

.gallery {
  width: 24.75em;
  height: 19.9em;
  float: left;
  border: dotted black 2px;
  background-image: url("/images/girlfriend/purpleflowerfabric.jpg");
  background-size: 16em;
  margin: .5em;
  padding: 0;
  overflow: scroll;
}

.gallery img {
  height: 8.5em;
  float: left;
}

.strip {
  width: 8.5em;
  position: absolute;
  left: 7.5em;
  top: 15em;
}

/* cards */

.cards-container {
  width: 12em;
  position: absolute;
  left: 45em;
  top: 24.5em;
  border: dotted black 2px;
  height: 16.7em;
  overflow: hidden;
}

.cover-card:hover {
opacity: 0;
}

.cards-img {
 height: 16.7em;
}

.cards-carousel {
  width: fit-content;
  height: 16.7em;
  animation: cards-carousel 40s linear;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  flex-wrap: nowrap;
  animation-iteration-count: infinite;
  gap: 0.3rem;
}

.cards-carousel:hover {
  animation-play-state: paused;
}

@keyframes cards-carousel {
  from{transform: translate(13.5em); }
  to{transform: translate(-73em); }
}
/* Blinkie carousel */

.blinkie {
  height: 1.2em;
  float: left;
  margin-right: -.5em;
}

.blinkie-container {
  width: 100%;
  height: 1.2em;
  overflow: hidden;
}

.blinkie-carousel-container{
width: fit-content;
height: 1.2em;
animation: blinkie-carousel 29s linear;
display: flex;
flex-direction: row;
align-items: baseline;
flex-wrap: nowrap;
animation-iteration-count: infinite;
gap: 0.3rem;
}

.blinkie-carousel-container:hover{
  animation-play-state: paused;
}
@keyframes blinkie-carousel {
  from{transform: translate(26.5em); }
  to{transform: translate(-80em); }
}