/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* 
    COLOR GUIDE

    Main BG Color: Shadow Green - #9fc4bd
    Window BG Color: White Pearl - #FBF0F3

    Title Bar Colors
        Color 1: Coffee Foam - #91736C
        Color 2: Pink Clay - #
        Color 3: 
*/

:root /* "for declaring vars?
             - vars seem to be used to store things 
                like sourece for images and what not */ {
    /* colors */
    --content: #9fc4bd;
    --main-bg-color: #1E1E2C;
    --window-bg-color: #FBF0F3;
    --title-bar-color-1: #291b18;
    --title-bar-color-2: #F1C3B2;
    --title-bar-color-3: #6976AD;
    --text-color: #291b18;
    /* images */
    --body-background-image: url([INSERT LINK TO IMAGE])
}

h1, h2, h3, h4 {
    color: var(--title-bar-color-3);
}

center {
    text-align: center;
}

a {
    color: var(--main-bg-color);
}

body {
    font-family: "VT-100", fixedsys, System, monospace;
    font-size: 13px;
    color: var(--text-color);
    margin: 0;
    background-color: var(--main-bg-color);
    
    background-image: url(../graphics/spacebg-cinni.gif);
}

.flex {
    display: flex;
}

/* Side Group */
aside {
    /*margin-top: 25px;*/
    padding: 20px;
    width: 35%;
    float: left;
}

.sidebar-group {
    /* position: fixed; */
    top: 0;
    margin-top: 25px;
}

/* Code Shared by All Window-Styles  */
.sidebar, .mini-sidebar, .wide-sidebar, .main-box {
    background: var(--window-bg-color);
    border-radius: 5px;
    border: 1px solid var(--title-bar-color-3);
    box-shadow: 2px 2px #291b18;
}

    /* Prevents image overflow */
    .sidebar img, .mini-sidebar img, .wide-sidebar img, .main-box img {
        max-width: 100%;
        height: auto; /* prevents squishing */
    }

/* Window Alignment */



/* Inside the Windows */
.window-content, .window-content-flex-wrap {
    padding: 10px;
    padding-bottom: 5px;
    padding-top: 0px;
}

/* title bars */
.sidebar-title, .main-box-title-bar {
    background-color: var(--title-bar-color-3);
    color: var(--window-bg-color);
    font-weight: bold;
    padding: 5px;
    padding-top: 3px;
    padding-bottom: 3px;
}
/*The title bar of boxes has slightly more padding, since there's more room to space text.*/
.box-title-bar {
    padding: 7px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.x-in-corner {
    float: right;
    margin-right: 5px;
    font-family: "Arial", sans-serif;
    line-height: 12px;
}

/* Graphics*/
.icon-img {
    border: var(--title-bar-color-3) solid 2px;
    border-radius: 50%;
}

.favs-img {
    width: 35%;
    height: auto;
}

.emoji-spacer {
    width: 100%;
}
.emoji-in-spacer {
    display: inline;
}
#emoji-left {
    float: left;
}
#emoji-right{
    float: right;
}

/* Main Box Text Boxes */
main {
    /*flex: 1;*/
    width: 100%;
    height: 100%;
    float: right;
    scrollbar-width: none;
}

.main-box {
    margin: 5px;/*
    width: 150px;
    height: 200px;*/

    display: inline-block;
    width: 99%;
    min-height: 75%;
}
.main-box img {
    max-height: 150px;
    width: auto;
}

.large-window-content{ 
    width: 95%;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 25px;
    margin-right: -15px;
}

#main-box-content {
}

/* Header */
.header {
    width: 100%;
    background-color: var(--title-bar-color-3);
    height: 100px;
}

/* Footer */
footer {
    background-color: var(--title-bar-color-3);
    width: 100%;
    height: 30px;
    padding: 5px;
    text-align: center;
}

/* Media Queries - adjusts the layout depending on the resolution */
@media only screen and (max-width: 1140px) {
    

    main {
        /*order: 4;*/
        width: 100%;
    }

    .main-box {
        width: 100%;
    }
}

@media only screen and (max-width: 800px) {
    

    main {
        order: 4;
        width: 100%;
    }

    .main-box {
        width: 98%;
    }
}

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

    main {
        order: 4;
        width: 100%;
    }

    .main-box {
        width: 98%;
    }
}