:root {
  --lightpink:#FFCAE2;
  --darkpink:#F1689C;
  --pink:#FF9BBB;
  --blue:#7727fc;
  --green:#6FFFFC;
  --yellow:#f6eab1;
  --purple:#F62871;
}


@font-face {
  font-family: "subtitlefont";
  src: url("ADDSBP__.TTF") format("truetype");
}
@font-face {
  font-family: "titlefont";
  src: url("OCS_____.TTF") format("truetype");
}

body {
  font-family: verdana, sans-serif;
  font-size:12px;
  color: var(--blue);
  background: linear-gradient(white, 30%, var(--pink) 60%);
  background-image:url("/doodad.png");
  background-attachment:fixed;
}

.header {
  height:180px;
  max-width:800px;
  margin-left:40px;
  position:relative;
}

.webname {
  font-family:"titlefont";
  font-size:80px;
  position:absolute;
  right:30px;
  bottom:10px;
}

.nav {
  height:25px;
  max-width:800px;
  margin-bottom:20px;
  display:flex;
  justify-content:center;
  margin-left:40px;
}

.nav a {
  float:left;
  width:23%;
  text-align:center;
  border-style:solid;
  border-width:2px;
  border-radius:15px;
  border-color:var(--pink);
  padding:5px 0px;
  margin-left:10px;
  margin-right:10px;
  background: linear-gradient(white, var(--lightpink) 50%, var(--pink) 50%, var(--lightpink));
  font-family:"subtitlefont";
  text-decoration:none;
  color: var(--blue);
  box-shadow:4px 4px 0 var(--darkpink);
}

.nav a:hover {
  margin-top:4px;
  box-shadow: 3px 3px 0 var(--darkpink);
}

.nav a:active {
  background: linear-gradient(var(--pink) 50%, var(--lightpink));
  border-color:var(--pink);
}

.sidebar {
  width:200px;
  height:fit-content;
  background-color: white;
  border-style: solid;
  border-radius:10px;
  border-color:var(--pink);
  border-width:3px;
  box-shadow:4px 4px 0 var(--darkpink);
}


.main {
  width:100%;
  margin-left:20px;
  background-color:white;
  background-image: linear-gradient(white, var(--lightpink) 13px, var(--pink) 13px, var(--lightpink) 26px, white 26px);
  border-style: solid;
  border-radius:10px;
  border-width:2px;
  border-color:var(--pink);
  box-shadow:4px 4px 0 var(--darkpink);
}
  
  .main img {
  width:200px;
  height:200px;
  object-fit: cover;
}

.flex {
  display:flex;
  max-width:800px;
  margin-left:40px;
}

.subtitle {
  background: linear-gradient(to right, var(--yellow), white 95%);
  margin-bottom:5px;
  padding:5px;
  font-size:13px;
  font-family:"subtitlefont";
  color: var(--blue);
}

.top {
 height:20px;
 padding-top:5px;
 padding-left:20px;
 font-family:"subtitlefont";
 font-weight:normal;
 font-size:20px;
 color:var(--blue);
 border-style: hidden hidden solid hidden;
 border-color: var(--pink);
 border-width:2px;
}


.section {
  margin-bottom:10px;
  padding:5px;
}

p {
  padding-left:10px;
  padding-right:10px;
}

ul {
  list-style-image:url("/bow.gif");
}

h2 {
  background: linear-gradient(to right, var(--yellow), white 95%);
  margin-left:5px;
  margin-bottom:5px;
  padding:5px;
  font-size:13px;
  font-family:"subtitlefont";
  color: var(--blue); 
  font-weight:normal;
}

a:visited { 
 text-decoration: none;
 color:var(--blue);
}

.updatebox {
  width:90%;
  margin-left:10px;
  padding:10px;
  height:100px;
  overflow:auto;
  border-style:solid;
  border-color:var(--lightpink);
  box-shadow:2px 2px 0 var(--lightpink);
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--lightpink); 
}

::-webkit-scrollbar-thumb {
  background: var(--darkpink); 
}