body    {

        background-image: url(https://azulpuzzlebutreal.neocities.org/about/bg.png);
        font-family: 'Verdana', 'Arial', sans-serif;
	color:#dcdcdc;
	font-size:12px;
        background-attachment: scroll;
        background-repeat: repeat;
        background-color:#000000;
            }





    .container {
        max-width: 1000px;
        width:85%;
        height:auto;
        background-color:#000000;
        background-image: url("https://deltarune.wiki/images/thumb/Tenna_overworld_t-pose.gif/158px-Tenna_overworld_t-pose.gif.webp?cb=2zesct&h=thumb.php&f=Tenna_overworld_t-pose.gif");
        background-repeat: no-repeat;
        background-size: 70%;
        padding: 0px;
        margin: 0 auto;
        margin-top:5%;
        margin-bottom:5%;
        box-shadow: 4px 3px 8px 1px #000000;
            -webkit-box-shadow: 4px 3px 8px 1px #444444;
            display:flex;
          border:2px solid white;
                }

.sitename {
margin-top:5px;
margin-left:5px;
position:absolute;
width:250px;
padding:5px 0px 0px 10px;
background-color: transparent;
}

    .main {
        background-color:transparent; 
        padding: 10px;
	padding-top:75%;
        flex:73%;
        height:auto;
        overflow-wrap: break-word;
        order: 2;
            }


        .main a {
            color:#25fc89;
            text-decoration:underline;
            font-weight:bold;
                }

        .main a:hover {
            color:#25fc89;
            font-weight:bold;
            text-decoration:none;
                }

.feature img {width:100%;}

    .ml {
    width:49%;
    float:left;
    position:relative;
      margin-bottom:10px;
    }

    .mr {
    width:49%;
    float:right;
    position:relative;
    clear:none;
      margin-bottom:10px;
    }


                
    .sidebar {
        font-family: 'Verdana', 'Arial', sans-serif;
        background-color:transparent;
        height:auto;
        padding: 10px 10px 10px 10px;
        overflow:auto;
        flex:20%;
        order: 3;

                    }


    p { margin-top:0px;
      margin-bottom:15px;
	    }


    .bigtext {
        font-family: 'Verdana', 'Arial', sans-serif;
        color:#ffffff;
        font-size:16px;
        line-height:18px;
        margin-bottom:15px;
        margin-top:0px;
        }


    h1 {
        font-family: 'Verdana', sans-serif;
	font-weight: bold;
        color: #25fc89;
        font-size: 24px;
        line-height:24px;
      text-align:left;
        margin: 5px 0px 5px 0px;
      clear:both;
                }


    h2 {
        font-family: 'Verdana', sans-serif;
	font-weight: bold;
        background-color: #e00ade;
      color:#ffffff;
        font-size: 18px;
        line-height:18px;
        text-transform:UPPERCASE;
        margin-top:0px;
        margin-bottom:5px;
      padding: 0px 0px 5px 3px;
      clear:both;
                }



    h3 {
        font-family: 'Verdana', sans-serif;
        color: #000000;
      background-color:#25fc89;
        font-size: 14px;
        font-weight: bold;
        line-height:14px;
        text-transform:UPPERCASE;
        margin-top:0px;
        margin-bottom:3px;
      padding: 0px 0px 0px 5px;
      clear:both;
            }


    h4 {
        font-family: 'Verdana', sans-serif;
        color: #e00ade;
        font-size: 14px;
        font-weight: bold;
        background-color:#dcdcdc;
        padding:0px;
        text-align:center;
	text-transform: uppercase;
        margin-top:0;
        margin-bottom: 5px;
      padding-bottom:2px;
      clear:both;
                }

    u {
        text-decoration: none;
        border-bottom: 2px solid #9fdd8d;
        }

    b, strong {
        color: #9ff5ce;
        }

    em, italic {
        font-style: italic;
        color:#fbaafe;
	font-family: 'Georgia', serif;
        }

blockquote {
 background-color: #c0c0c0;
       color:#000;
border-left:10px solid #0202c8;
padding:15px;
}




     .box {
        padding: 5px;
       color:#3b3b3b;
background-color:#dcdcdc;
        margin-bottom: 10px;
       clear:both;
                }

.box a, .box a:visited { color:#e00ade; text-decoration:underline; font-weight:bold; }

.box a:hover, .box a:active { color:#e00ade; text-decoration:none; }

.box b, .box strong, .box i, .box em {color:#e00ade;}


.nav {display:block;
margin-top:-5px;
}

.nav a, .nav:visited, .nav:active {
	color:#3b3b3b;
  background-color:#9ff5ce;
	display: block;
            padding:2px;
            text-decoration:none;
	text-align:center;
      font-weight:normal;
      letter-spacing:3px;
      text-transform:uppercase;
            line-height:16px;
                }

    .nav a:hover {
            color:#e00ade;
	background-color:#25fc89;
	display: block;
            padding:2px;
            text-decoration:none;
	text-align:center;
  font-weight:normal;
            line-height:16px;
                }

.pink {color:#e0f2a4;}

.lpink {color:#e0f2a4;}

.teal {color:#9fdd8d;}

.lteal {color:#9fdd8d;}

.pinkbg{background-color:#e00ade;}

.lpinkbg {background-color:#e0f2a4;}

.tealbg {background-color:#9fdd8d;}

.ltealbg {background-color:#9fdd8d;}

.white {color:#ffffff;}


    @media (max-width: 1000px) {

    .container {
        display:flex;
        flex-direction: column;
        background-size:100%;
        padding-top:46%;
        margin:0px auto;
        margin-top:4%;
        width:95%;
        max-width:1000px;
      }

.sitename {
position:relative;
flex:100%;
width:90%;
margin:0px auto;
  margin-top:0;
  margin:0;
  padding-top:50%;
order:1;
}

    .main {
        flex:100%;
	padding-top:0px;
        order:2;
      }

    .ml, .mr {
        width:100%;
        margin:0px;
        display:block;
        order:2;
      }

    .sidebar {
        flex:100%;
        order:6;
      }

    }
