/** 
*
*  there was a line up here about scrollbars. 
*  You don't need this. The website knows and will add one itself if necessary.
*  you also aren't supposed to put CSS rules ahead of the font declarations.
*
**/

/* BODY FONTS */
@font-face {
    font-family: 'Rockwell';
    src: url('/fonts/rockwell.ttf') format('truetype');
    font-style: normal;
}

@font-face {
    font-family: 'Rockwell';
    src: url('/fonts/rockwell_bold.ttf') format('truetype');
    font-weight: bold;
}

@font-face {
    font-family: 'Rockwell';
    src: url('/fonts/rockwell_italic.ttf') format('truetype');
    font-style: italic;
}

@font-face {
    font-family: 'Rockwell';
    src: url('/fonts/rockwell_bold_italic.ttf') format('truetype');
    font-style: italic;
    font-weight: bold;
}

/* MINI HEADER FONTS */
@font-face {
  font-family: 'Grenze';
  src: url('/fonts/grenze.ttf') format('truetype');
  font-style: normal;
}

@font-face {
    font-family: 'Grenze';
    src: url('/fonts/grenze_bold.ttf') format('truetype');
    font-weight: bold;
}

@font-face {
    font-family: 'Grenze';
    src: url('/fonts/grenze_italic.ttf') format('truetype');
    font-style: italic;
}

@font-face {
    font-family: 'Grenze';
    src: url('/fonts/grenze_bold_italic.ttf') format('truetype');
    font-style: italic;
    font-weight: bold;
}

/* HEADER FONTS */
@font-face {
  font-family: 'New Rocker';
  src: url('/fonts/newrocker.ttf') format('truetype');
  font-weight: bold;
}

@font-face {
  font-family: 'New Rocker';
  src: url('/fonts/newrocker.ttf') format('truetype');
  font-style: italic;
  font-weight: bold;
}


/**
*
*  These beautiful things here are called CSS variables! If you find yourself reusing things
*  like colors or padding or certain styles repeatedly, it's best to just make a variable and store it here
*  in the HTML element so that it can be reached and reused globally. You'll see how they're used later.
*  if you decide you want to adjust something, you just change it one time up here, and everything will change.
*
*/

html {
  --lizard-box-img-height: 575px;
  --border-radius: 0.2125rem;
  --border-width: 0.35rem;
  --accent-red: #fc0038;
  --border-style: var(--border-width) ridge var(--accent-red);
}

* {
    box-sizing: border-box;
}

