@import url('https://fonts.googleapis.com/css2?family=Gaegu&family=Sniglet:wght@400&display=swap');
* { 
	box-sizing: border-box;
}
body {
	background-image: url('/images/bg/pinkdots.gif');
	padding: 10px;
	font-family: "Gaegu",'Arial', sans-serif;
	color: black;
	font-size: 18px;

}


.container {
	max-width: 55rem;
	max-height: 550px;
	margin: 5vw auto 12px auto;
	background-color: #fae8fa;
	background-image:  repeating-radial-gradient( circle at 0 0, transparent 0, #fae8fa 9px ), repeating-linear-gradient( aliceblue, aliceblue);
	border: 3px ridge hotpink;
	outline: 6px solid silver;
	outline-offset: 4px;
	padding: 25px;
	border-radius: 5px;
overflow-y:auto;


}

header {
background: #de2c70;
background: linear-gradient(38deg, rgba(222, 44, 112, 1) 0%, rgba(222, 146, 204, 1) 100%);
	width: 100%;
	height: 80px; /* change banner height here*/
	border: 2px ridge grey;
	position: relative;
}
header span {
	font-size: 1.6rem;
	font-family: "Sniglet", Arial, Helvetica, sans-serif;
	position: absolute;
	bottom: 0;
	right: 10px;
	margin: 10px;
	color: aliceblue;

}
.notice {
  background: #ecf9f9;
  font-size: 0.9em;
  border: 1.5px #6ecedb dashed;
  padding: 1rem;
  border-radius: 5px 5px 5px 5px;
    
}
a:link {
  color: teal;
text-decoration: none
}

h1, h2, h3, h4, h5 {
    font-family: "Sniglet","Arial", sans-serif;
	  color: #c52172;
}

footer {
	text-align: center;
	margin-bottom: 5vw;
	font-size: 0.9em;
}

/* prevents overflow on smaller screens */
img { max-width: 100%; }

/* ===== Scrollbar CSS ===== */
  /* Firefox */
  .container{
    scrollbar-width: auto;
    scrollbar-color: #ff79ac aliceblue;
  }

  /* Chrome, Edge, and Safari */
  .container::-webkit-scrollbar {
    width: 24px;
  }

   .container::-webkit-scrollbar-track {
    background: aliceblue;
  }

   .container::-webkit-scrollbar-thumb {
    background-color: #ff79ac;
    border-radius: 10px;
    border: 3px solid #ffffff;
  }