/* Variables are used like this: var(--text-color) */
:root {
  /* Background Colors: */
  --background-color: #eeeeee;
  --content-background-color: #ffffff;
  --sidebar-background-color: linear-gradient(to bottom, #C5EBFC 0%, #9491E2 100%);


  /* Text Colors: */
  --text-color: #white;
  --sidebar-text-color: #white;
  --link-color: #d961dc;
  --link-color-hover: #d50bb1;

  /* Text: */
  --font: Georgia, serif;
  --heading-font: Verdana, sans-serif;
  --font-size: 15px;

  /* Other Settings: */
  --margin: 16px;
  --padding: 24px;
  --border: 4px solid #bd89da;
  --round-borders: 18px;
  --sidebar-width: 200px;
}


body {
  background-color: cornflowerblue;
  color: black;
  font-family: Verdana;
}

body {
background-image: url('PolybiusAssets/skyblue.jpg');
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover
}
.container {
  border: 9px double black;
  margin: auto;
  width: 884px;
  height: 665px;
  position: relative;
  padding: 5px;
  z-index: 4;
}
.container-one {
  border-width: 1px;
  border-style: solid;
  border-color: white;
  background-image: url('PolybiusAssets/dark.avif');
  background-repeat: repeat;
  width: 880px;
  position: relative;
  left: 1px;
  height: 170px;
  box-shadow: 0 0 8px 8px white inset;
  z-index: 5;

  z-index: 4;
}

#name
{
font-family: kawaii stitch;
  font-size: 2em;
  -webkit-text-stroke: 1px white;
  color: white;
  margin-top: 60px;
  margin-left: 10px;
}

.outer
{
border-width:7px;
border-style:solid;
border-image: url("https://foollovers.com/mat/menu05/51a-none.gif") 9 fill round;    
border-radius:15px;
width: 115px;
height: 115px;
margin-top: 10px;
}

.inner
{
width: 100%;
  height: 100%;
  background-image: url('https://f2.toyhou.se/file/f2-toyhou-se/characters/15870452?1750915603');
  background-size: cover;
}
.whitecloudybox {
height: 140px;
width: 40%;
border: 10px solid transparent;
box-sizing: border-box;
border-image: url(https://i.postimg.cc/QM9dMFhq/cloud.png) 50 round;
float: right;
}

.whitecloudyfull { 
width:100%;
height:100%;
overflow-y:auto;
background:black;
color:lightblue;
}
.intro
{
background-image: radial-gradient(#CCFFFF 30%, transparent 70%);
  font-family: starborn;
  color: white;
  -webkit-text-stroke: 1px black;
  text-align: center;
  font-size: 1.5em;
  margin-bottom: 5px;
}

.bg, .inner { box-sizing: border-box;}

.bg {
/* for plain background */
background: #FE82B624;

/* vv for image background. remove if want plain */
background-image:url(PolybiusAssets/dark.avif);
background-size:cover;

padding:12px; /* make number bigger/smaller for a bigger/smaller border */
width:100%;
border:1px solid black;
}

.in {
background: #FFF;
color: #000;
padding:5px;
border:1px solid black;
height:200px; /* set height to "height:fit-content;" to expand with text size */
overflow-y:auto; /* remove overflow if you don't want a scroll */
}