/*** 

This stylesheet has seen a minor revamp and now has different default padding and looks. The old appearance can be used via the "old" class.

***/

body {
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	background-color: #556B2F;
	text-align: center; /*Text is centered by default.*/
	background-size: cover;
	background-attachment: fixed;
  background-position:center;
  display: flex;
}

li {
  text-align: left; /*You can change this, but centered lists can look kind of weird.*/
  margin-left: 20px
  }

h1 {
  text-align: center;
  font-size: 20px;
  letter-spacing:4px;
  }
  
h2 {
  text-align: center;
  font-size: 19px;
  letter-spacing:4px;
  }
  
/*Use as the class of spans or divs you want to have normal left-aligned text.*/
/*You can combine classes by putting them together with a space, i.e. <div class="box left"> will be a div using "box" and "left" styles.*/
.left {
  text-align:left;
  }
  
.pfp {
  float: left;
  position: sticky;
  width: 100px;
  height: 100px;
  margin-top: 20px;
  border: 2px solid black;
}

/*A box that stays at a fixed height and scrolls when content gets too long.*/
.box {
  margin: 0 auto;
  margin-right: -20px;
	overflow: auto;
	background-color: #FFC5D3;
	border: 2px solid #000;
	width: 32em;
	height: 25em;
	margin-top: 90px;
	padding: 3.5em 4em;
}

.boxinha {
  float: right;
  margin: 0 auto;
  margin-left: 30px;
	background-color: #FFC5D3;
	border: 2px solid #000;
	width: 19em;
	height: 29em;
	margin-top: 90px;
	overflow: auto;
	padding: 10px;
}

.boxinha2 {
  margin: auto;
  margin-left: -535px;
  margin-bottom: 20px;
	background-color: #FFC5D3;
	border: 2px solid #000;
	width: 19em;
	height: 6em;
	overflow: auto;
	padding: 10px;
}

.container {
  border: 15px outset #CF598F;
  line-height: 17px;
  font-size: 14px;
  font-family: DejaVu Sans Mono, monospace;
  background-image: url(https://images.squidge.org/images/2026/08/22/f1141edf46b06052939f8fa1c890feb6.gif);
  background-size: cover;
  padding: 1em;
  border-radius: 40px 40px 40px 40px;
  outline: 3px solid pink;
  outline-offset: -15px;
  height: 120px;
  width: 120px;
  margin: 0 auto 15px;
  overflow: scroll;
}

.container::-webkit-scrollbar {
  -webkit-appearance: none;
  overflow-y: hidden;
  width: 100%;
}

  
/*Prevent overflow of large images.*/
.box img, .box-noscroll img, .box-round img {
  max-width: 100%;
  height: auto;
  }
  
  /* Add a black background color to the top navigation */
.topnav {
  color: black;
  top: 0;
  margin-top: -20px;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: none;
  color: black;
  background-color: pink;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: inline-block;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #e1275f;
  color: white;
}

img {
   max-width:100%; 
  }
  
  .screens {
   text-align: center;
  }

  @media only screen and (min-width: 641px) {

   .screens img {
    width: 191px;
    margin-right: 2px;
   }

  }

  @media only screen and (max-width: 640px) {

    .screenbox img {
      display:block;
      margin: 10px 0;
    }
    
  }