body {
    font-family: Arial;
    font-size: 20px;
    color: black;
    text-shadow: 0 0 1px black;
    background-color: black;
    text-transform: lowercase; /* remove this line if you dont want all your text in lowercase */
    overflow: auto;
}

/* the green box, main content */
.main {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 500px;
    height: 500px;
    padding: 40px;
    background-color: #8ACE00;
    overflow: auto;
}

/* the page links, sitting to the right of the box */
.pages {
    position: absolute;
    top: 50px;
    left: 650px;
    color: white;
}

/* hide the radio buttons that run the page switching */
.container input {
    display: none;
}

/* each page link. */
.pages label {
    display: block;
    margin-bottom: 10px;
    cursor: pointer;
}

/* hide every page by default */
.page {
    display: none;
}

/* show only the page whose link was clicked */
#p1:checked ~ .main .page1,
#p2:checked ~ .main .page2,
#p3:checked ~ .main .page3,
#p4:checked ~ .main .page4 {
    display: block;
}

/* underline the link of the page you're currently on */
#p1:checked ~ .pages label[for="p1"],
#p2:checked ~ .pages label[for="p2"],
#p3:checked ~ .pages label[for="p3"],
#p4:checked ~ .pages label[for="p4"] {
    text-decoration: underline;
}

/* the heading at the top of each page, or just large text */
h1 {
    font-size: 24px;
    font-weight: normal;
}

/* a thin line / header / divider */
.divider {
    border: 1px solid black;
    margin: 0;
}

/* custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

/* the track the scrollbar slides in */
::-webkit-scrollbar-track {
  background: #ffffff;
}

/* the draggable bar itself */
::-webkit-scrollbar-thumb {
  background: #578101;
}

/* the bar when you hover it */
::-webkit-scrollbar-thumb:hover {
  background: #3d5c01;
}