body {
    background: #161515 url('https://gammagoop.neocities.org/journal/pics/talkingheadsbg.png');
    overflow-x: hidden;
    letter-spacing: 0.15vw;
    text-align: left;
    color: #0B0C21;
    font-family: 'verdana', serif;
    margin: 0 auto;
    line-height: 1.5;
}

li {
    padding-top: 10px;
}

img {
    float: center;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
}

* {
    box-sizing: border-box;
}

/* below this line is CSS for the layout */

#container {
    max-width: 1400px;
    /* if you change the above value, scroll to the bottom and change the media query according to the comment! */
    margin: 0 auto;
    border: #941F17 none;
    padding: 10;
    background: none;
    /*background: #161515 url('https://gammagoop.neocities.org/medias/tile.jpg');*/

}

#maincontainer {
    margin: 0 auto;
    padding: 5px;
    background: none;
    margin-bottom: 5px;
    height:auto;
}


#maincontainer summary{
    font-size:small;
    border:#0B0C21 2px solid;
    padding:2px;
}

#mainbox details > summary {
  list-style: none;
}
#mainbox details > summary::-webkit-details-marker {
  display: none;
}

/* the area below is for all links on your page EXCEPT for the navigation */
#container a {
    color: #5e0600;
    text-decoration-line: underline;
    font-weight: bold;
}

#container a:hover {
    color: #F2E697;
    width: 100%;
}


#navbar {
    height: 40px;
    background-color: #5e0600;
    width: 100%;
    border: #EB7752 solid;
}

#navbar ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style-type: none;
    justify-content: space-evenly;
}

#navbar li {
    padding-top: 7px;
}

#navbar li a {
    font-family: Titlefont;
    color: #EB7752;
    text-decoration-line: none;
    font-weight: bold;
    font-size: 20px;
}

#navbar li a:hover {
    font-family: Titlefont;
    color: #F2E697;
    width: 100%;
    font-size: 25px;
}

#outleft {
    float: left;
    position: fixed;
    margin-left: 25px;
    height: 815px;
}

#outright {
    float: right;
    position: fixed;
    right: 0;
    margin-right: 25px;
    height: 815px;
}

#flex {
    display: flex;
}


#leftbar {
    width: 400px;
    height: auto;
}

#leftbox {
    background:#df7117;
    height: auto;
    padding: 10px;
    margin-bottom: 5px;
    border:dashed #A6151A;
    font-size:large;
}

#leftbox details > summary {
  list-style: none;
}
#leftbox details > summary::-webkit-details-marker {
  display: none;
}

#leftbox p {
    color: #0B0C21;
    font-size: smaller;
}

#leftbox a {
    color: #37081B;
    font-size: smaller;
}

#leftbox li {
  color: #37081B;
}


#rightbar {
    width: 200px;
    height: auto;

}

#rightbox {
    color: #37081B;
    background-color: #C74C2B;
    height: auto;
    padding: 5px;
    margin-bottom: 5px;
    border: #5e0600 solid;
}

#rightbox p,
li {
    color: #0B0C21;
    font-size: smaller;
}



main {
    height: auto;
    flex: 1;
    order: 2;
}

#mainbox {
    background:#F6BA42;
    height: auto;
    padding: 15px;
    margin-bottom: 5px;
    border:dashed #A6151A ;
}

#mainbox li {
    color: #941F17;
    font-size: 100%;
}

footer {
    width: 100%;
    padding: 10px;
    text-align: center;
    height: auto;
}

/* what's this "order" stuff about??
    allow me to explain!
    if you're using both sidebars, the "order" value
    tells the CSS the order in which to display them.
    left sidebar is 1, content is 2, and right sidebar is 3! */

#leftbar {
    order: 1;
}

#rightbar {
    order: 3;
}

img {
    max-width: 900px;
}

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

@font-face {
    font-family: "Titlefont";
    src: url("https://gammagoop.neocities.org/medias/titlefont.ttf") format("truetype");
    /* or: */
    src: url("https://gammagoop.neocities.org/medias/titlefont.otf") format("opentype");
}

h1 {
    background: #A6151A;
    color:#F6BA42;
    border:solid #df7117 5px;
    font-size: 45px;
    padding: 7px;
    font-family: Titlefont;
    text-align: center;
    line-height:1.2;
}

h2 {
    background: #A6151A;
    border:solid #df7117;
    color:#F6BA42;
    font-size: 30px;
    padding: 7px;
    font-family: Titlefont;
    text-align: center;
    line-height:1.2;
}

h3 {
    background:#F6BA42;
    color: #0B0C21;
    padding: 10px;
    line-height:1.2;
    border: solid #A6151A 2px;
}

mark {
    background: rgb(11, 12, 33);
    background: linear-gradient(0deg, rgba(11, 12, 33, 1) 0%, rgba(55, 8, 27, 1) 55%, rgba(148, 31, 23, 1) 100%);
    color: #F2E697;
    padding: 7px;
    border: #F2E697 solid 2px;
}

hr {
    color:#5e0600;
}

#box {
    background-color: #5e0600;
    padding: 10px;
    max-height: 350px;
    overflow-y: auto;
}

#box li {
    color: #F2E697;
}

#box p {
    color: #EB7752;
    font-weight: bold;
}

#box a {
    color: #C74C2B;
}

#box a:hover {
    color: #EB7752;
}

#box h3 {
    color: #F2E697;
    border-bottom: 2px #F2E697 solid;
    font-size: large;
}


#transmasc_ring {
  margin: 0;
  height: 120px;
  width: 290px;
}

#transmasc_ring .webring-prev {
  text-align:right;
}

#transmasc_ring .webring-info {
   text-align:center;
}

#transmasc_ring .webring-next {
  text-align:left;
}

#leftarrow{
height: 50px;  
/* content: url() */
}
#rightarrow{
height: 50px;
content: url(https://goooby.neocities.org/graphics%20made%20by%20me/right%20blue%20arrow%202.png);
}
#middleflag{
height: 70px;
content: url(https://goooby.neocities.org/graphics%20made%20by%20me/circle_transmasc.png);
}


/* BELOW THIS POINT IS MEDIA QUERY */

/* so you wanna change the width of your page? 
    by default, the container width is 900px.
    in order to keep things responsive, take your new height,
    and then subtrack it by 100. use this new number as the 
    "max-width" value below
    */

@media only screen and (max-width: 800px) {
    #flex {
        flex-wrap: wrap;
    }

    aside {
        width: 100%;
    }

    /* the order of the items is adjusted here for responsiveness!
      since the sidebars would be too small on a mobile device.
      feel free to play around with the order!
      */
    main {
        order: 2;
    }

    #leftbar {
        order: 1;
    }

    #rightbar {
        order: 3;
    }

    #navbar ul {
        flex-wrap: wrap;
    }
}