/* Taken from justbecaws */

@media (min-width:1024px) {
    .container>.sideleft {
        order: -1;
        min-width: fit-content;
    }
    .container>.mainwin {
        width: 50%;
    }
    .container>.sideright {
        min-width: 25%;
        align-items: flex-start;
        position: relative;

    }
    .container>.sideleft {
        align-items: flex-end;
    }

}



.container {
    background-image: url(secondary-pngs/ombrewater.webp); /*https://senjo.tumblr.com/post/175906292905*/
    background-size: cover;

}

    .mainwin {
        display: flex;
        flex-direction: column;
        padding: 1rem;
        width: 601.5px;
        max-width: 1000px;
        top: 10px;

    }

    .sideright {
        display: flex;
        flex-direction: column;
        padding: 1rem;
    }

.window {
    border-radius: 10px;
    min-width: 10vw;
    max-width: fit-content;
    min-height: fit-content;
    max-height: fit-content;
    background: linear-gradient(360deg, #b4c4f6 50%, #b4c4f6 51%, #e2d5f1 100%);


}

:root {

    --wincolor: (360deg, #b4c4f6 50%, #b4c4f6 51%, #e2d5f1 100%)
}

.buttons {
    display: block;
    color: #000;
    text-decoration: none;
    text-align: center;
    border: 1px solid #003c74;
    background: linear-gradient(180deg, #b4c4f6, #e2d5f1 86%, #3a2f70);
    padding: 5px;
    font-family: ;
    width: auto;
    height: auto;
    border-radius: 5px;

    -webkit-text-stroke: white 4px;
    paint-order: stroke fill;

}

/* Movable windows!! from RikOs https://www.youtube.com/watch?v=NpBZtR1nLwA&t=597s */

.pane {
  position: relative;
  width: var(--pane-default-width);
  height: var(--pane-default-height);

 /* display: grid;
  grid-template-rows: var(--title-bar-height) 1fr;

  border-radius: var(--pane-border-radius);*/

  overflow: clip;

}

.pane .title {
  cursor: move;
}

.pane .content {
  position: relative;
}

.pane .content img {
  max-width: 100%;
  max-height: 100%;

  /*object-fit: cover;*/
}

/*.pane .content p {
  margin: 0%;
}*/

/* add a corner in bottom right */


/*.pane .corner {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 24px;
  height: 24px;
}

.corner {
}*/

.pane.is-dragging .title {
  /*background-color: rgb(100, 100, 100);*/
}


/* End of pain*/

@font-face {
    font-family: taco;
    src: url(/Universal-Assets/Fonts/Tacobae-pge2K.otf) format(opentype);
    font-display: block;
}


/* Tabs Style, taken from the 7.css and Marchdotcom */

menu[role=tablist] {
    display: flex;
    position: relative;
    margin: 0px 0 -2px;
    text-indent: 0;
    list-style-type: none;
    padding-left: 3px;
}
menu[role=tablist] button {
    background: linear-gradient(180deg, #fff, #fafaf9 26%, #f0f0ea 95%, #ecebe5);
    margin-left: -1px;
    margin-right: 2px;
    border-radius: 0;
    border-color: #91a7b4;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    padding: 5px 12px 3px;
    font-family: 'taco';
    font-size: 21px;
}

menu[role=tablist] button:hover {
    border-top: 1px solid #8652e6;
    box-shadow: inset 0 2px #8652e6;
}

menu[role=tablist] button[aria-selected=true] {
    z-index: 2;
    background: #fcfcfe;
    border-color: #919b9c;
    border-bottom: 1px solid transparent;
    border-top: 1px solid #8652e6;
    box-shadow: inset 0 2px #8652e6;
}

#tab-A[role=tabpanel], #tab-D[role=tabpanel] {
    height: 543.7px;
    padding: 14px;
    clear: both;
    background-color: #c6c6c6 ;
    border: 1px solid #919b9c;
    position: relative;

    border-radius: 5px;

    overflow-y: scroll;
    scrollbar-width: none;
    scr
}

#tab-B[role=tabpanel] {
    width: 601.5px;
    height: 543.7px;
    padding: 14px;
    clear: both;
    background: linear-gradient(180deg, #fcfcfe, #f4f3ee);
    border: 1px solid #919b9c;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;

    border-radius: 5px;
}

#tab-C[role=tabpanel] {
    width: 601.3px;
    height: 543.7px;
    padding: 14px;
    clear: both;
    background: linear-gradient(180deg, #fcfcfe, #f4f3ee);
    border: 1px solid #919b9c;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;

    border-radius: 5px;

}

/* DIY Time*/

.about {
    display: grid;
    grid-template-areas: 
    'pfp craft craft'
    'hotbar hotbar hotbar'
    'info info info';
    height: auto;
    margin: 0px auto;
    padding: 10px;
    
}

    

#pfp {
    grid-area: pfp;
    width: 300px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-around;
    
}

#armor {
    border-radius: 5px;
    box-shadow: inset 0px -2px #00000038, 0px 5px #00000038;
    border-left: 3px solid #ffffff;
    border-top: 2px solid rgb(255, 255, 255);
    border-right: 2px solid black;
    border-style: dashed;
    grid-template-rows: 50px;
    height: 250px;

}


#crafting-grid {
    grid-area: craft;
    display: flex;

    display: grid;
    grid-gap: 10px;
    grid-template-columns: 50px 50px 50px;
    grid-template-rows: 50px 50px 50px;

    /*https://www.youtube.com/watch?v=47WMoAfwfkU very helpful here*/

    position: relative;
    top: 30;
    
}

#crafting-grid img {
    border-radius: 5px;
    box-shadow: inset 0px -2px #00000038, 0px 5px #00000038;
    border-left: 3px solid #ffffff;
    border-top: 2px solid rgb(255, 255, 255);
    border-right: 2px solid black;
    border-style: dashed;

}

#name {
    grid-area: name;
    display: flex;
    justify-content: center;
    position: relative;
    top: 52px;
}

#hotbar {
    grid-area: hotbar;
    width: 100%;
    height: 100%;
    display: grid;

    grid-template-columns: 60px 60px 60px 60px 60px 60px 60px 60px 60px 60px;
    position: relative;
    top: 25;
    right: -90;
}

#hotbar img {
    border-radius: 5px;
    box-shadow: inset 0px -2px #00000038, 0px 5px #00000038;
    border-left: 3px solid #ffffff;
    border-top: 2px solid rgb(255, 255, 255);
    border-right: 2px solid black;
    border-style: dashed;

    width: 100%;

}


#about-box1 {
    grid-area: info;
    background-color: #fff;
    border: 1px outset #919b9c;
    height: 160px;
    padding: 13px;
    overflow-y: auto;

    border-radius: 30px;
    position: relative;
    top: 40;
}

/* Other window sheez taken from Petra Pixels github*/

#favoritemedia {
    display: flex;
    align-items: stretch; // yes, actually stretch the images. it's unnoticable
    margin-bottom: 10px;

    @media (max-width: 100%) {
        flex-wrap: wrap;
    }

    img {
        min-width: 0;
        max-width: 100px;
        height: auto;
        margin: 3px;
        border-radius: 5px;
        transition: transform 0.3s ease;

        &:hover,
        &:focus {
        transform: scale(1.15);
        z-index: 1;

        @media (max-width: 100%) {
            transform: none;
        }
        }
    }
}