/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

h1 {
  letter-spacing: 0.2em;
  text-align: center;
  font-size: 16px;
  color: black;
  text-align: center;
}

h2 {
    letter-spacing: 0.1em;
    font-family: Coral Pixels;
    line-height: 0.7em;
    text-align: left;
    padding: 5px;
  }
body { 
    font-family: DotGothic16, sans-serif;
    font-size: 12px;
    color: black;
    background-color: pink;
    margin: 50px;
    text-align: justify;
    background: white url(https://sigmasoyboy.neocities.org/images/static-background.gif) repeat center;
    cursor: url("https://sigmasoyboy.neocities.org/images/bunny-cursor.gif"), auto;
}

.images img {
  padding: 0px 5px 0px 0px;
}


strong {
  color: red;
}
em {
  text-decoration: underline;
}

a {
  font-size: 14px;
  
}
a:link {
  color: red;
}
a:visited {
  color: blue;
}
a:active {
  color: red;
}
a:hover {
  text-decoration: underline;
  background-color: black;
}

/* beginning of css to change the table style */

table {
  table-layout: fixed;
  width: 80%;
  overflow: scroll;
  margin: auto;
  padding: 5px;
  text-align: justify;
  border-bottom: 1px dashed;
}

th,td {
  padding: 1em;
}

/* beginning css to change bullet list image */
ul {
  margin-left: -5px;
  line-height: 1.5;
  text-align: left;
}

.b1 {
  list-style-image: url(https://sigmasoyboy.neocities.org/images/heart-icon.gif);
}

.b2 {
  list-style-image: url(https://sigmasoyboy.neocities.org/images/brain-icon.gif);
}

.b3 {
  list-style-image: url(https://sigmasoyboy.neocities.org/images/splatter-icon.gif);
}

.b4 {
  list-style-image: url(https://sigmasoyboy.neocities.org/images/bloody-plaster.gif)
}

.b5 {
  list-style-image: url(https://sigmasoyboy.neocities.org/images/pinkpills-icon.gif)
}

.b6 {
  list-style-image: url(https://sigmasoyboy.neocities.org/images/happy-heart-cat.gif)
}

.b7 {
  list-style-image: url(https://sigmasoyboy.neocities.org/images/pukeblood-cat.gif)
}
/* end of css to change bullet list image */

/* textarea is for the little box under the buttons */
textarea {
  width: 130px;
  height: auto;
}

.box {
  margin: 0 auto;
  overflow: auto;
  background-color: white;
  width: 32em;
  min-height: 10em;
  margin-top: 6%;
  padding: 2em;
}

.box2 {
  margin: auto;
  background-color: white;
  width: 30em;
  overflow: auto;
  border: 2px solid black;
  box-shadow: 5px 5px red;
  padding: 1.5em;
}

.simple-page {
  margin: auto;
  width: 60em;
  font-size: 12px;
  font-family: DotGothic16, sans-serif;
  background-color: white;
  padding: 3em;
  overflow: hidden;
}

/* -------------------------------------------------------- */
/* CONTAINERS */
/* -------------------------------------------------------- */
.container {
  display: grid;
  grid-gap: 10px;
  width: 70em;
  margin: auto;
  grid-template:
    "header header"
    "aside main"
    "footer footer"
    / 160px 1fr;
}

header { grid-area: header; }
aside { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }

 .center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* -------------------------------------------------------- */
/* HEADER */
/* -------------------------------------------------------- */

header {
  grid-area: header;
  text-align: center;
  font-size: 30px;
  font-family: Coral Pixels, sans-serif;
  background-color: white;
  padding: 1px;
  overflow: auto;  
}

.header-image img {
  width: 100%;
  height: auto;
}

/* -------------------------------------------------------- */
/* SIDEBARS */
/* -------------------------------------------------------- */

aside {
  grid-area: aside;
  font-size: 12px;
  font-family: DotGothic16, sans-serif;
  background-color: white;
  padding: 1em;
  overflow: hidden;
}
/* -------------------------------------------------------- */
/* MAIN */
/* -------------------------------------------------------- */
main {
  grid-area: main;
  font-size: 12px;
  font-family: DotGothic16, sans-serif;
  background-color: white;
  padding: 2em;
  overflow: hidden;
}



/* -------------------------------------------------------- */
/* FOOTER */
/* -------------------------------------------------------- */

footer {
  grid-area: footer;
  font-family: DotGothic16, sans-serif;
  background-color: white;
  overflow: hidden;
  font-size: 1em;
  padding: 10px;
  text-align: center;
  
}

/* hr is for the divider */
main hr {
  border: 0;
  margin: 1.5em;
}

footer a,
footer a:visited {
  color: red;
}

footer a:hover,
footer a:focus {
  color: red;
}

.stamps {
  margin-top: 10px;
}

.counter {
  margin-top: 20px;
  text-align: center;
}

.go-back {
  text-align: center;
  color: white;
  margin-top: 20px;
}

.sideimage { /*optional*/
  right: 170px;
  bottom:-30px;
  float: right;
  position: fixed;
  min-width: 350px;
  }

/* code for side image starts here */
.sideimage img {
  max-width: 100%;
  height: auto;  
  }
@media(max-width: 1440px) {
    .sideimage {
      max-width: 0%;
      /*if this can be executed, override the previous rule, otherwise hide the side image*/
      max-width: calc(100% - 975px);
      }
  }
  
@media(max-width: 1200px) {
    .sideimage {
      right: 100px;
      bottom: 0px;
      max-width: 33%;

/* code for custom fonts */      
.coral-pixels-regular {
  font-family: "Coral Pixels", serif;
  font-weight: 400;
  font-style: normal;
}
      
.dotgothic16-regular {
  font-family: "DotGothic16", sans-serif;
  font-weight: 400;
  font-style: normal;
}