/* 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." */
   



/* hii ^.^ ! this is not my code, the layout i use is from EGGRAMEN on neocities!! ok bye :3 */

body {
  /*cursor custom code*/
cursor: url('cursor.png') 34 34, auto;

  margin: 0;
  }
  
/*Everything goes inside here.*/
.wrapper {
  width: 900px;
  margin: 0 auto;
  }
  
.sidebar-img, .footer, .title, .links, .box {
  margin-top: 25px;
  }
  
.title, .links, .footer {
  text-align: center;
  }
  
/*Navigation links.*/
.links ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  }
  
.links li {
  display: inline-block;
  }

/*Some fancy code for fun, to add special characters around the navigation links. Change content to "" if you don't want these.*/
.links li:before {
  content: "「";
  }
  
.links li:after {
  content: "」 ∷ ";
  }
  
.links .last:after {
  content: "」";
  }
  
.links li:before, .links li:after {
  letter-spacing: 0.1em;
  }
  
/*Basic box code that is used for all content boxes on the page.*/
.box {
  border: 1px solid black;
  padding: 0.5em 1em;
  }
  
/*Goes inside the box class. Not given any style by default, but can be used for stuff like fancy borders.*/
.inner {
  
  }
  
/*Prevent image overflow.*/
.box img, .sidebar img {
  max-width: 100%;
  height: auto;
  }
  
/*Wrapper for the sidebar.*/
.sidebar {
  width: 200px;
  float: left;
  }
  
/*Container for the sidebar image.*/
.sidebar-image {
  border: 1px solid black;
  }
  
/*Remove extra padding line at the bottom of the image.*/
.sidebar-image img {
  display: block;
  }
  
/*This is where the title, navbar, and main content all go.*/
.main-wrapper {
  margin-left: 225px;
  }
  
/*Two columns by default. The "single-column" class can be added to make it one column.*/
.main {
  columns: 2;
  column-gap: 25px;
  }
  
/*Make sure boxes don't spread over multiple columns.*/
.main .box {
  display: inline-block;
  }
  
.single-column {
  columns: 1;
  column-gap: 25px;
  }
  
.footer {
  margin-bottom: 25px;
  }
  
@media(max-width:915px) {
  .wrapper {    
    width: 95%;
    }
    
  .main-wrapper {
    width: calc(100% - 225px);
    }
  }
  
@media (orientation: portrait), (max-width: 480px) {
  .wrapper {
    width: 100%;
    }
  
  .main-wrapper, .sidebar, .footer {
    margin: 0 auto;
    width: 90%;
    }
  
  .sidebar {
    float: none;
    display: block;
    }

  .sidebar-image {
    margin: 0 auto;
    width: 33%;
    margin-top:25px;
    }

  .sidebar .sidebar-image img {
    width: 100%;
    }
    
  .footer {
    margin-bottom: 25px;
    }
  
  }

@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap');

body {
  background: linear-gradient(rgb(0,0,0,0), rgb(255,255,255,0.3)), url("redrosesblkbg.gif") repeat;
  background-attachment: fixed;
  color: #020202;
  font-family: sans-serif;
  font-size: 0.85em;
  }
  
a {
  color: #3b1e1e;
  }
  
.title {
  font-family: "Fjalla One";
  font-size:1.2em;
  }
  
.wrapper {
  margin-top:30px;
  width: 1200px;
  }
  
/*Changing the size of the gap between boxes.*/
.sidebar-img, .footer, .title, .links, .box {
  margin-top: 15px;
  }
  
.main {
  column-gap: 15px;
  }
  
.main-wrapper {
  margin-left: 215px;
  }
  
.footer {
  margin-bottom: 15px;
  }
  
.links {
  top: 0;
  margin-top:0;
  }
  
.box, .sidebar-image, .sidebar-image img {
  border: 0;
  border-radius: 0.5em;
  background: #db9797;
  }
  
.sidebar .box, .sidebar-image {
  background: #c96161;
  border: #798886 1px solid;
  }
  
.box {
  border: #8d9896 1px solid;
  }
  
.inner {
  overflow: hidden;
  }
  
/*Replace special spacer characters with different ones.*/
.links li:before {
  content: ".⋅ ۵♡۵ ⋅."
  }
.links li:after, .links .last:after {
  content: ".⋅ ۵♡۵ ⋅.";
  }
  
/*Slightly increase nav link spacing.*/
.links li {
  margin: 0 0.275em;
  }
  
@media(max-width:1215px) {
  .wrapper {    
    width: 95%;
    }
    
  .main-wrapper {
    width: calc(100% - 225px);
    }
  }
  
/*Reapply mobile CSS, since we changed the widths.*/
@media (orientation: portrait), (max-width:800px) {
  .wrapper {
    width: 100%;
    }
  
  .main-wrapper, .sidebar, .footer {
    margin: 0 auto;
    width: 90%;
    }
  
  .sidebar {
    float: none;
    display: block;
    }

  .sidebar-image {
    margin: 0 auto;
    width: 33%;
    margin-top:25px;
    }

  .sidebar .sidebar-image img {
    width: 100%;
    }
    
  .footer {
    margin-bottom: 25px;
    }
  
  }