/* You can either copy the below and paste it between style tags on your HTML page, OR you can copy this to a file and name it .css and link it from your HTML page. */
:root {
    --bg-color:#999999;
    --border-color:#000000;
    --subtitle-color:#38761d;
    --link-color:#6a329f;
}

html, body {
    margin:0;
    padding:0;
    background-color:#999999;
    background-attachment:fixed;
    background-image:url('https://ratearth.neocities.org/Images/neato.png');
}
body a {
    color:var(--link-color);
}
header {
    width:713px;
    height:78px;
    margin-left:480px;
    background-image:url('https://ratearth.neocities.org/Images/ratearth.gif');
    background-size:100%;

}
.flex {
    display:flex;
}
.sidebar {
    background-color:var(--bg-color);
    max-width:250px;
    width:200px;
    height:100vh;
    border:1px solid var(--border-color);
    position:fixed;
}
article {
    background-color:var(--bg-color);
    border:1px solid var(--border-color);
    margin-top:40px;
    max-width:1000px;
    max-height:1000px;
    margin-left:480px;
    margin-right:100px;
    overflow=auto

}
.subtitle {
    color:var(--subtitle-color);
    font-size:18px;
    font-weight:bold;
    border-bottom:2px solid var(--subtitle-color);
    margin-left:10px;
    margin-right:10px;
    text-align:left;
    padding-top:20px;
    margin-bottom:5px;
}
article > p {
    padding:10px;
    padding-left:20px;
}
.links {
    list-style-type:'+';
    font-size:16px;

}
.links li a {
    color:var(--link-color);
    letter-spacing:1px;
    text-decoration:none;
}
main {
    margin-top:-21px;
}
section > p {
    padding:10px;
}
footer {
    margin-left:20px;
    max-width:30%;
    font-size:12px;
}
.weirdsubtitle {
    color:var(--subtitle-color);
    font-size:15px;
    font-weight:bold;
    border-bottom:2px solid var(--subtitle-color);
    margin-left:10px;
    margin-right:10px;
    text-align:left;
    padding-top:20px;
    margin-bottom:5px;
}
@media only screen and (max-width: 630px) {
    .sidebar {
        position:relative;
        max-width:100%;
        width:100%;
        height:150px;
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        overflow:hidden;
    }
    .flex {
        flex-wrap:wrap;
        flex-direction:row;
    }
    .right {
        order:1;
        width:100%;
    }
    .left {
        order:2;
    }
    section {
        display:flex;
        flex-wrap:wrap;
        width:120px;
    }
}