@font-face {
    font-family: Courgette;
    src: url('/fonts/Courgette-Regular.ttf');
    font-display: swap;
  }
  
  html {
    scrollbar-color:  #ff99cc #ffbcd9;
    scrollbar-width: auto;
  }
    
  ::-moz-selection {
    color: white;
    background: #fc8eac;
  }
              
  ::selection {
    color: white;
    background: #fc8eac;
  }

  body {
	   font-family: 'Courgette';
	   margin: 40px auto;
	   background-image: url('bg1.png');
	   background-color: #ff99cc;
	   color: #ffb3d9;
	   font-size: 1.3125em;
	   background-size: 35%;
	   background-repeat: repeat;
	   background-attachment: cover;
	    
  }
   
  #flex {
    display: flex;
  }
     
  h1 {
	  font-size: 2.5em;
    color: #ffb3d9;
	  text-align: center;
  }
   
  h2 {
    font-size: 2.5em;
	  color: #ffb3d9;
	  text-align: center;
 	  margin-top: 20px;
  }
    
  p.a {
    font-size: 1.25em;
    color: #ffffff;
	  text-align: center;
  }
  
  p.b {
    font-size: 1.25em;
    color: #ffb3d9;
	  text-align: left;
	  text-indent: 40px;
  }
   
  p.c {
    font-size: 2.1875em;
    color: #ffb3d9;
	  text-align: center;
	  margin-top: 10px;
  }
   
  a.one:link {
     text-decoration: underline;
     color:#ffb3d9;
  }
   
  a.one:visited {
     text-decoration: underline;
     color:#ffb3d9;
  }
   
	a:link {
    text-decoration: none;
    color: #000000;
  }

  a:visited {
  	text-decoration: none;
  	color: #000000;
  }	
	
	a:hover {
    opacity: 0.7;
    cursor: url('/images/hello kitty/Hello Kitty Pointer 2.png'), default;
  }
  
  a .ff-container.ff-active .ff-image,
    a .ff-container.ff-inactive .ff-canvas.ff-canvas-ready {
    transition: none !important;
    -o-transition: none !important;
    -moz-transition: none !important;
    -webkit-transition: none !important;
  }
                 
  .ff-container.ff-responsive {
    width: 88px !important;
    height: 36px;
  }
        
  .ff-container.ff-responsive .ff-image,.ff-container.ff-responsive .ff-canvas {
    width: 88px !important;
    height: 31px;
  }
              	
  a:hover img,
    a:hover .ff-container.ff-active .ff-image,
    a:hover .ff-container.ff-inactive .ff-canvas.ff-canvas-ready {
    opacity: .7 !important;
  }
              
  a:hover .ff-container.ff-inactive .ff-image {
    opacity: 0 !important;
  }  
      
  .box {
	   max-height: 3050px;
	   width: 670px;
	   background-color: #ffffff;
	   border: 10px solid #ffb3d9;
	   border-radius: 20px;
	   margin-left: 450px;
	   margin-top: 50px;
	   margin: 40px auto;
	   padding: 10px;
	   overflow: hidden;
  }
  
  .marquee_replacement{
	  width: fit-content;
	  height: fit-content;
	  animation: marqmoving 28s linear;
	  display: flex;
	  flex-direction: row;
	  align-items: baseline;
	  flex-wrap: nowrap;
	  animation-iteration-count: infinite;
	  gap: 0.3rem;
  }
	
  .marquee_replacement:hover{
	  animation-play-state: paused;
  }
	
  @keyframes marqmoving {
	   0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
 }
  
  details {
    background-color: #ffb3d9;
    padding: 10px;
    margin: 20px 0;
    border-radius: 5px;
    margin-bottom: 5px;
    color: #ffffff;
  }

  summary {
    font-family: Courgette;
    font-size: 25px;
	  text-align: center;
		list-style: none;
  }