ol, 
ul, 
menu {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

body {
  /* You want to make sure the font-family matches the name exactly as the font-family attribute in the CSS above. */
    cursor: url("https://viscereptile.neocities.org/images/sumeye_cursor.png"), auto;
    font-family: 'Rockwell', sans-serif;
    margin: 0;
    background-color: #E1BD95;
    color: #fceaff; 
    background-image: url('https://viscereptile.neocities.org/images/background_veins2.png'); /* This is your background image that tiles. */
    position: relative;
    /* that's the size of the tiled image. */
    background-size: 1500px;
    background-repeat: repeat;
}

/* FONT SETTINGS */
h1 {
  /* header 1. font-family, size, color. */
    font-family: 'New Rocker', sans-serif;
    font-size: 36px;
    color: var(--accent-red);
    margin: 0;
}

h2 {
    font-family: 'Grenze', sans-serif;
    font-size: 36px;
    color: var(--accent-red);
    margin: 0;
}

h3 {
  font-family: 'New Rocker', sans-serif;
  font-size: 20px;
  color: var(--accent-red)
}

strong {
    /* Strong is for BOLD text with <b> and </b> */

    /* strong is for strong text: <strong> </strong>. 
    b is for bold text. they look the same, but the above note is not correct, 
    this would not have changed the look of your <b> tags */

    color: #FAFC93;
}

header h1 a:visited {
color: var(--accent-red);
}

header {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-evenly;
    padding: 0.5rem;
    height: fit-content;
    max-width: 100%;
    background-color: #4A2E3F;    /* header color here! */
    /* border-radius controls rounded corners. you can make the radius bigger to make the corners rounder. */
    border-radius: var(--border-radius);
    border: var(--border-style);
}

.wrapper {
  padding: 1rem;
  max-width: 1200px;
  margin: auto;
}
/* the "container" is what wraps your entire website */
.container {
    display: flex;
    gap: 0.5rem;  
}

header h1 a:link {
  font-size: 3.75rem;
  color: var(--accent-red);
}

.eyefloat {
  text-align: center;
}

.medium {
  display: none;
}

header img {
  max-height: 75px;
}

main {
  height: 100%;
  text-align: center;
  padding: 1rem;
}

.navigation {
  display: flex;
  flex-flow: column nowrap;
  gap: 0.5rem;
  text-align: center;
  align-items: center;
}

.navigation ul {
  display: flex;
  gap: 0.5rem;
  text-wrap: nowrap;
  justify-content: space-between;
}

/* the area below is for all links on your page
EXCEPT for the navigation bar */
.container a {
    color: #80FFC4;
    font-weight: bold;
    text-decoration: none;
    /* if you want to remove the underline
you can add a line below here that says:
text-decoration:none; */
}

.flex {
    display: flex;
    flex-flow: column nowrap;
    gap: 0.5rem;
}

main {
  /* main body area. */
    background-color: #4A2E3F;
    border-radius: var(--border-radius);
    border: var(--border-style);
}

.sidebars-container {
  display: flex;
  flex-flow: column nowrap;
}

.filler {
  height: calc(var(--lizard-box-img-height) - (var(--border-width) + 1rem)); 
}

.lizard-box {
  position: absolute;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
  z-index: -1;
  top: calc((var(--lizard-box-img-height) * -1) - (var(--border-width)));
  left: -23rem;
}

.lizard-box img {
  height: calc(var(--lizard-box-img-height) + var(--border-width));
  width: auto;
}

.leftbar1 {
    position: relative;
    display: flex;
    height: fit-content;
    flex-flow: column nowrap;
    background-color: #4A2E3F;
    border-radius: var(--border-radius);
    border: var(--border-style);
    align-items: center;
    max-width: 250px;
    min-width: 225px;
}

.info {
  width: 100%;
}

.socials {
  text-align: center;
  margin: 1rem;
}

.socials ul {
  display: inline-flex;
  flex-flow: column nowrap;
  justify-content: center;
  padding: 1rem 0;
  font-size: 0.75rem;
  gap: 1rem;
}

.eyerollH {
  display: flex;
  overflow: hidden;
  background-image: url("https://viscereptile.neocities.org/images/sumeye_scroll_horizontal.gif");
  background-repeat: repeat-x;
  background-size: contain;
  width: 100%;
  min-height: 100px;
}

.eyerollV {
  display: flex;
  overflow: hidden;
  background-image: url("https://viscereptile.neocities.org/images/sumeye_scroll_vertical.gif");
  background-repeat: repeat-x;
  background-size: contain;
  width: 100%;
  min-height: 100px;
}

.buttons li img {
  width: 6rem;
  height: 2rem;
}

.sum-pagedoll {
  position: fixed;
  bottom: 0;
  right: 0;
  transition: ease-in-out 0.25s;
}

.sum-pagedoll:hover {
  opacity: 0.25;
}

.sum-pagedoll img {
  height: 65vh;
}

footer {
  /* THIS IS THE FOOTER! this has all the same sort of settings as sidebars and the like, same with borders */
    background-color: #4A2E3F;
    /* background color for footer */
    width: 100%;
    padding: 1rem;
    text-align: center;
    border-radius: var(--border-radius);
    border: var(--border-style);
    margin-top: 0.5rem;
    /* this centers the footer text */
}

.footer-info{
  display: flex;
  flex-flow: column nowrap;
  gap: 1.5rem;
  justify-content: center;
  align-items: center;
}

footer hr {
  margin: 0;
}

footer p {
  margin: 0;
}

/* this is just a cool box, it's the darker colored one */
.box {
    background-color: #13092D;
    border: 1px solid #80FFC4;
    padding: 10px;
}

@media screen and (max-width: 1100px){ /* I don't really know what the original media rule that was here was meant to be doing ^^; 
                                          but um. If a screen/browser window is smaller than 1100 pixels, this will change your layout. */
  .container{
    flex-flow: column-reverse wrap;
  }

  .flex {
    flex-flow: row wrap;
  }

  .sidebars-container {
    align-items: flex-end;
  }

  .lizard-box {
    bottom: 0;
    top: -1rem;
    right: calc((var(--lizard-box-img-height) / 3));
  }

  .lizard-box img {
    height: calc(var(--lizard-box-img-height) * 0.85);
  }

  .filler {
    display: none;
  }

  .flex > div,
  .flex > header {
    flex: 1 1 0;
  }

  .sum-pagedoll img {
    max-height: 15rem;
  }

  header h1 {
    margin: 0;
  }

  header h1 a:link {
    font-size: 2.5rem;
  }

  header {
    height: auto;
    width: auto;
    max-width: 100%;
    padding: 0.75rem 0;
    flex-flow: row wrap;
  }

 /* .eyefloat img {
    display: none; unhide this and the background image down there to see what this does i guess
  }
*/
  .eyefloat {
    /* background-image: url("https://viscereptile.neocities.org/images/sumeye_scroll_horizontal.gif"); */
    background-repeat: repeat-x;
    background-size: contain;
    height: 50px;
    width: 100%;
  }

  .eyefloat img {
    max-height: 100%;
  }

}

@media screen and (max-width: 750px){

  .lizard-box {
    bottom: 0;
    top: -1rem;
    right: calc((var(--lizard-box-img-height) * 0.1));
  }

  .lizard-box img {
    height: calc(var(--lizard-box-img-height) * 0.85);
  }

}

@media screen and (max-width: 400px){

  .lizard-box {
    bottom: 0;
    top: -1rem;
    width: 100vw;
    right: 10rem;
    overflow: hidden;
  }

  .lizard-box img {
    height: calc(var(--lizard-box-img-height) * 0.85);
  }

}