<!DOC


      }
      
  body {
  color:ivory;

  font-size: 50px;
  }
#ypsipop{
  color: #b7e2f6
}
      .wrapper {
        max-width: 700px;
        text-align: center;
        transform: translateY(40px);
      }

      .sitelink {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 20px;
        color:#B7E2F6;
      }

      img {
        display: block;
        margin: 0 auto;
        width: 70%;
        height: auto;
      }

      .topbox {
        width: 560px;
        margin: auto;
      }

      .updatebox {
        width: 560px;
        height: 100px;
        margin: 20px auto 0;
        overflow-y: auto;
        overflow-x: hidden;
        color:#B7E2F6;;
        font-size: 9px;
        text-align: right;
      }

      p {
        margin: 0;
       
      }
      
    .links {
       font-family: verdana, sans-serif;
        color:#B7E2F6;
        font-style:bold;
        font-size:40px;
      
    }
    a {
      text-decoration: none;
      color:#B7E2F6;
    }
    
a:hover {
 color: ivory;
}

body{
    color:#b7e2f6;
}
.container{
    display:flex;
    justify-content:center;
    align-items: center;
    flex-direction: column;
    font-family: 'monospace';
    row-gap:10px;
    color: #b7e2f6;
}
.a{
    color: #b7e2f6;
}
.a:hover{
    font-style: italic;
}
.image{
    width:80px
}
.titlediv{
   
    width:100%;
    max-width: 250px;
    text-align:justify;

}
.paragraph{
    width:100%;
    max-width:480px;
    padding:10px;
    text-align: justify;
}

.essay{
  width:500px;
  height: 300px;
  overflow: scroll;
}
.aboutsection{
    display:grid;
    grid-template-columns: 1fr 1fr;
    margin: 10 px;
    gap: 20px;
    width: 500px;
}
.column1{
    grid-column: 1;
    padding: 10px;
}
.column2{
    grid-column: 2;
    padding: 10px;
}
 .starcorner {
    border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAVKADAAQAAAABAAAAVAAAAAC3aM1AAAABjUlEQVR4Ae3cwVHDMBAF0MBQAN1QD5WlHrpJB3BNVoe1om/Hw7ycYrRaS2+jHS725eJDgAABAs8KvNWJt+vP7/3fPr+/HmJWx+9zv+L76vq7+e+v2NR/vifQcHWBhkEf+uOW3F0P2ZLjzDGr+/MLDVcXKNCwQDjd0ENrD6n36/4v7eLr+NHXe+/PkQ9XFCjQsEA43dBDu/y1B9We2s0/+/jq/hz5cIWBAg0LhNN91HyrPWR1fl1P+np1fd18Rz5cMaBAwwLSESBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABArsIDM96ds/hrI7vsouJpKvr7+Z7rGaiGFtCgW5RmogBOoG1JXTood2krod0888+vro/v9BwhYECDQuE0w09tPaQer/6jpHZ+Jrv6OvZ9c7GO/LhigIFGhYIpxt6aJe/9pTaU7v5Zx9f3Z8jH64wUKBhgXA6720q7+nvfLse68h3gpPjQCfBunCgnZBxAgQIEDhM4A+4+ZBN+NSNQwAAAABJRU5ErkJggg==') 28 /  28px / 0 round;
    border-width:  28px;
    border-style:  solid; 
  }
    .cornergurl {
    border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAVKADAAQAAAABAAAAVAAAAAC3aM1AAAABCUlEQVR4Ae3W0Q2CMBQFUDQM4DbO42TM4zZsoL/w+CixNzE0hy+g7YWe0hemyUGAAAECvwrc6sB1eX+29x6v565Pb/s2e8Tz+4iT+uecgIb1gYZBd/XxTHarhp7JGLmPLzS8ukCBhgXCcYcaWmtkfV7rv7TVv7aPdm3Lh1cUKNCwQDjuUENb+bXG1praGj96uy0fXmGgQMMC4bi55vXWyN7x9X2udm3Lh1cMKNCwgDgCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIHAxgS/OSyQn0n+sjQAAAABJRU5ErkJggg==') 28 /  28px / 0 round;
    border-width:  28px;
    border-style:  solid; 
  }
      .fullgurl {
    border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAVKADAAQAAAABAAAAVAAAAAC3aM1AAAAByUlEQVR4Ae3cwVHDMBSE4cBQAN1QD5VRD93QQbgq+w4bZ3ciT+bnZPlJT/Yn+43MIZcLfwgggAACjwq86cC/n9/reu7z++umTxpfc+84Tq/fjX/fcVOvPCeg5dUFtAx6Ux/vye1qyD05ztwnvT+e0PLqAgpoWaCcbtRQrSE6n9uXuv4a1/lc/qNxN5/GXX7Xn1dehcI2oCGgDgdURcL2qKEun6t5bvzZ4+n98YSWVxhQQMsC5XQfmi+tIel4vZ52O70+N55XvrxigAJaFiAdAggggAACCCCAAAIvIMD/Q2UR3be6dB9NPj0HSXYC0MxvjAZ0kHACAQQQQGCXAPtQkWcfKiC7m2ybyisAaBmUdAgggAACjwuwDxU79qECsrvJtqm8AoCWQUmHAAIIIIAAAggggMAOgfEt775l0/iOm1znTK/fjedLadUuHANaQFxTALpqFI5HDXU5XQ1x488eT++PJ7S8woACWhYopxs1VGuIzpf+rpHm0/lc/qNxN5/GXX7Xn1dehcI2oCGgDgdURcL2qKEun6t5bvzZ4+n98YSWVxhQQMsC5XT8bpP8Tr/zdTWWV94JHowDehDMdQfUCRFHAAEEEHiawD80nsBiF/YK0AAAAABJRU5ErkJggg==') 28 /  28px / 0 round;
    border-width:  28px;
    border-style:  solid; 
  }
  
