<style>


/*WHY DOES IT ONLY WORK WHEN I PUT IT TWICE WHAT THE FUCK*/

@media (max-width:1440px) {
    .main{
        flex-direction:row;
    }
}

@media (max-width:1024px) {
    .main{
        flex-direction:row;
    }
}

@media (max-width:600px) {
    .main{
        flex-direction:column;
    }
    body{
        font-size:3rem;
    }
}

/*Main structure!!*/

header, nav, main, .main, .left, .right, footer {
 gap: 10px;
 justify-content: center;
 align-content: flex-start;
 box-sizing:border-box;
}

header{
    background: #F433AB;
    background-image: url(https://landoflunatics.neocities.org/img%20shit/pinkswirlbg.png);
    height:150px;
    width:100%;
    padding: 2em 0 2em;
}

  .header{
       width: 100%;
       background-color: #fed6f1;
       height: 150px;
       background-size: 100%;
}

nav{
    background: #31081F;
    font-size: 1rem;
    height: 40px;
    width: 100%;
    margin-bottom: 10px;
}
  nav ul{
          display: flex;
          padding: 0;
          margin: 0;
          list-style-type: none;
          justify-content: space-evenly;
          
  }
  nav li {
           padding: 10px 10px;
           text-align: center;
  }
  nav li a {
            color: #B8FFE7;
            font-weight: 800;
            text-decoration: none;
  }
  nav li a:hover {
                  color: #F433AB;
                  text-decoration: none;
  }

body{
    height: 95vh;
    background-color: #F0E6EF;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: center;
    color: #350527;
    font-size: 0.9em;
    padding: 3em 0 3em 0;
    flex-direction: row;

}

  body a{
    font-weight: bold;
    text-decoration:none;
}

main{
    background-color: #17000D;
    padding: 3em 0 3em 0;
    flex: 5 5 150px;
    min-width: 0;
}

  .main{
    display: flex;
    flex: 1;
}

.left{
    background-color: #17000D ;
    font-size: smaller;
    padding: 3em 0 3em 0;
    flex: 1 1 100px;
    min-width: 0;
}

.right{
    background-color: #17000D;
    font-size: smaller;
    padding: 3em 0 3em 0;
    flex: 1 1 100px;
    min-width: 0;
}

footer{
    background-color: #1F131B ;
    text-align: center;
    padding: 1em 1em 0;
}


/*Regular Elements*/

p {
    word-wrap: break-word;
    word-break: break-all;
}

a {
    color: #A50041;
}

a:hover {
    color:#F433AB
}

img {
  flex-wrap:wrap;
  flex-grow: 0;
  width:100%;
  height:auto;
}

h1,
h2,
h3 {
    color: #A50041;
}

h1 {
    font-size: 1.9em;
}

strong {
        color: #CB0091;
}

::selection {
    color: #fff;
    background: #CB0091;
  }


  details {
    margin-left: 1em;
    padding-inline-start: 0;
    text-align: left;
}

details ul {
    padding-inline-start: 2em;
}

article {
    border-bottom: dashed 1.5px #6B0F1A;
    border-width: 100%;
    padding-bottom: 2em;
    font-size: smaller;
}


article li {
    margin-left: 0em;
    padding-right:1em;
    padding-inline-start: 1em;
}

article h3 {
    font-style: italic;
}

/*Special Snowflake Elements*/

.box {
      border-color: #B8FFE7 #F4BBD6 #A4F0C8 #F4BBD6;
      border-width: 3px 3px 5px 5px;
      border-style: none solid solid none;
      background: #D7F2E4;
      padding: 15px;
      margin-bottom: 10px;
      margin-left: 15px;
      margin-right: 15px;
      text-align: justify;
      color: #17000D;
      
      
}
  .box h1 {
        margin: 0;
        padding: 0.35em 0.25em 0.35em 0.25em;
        text-align: center;
        border-bottom-width: 3px;
        border-bottom-style: dotted;
        border-bottom-color: #6B0F1A;
}
    
    .box img{
        display:block;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
        height: auto;
}

    .iframe {
        overflow: auto;
        min-width: 0;
    }

    .resizer {
        display: flex;
        margin: 0;
        padding: 0;
        resize: both;
        overflow: hidden;
        background-color: #F0E6EF;
        border: 2px solid #17000D;
    }

    .resizer > .resized {
        flex-grow: 1;
        margin: 0;
        padding: 0;
        border: 2px solid #17000D;
        min-height: 10em;
    }

    .scrollable {
        overflow: scroll;
        padding: 1em;
        min-height: 10em;
    }

    .bumperstickers img{
     display: flex;
     padding: 1;
     margin: 5px;
     margin-bottom:10px;
     width:120px;
     height: auto;
}

     .bumperstickers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  
}

 
</style>