:root {
  --lghtst: #f4faff;
  --lght: #9ad5ff;
  --mid: #4ca5e1;
  --drk: #2a82c6;
  --drkst: #0076a8;
}
 
 .title {
      min-height: 50px;
  background: url(/images/grid-02.png), linear-gradient(to bottom, var(--lght), var(--lght), var(--mid) 90%);
text-align:center;
    padding-top:15px;
  border-radius: 10px 10px 0 0;
 border: 5px var(--drkst) ridge;
  border-bottom:2px #ffbcde dashed;
  z-index:2;
  color: var(--drkst);
      font-size:19px;
      margin-top:-12px;
    }

    .title p {
      font-size:16px;
    }

    .title h3 {
      margin-block:10px;
    }
    .frame {
      box-sizing:border-box;
      background-color: var(--lghtst);
      font-size:20px;
      padding-block:1px;
      border: 5px var(--drkst) ridge;
      border-top:none;
    }

    .frame p {
      font-size:16px;
      font-style:normal;    
    }

    .frame h3 {
      margin-bottom:-10px;   
    }

        .chrprofile {
      width:90px;
      height:90px;
      border-style:ridge;
      border-color:var(--drkst);
      background-color:antiquewhite;
    }

    .photo {
      box-sizing:border-box;
      background-color: var(--lghtst);
      font-size:20px;
      padding-block:1px;
      border: 5px var(--drkst) ridge;
      border-top:none;
      height:308px;
    }

    .photo img {
        height:300px;
    }

    .framescroll {
  box-sizing: border-box;
  padding-inline:40px;
  padding-block:10px;
    overflow:auto;
    width:100%;
    height:300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}


.framescroll p, h3 {
  margin-bottom: 10px;   
  text-align: center;     
}
.frame br {
    margin: 20px;
}

.frame b {
    font-size:12px;
    font-style:italic;
}

    .navigation {
      box-sizing:border-box;
      background-color: var(--lghtst);
      font-size:20px;
      padding-block:1px;
      border: 5px var(--drkst) ridge;
      border-radius: 10px;
      position:sticky;
      top: 1px;
      z-index:99;
    }

    .navigation ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

    .navigation li {
  display: inline-block;
  margin-right: 10px; 
}

    .triviabox {
      box-sizing:border-box;
      background-color: var(--lghtst);
      margin:20px;
      padding:30px;
      text-align:right;
      border:  2px var(--drkst) ridge;
      border-radius: 10px;
      top: 1px;
      height:80%;
    }


body {
     height:98%;
     text-align: center;
     font-family:Comic Sans MS;
     font-size:15px;
     background-position: top left;
     animation: mymove 20s linear infinite;
     color:var(--drk);
     cursor: url(https://cur.cursors-4u.net/nature/nat-11/nat1021.cur), auto;
      padding-inline:30px;
       padding-bottom:10px;
    background-image: url(https://foollovers.com/mat/drop/b05-bg-raindrop.gif);

}



 h1, h3, h5 {
     color:var(--drk);
}
 h2, h4, h6 {
     color:var(--drkst);
}

a { 
  color:var(--drk);
}

img{  filter: drop-shadow(2px 2px rgba(10, 10, 12, 0.267));
}


.left{
  float:left;
}

  .text:hover{ 
font-style: italic;
text-decoration-line: underline;
}  

           

ul {
    font-size:16px;
}

/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--drk) #ffffff00;
  }

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

  *::-webkit-scrollbar-track {
    background: #ffffff;
  }

  *::-webkit-scrollbar-thumb {
    background-color: var(--drk);
    border-radius: 0px;
    border: 1px #ffffff;
  }

  .frillleft{
  position: fixed;
  top: 0;
  left: 0;
  z-index:-1;
  width: 100%;
  height: 100%;
      background:url('/images/backgrounds/frillblue.png') repeat-y;
}

  .frillright{
  position: fixed;
  top: 0;
  right:0;
  z-index:-1;
  width: 100%;
  height: 100%;
  background:url('/images/backgrounds/frillblueright.png') repeat-y right;
}

button {
	box-shadow:inset 0px 1px 0px 0px #91ceff;
	background:linear-gradient(to bottom, var(--drk)5%, var(--drkst)100%);
	background-color:var(--drk);
	border-radius:3px;
	border:1px solid rgb(19, 20, 100);
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:13px;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #1e1457;
}

button:hover {
	background:linear-gradient(to bottom, var(--lght) 5%, var(--mid)  100%);
	background-color:var(--drk);
}
button:active {
	position:relative;
	top:1px;
}

.frame bold {
  font-weight:bold;
}