.broider {
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAVKADAAQAAAABAAAAVAAAAAC3aM1AAAABcklEQVR4Ae3bQW4CMQwF0KHqWXr/8/QysIU/CzPYatToscI4cZiXIYRIHIcHAQIECHwqcMuO95/j/vza7fd4adPNP9fe8fnXjhe18pqADusDHQZ9WR/fqV2toe/U2LmNO3R4doECHRYYLndaQ3ONzPGqfWnVPvM5XlX/aj7HyzjHz3yOl/mMfeRTpBkDbQJmd6Ap0oxPa2hVL9ecq2tMVX91vnt97tDhGQQKdFhguNx31uuuId3++X7+Ou5+J/jID88YUKDDAsoRIECAAAECBAgQ2EDAeWhMYvcswk/PAO2GQLuC0R9ogAgJECBAYJ2AfWjY24cGyOrQtml4BoAOgypHgAABAp8L2IeGnX1ogKwObZuGZwDoMKhyBAgQIECAAAECBAgQIECAwP8ScB4a8+U8NEBWh47vhmcA6DDo6f/yV+t315yqfzdfXU/Wr9pXeXdoJXQxD/QiWNUcaCUkT4AAAQIECBAgQIAAAQIECGwt8ABSo1FNycdvRgAAAABJRU5ErkJggg==") 28 /  28px / 0 round;
    border-width:  28px;
    border-style:  solid;
}

.smallbroider {
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAVKADAAQAAAABAAAAVAAAAAC3aM1AAAABhklEQVR4Ae3cQXLCMAwF0NDpWbj/eXoZugV5oRj/hAzzWJFaVuwnrOkm2TYfAgQIEHhX4FYnPu7b4/lvt7/tJWZ1/Dn3J76vrr+b//OJTX3zPYGGqws0DPrSH/fk7nrInhxXjlndn19ouLpAgYYFwumGHlp7SL1f939pF1/Hz74+en+OfLiiQIGGBcLphh7a5a89qPbUbv7Vx1f358iHKwwUaFggnO635lvtIavz63rS16vr6+Y78uGKAQUaFpCOAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQOERgeNazew5ndfyQXUwkXV1/N99jNRPF2BMKdI/SRAzQCaw9oUMP7SZ1PaSbf/Xx1f35hYYrDBRoWCCcbuihtYfU+9V3jMzG13xnX8+udzbekQ9XFCjQsEA43dBDu/y1p9Se2s2/+vjq/hz5cIWBAg0LhNN5b1N5T3/n2/VYR74TnBwHOgnWhQPthIwTIECAwGkC/w1ibE3T4idUAAAAAElFTkSuQmCC") 28 /  28px / 0 round;
    border-width:  28px;
    border-style:  solid;
}
.cornerbroider {
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAVKADAAQAAAABAAAAVAAAAAC3aM1AAAABAklEQVR4Ae3WQQ6EIBAEQNzsW/z/e/yMXnU8YJZONpLypAKtFDKxNQcBAgQI/Cqw1IH72vbzvWVrlz6j7efsGc8/M07qn3MCGtYHGga91Mcn2b0a+iRj5j6+0PDqAgUaFgjH3WporZH1eb3/0l7/2j7btS0fXlGgQMMC4bhbDe3l1xpba2pv/Ozttnx4hYECDQuE4741b7RGjo6v7/O2a1s+vGJAgYYFxBEgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgZcJHKO5Gyc03FGbAAAAAElFTkSuQmCC") 28 /  28px / 0 round;
    border-width:  28px;
    border-style:  solid;
}
.essaybroider {
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAACNklEQVR4Aeyc0U3DMBBAQyfoOJ2ngzEP47ABKP4yZ5rjlEeaJg8pVpyzX+znw7KIxOXz/eOrv6bw08fm+xCe5mf9FeNnq1/ONuH/nq9CYcMKpYVe77e3/qry+77zfbX/0dqbofCKKlShsAEYN5xD+zPlfD/vi/01P1u61o4vsiMvi8f2WZ3m+SufGS/GFVoUljVXaGaoGL/0++Nv93GPud5vP86tsU/x/UPzjJfFB2DyIOPF+Se4yQzNDBXjCi0Ky5orNDNUjA/n0GL/w/89NNtjoy8zNBpZWVfoSoGxu0KjkZX14RwaedkeksUj7+h1MxReYYUqFDYA47bKUHjY+8UpFF4bhSoUNgDjzFCFwgZgnBmqUNgAjDNDFQobgHFmqEJhAzAuzdDqd2lwfLtAVeefCt3FrF5oEAqFF0uhWws9+zej6vzN0K0zFH7f4XFmKLzEqdDqOQwe39Nx1fmnQp8+oxcbgELhBVPo1kKr5zB4fFUc3r46fzMUXgKFKhQ2AOPMUIXCBmCcGapQ2ACMM0MVChuAcWaoQmEDMM4MnSZUqUJRnZP/gAD2qdDNhVa/qdADfDavOn/3UHjFFKpQ2ACMSzM0flOp7inV8Wb8LF59X2wf+XH+sX2sp0JjB+vLBhS67KccVWhZ2XKHstDqnrL8+jGa8bP4SKw9+SP/IbQs9CHJQDOg0KaBKxTKuWwkhTYNXKFQzmUjKbRp4AqFci4bSaFNA1colHPZSAptGrhCoZzLRvoGAAD//x0ZYP8AAAAGSURBVAMA9qKAuDGqCO4AAAAASUVORK5CYII=") 28 /  28px / 0 round;
    border-width:  28px;
    border-style:  solid;
}
.bluecornerbroider {
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAACAUlEQVR4AezcQWrDQAyFYdfLHCL3yYl7nx6i25aBLhQZJB5+DcH6CwaPNVLqb2Qzm2T//Pr+iceW/mJsnafwtq7FI8enjfdpN/zf9wuoWRhQN+jjfvuIh1o/5q5zNf9q8+lQ84oCCqhZwFzusA+Ne8p1nj9vXauOPH/amEfevOKAAmoWMJfb196xOvLnPe63p31rzs3zp4155M0rDiigZgFzucM+VK2f96Rq/tXm88ibVxRQQM0C5nKHfWiu3+0zu3iud/Uxj7x5hQEF1CxgLveqDjX/2+9bDlDz2gAKqFnAXI4OBdQsYC5HhwJqFjCXo0MBNQuYy9GhgJoFzOXeuUPNt/qacoCanQEF1CxgLkeHAmoWMJejQwE1C5jL0aGAmgXM5ehQQM0C5nJX61Azj14OUN2szAC05NGDgOpmZQagJY8eBFQ3KzMALXn0IKC6WZkBaMmjBwHVzcoMQEsePQioblZmALptJZAaBFQVa+YD2gCpYUBVsWb+eNDu+/5qfDxo03ByGFCZrE4AtPaRo+NBz37fP+ePB5VbsEkAtAFSw4CqYs388aB5n5nH+R35F3/67f94bTxo03ByGFCZrE4AtPaRo+NB8zsyj+P7cZ3neB6PB5VbsEkAtAFSw4CqYs388aDrvRiPxusQjrnrfDzoQejkBUBPAuZ0QLPIyfEvAAAA//8xsNz8AAAABklEQVQDAJRVK2DV9W33AAAAAElFTkSuQmCC") 28 /  28px / 0 round;
    border-width:  28px;
    border-style:  solid;
}
.element::-webkit-scrollbar {
  width: 12px; /* width of the vertical scrollbar */
  background-color: #f09ec8; /* background of the scrollbar area */
}

/* Target the track (the background part) */
.element::-webkit-scrollbar-track {
  background: #f5f5f500;
  border-radius: 10px; /* rounded corners for the track */
}

/* Target the thumb (the draggable handle) */
.element::-webkit-scrollbar-thumb {
  background: #f09ec8; /* color of the draggable part */
  border-radius: 10px; /* rounded corners for the thumb */
}

/* Add a hover effect to the thumb */
.element::-webkit-scrollbar-thumb:hover {
  background: #b7e2f6;
}
}
ul li::marker {
  content: "★ "; /* Add a space after the emoji for spacing */
  color: #b7e2f6; /* Change the color (though emoji color is fixed) */
  font-size: 1.2em; /* Make the marker slightly larger */
}
.verttext{
        writing-mode: vertical-lr;
      }
      .test{
        display:flex;
        
}