@import url(/Style-Framework.css);

button {
    background-color: aliceblue;
}

/*-----------------Icon css-----------------*/
.Icon-Container {
    position: fixed; 
    top: 5%; 
    left: 5%; 
    gap: 3vh;
    display: flex; 
    flex-direction: column; 
}

.Icon-Container > a {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.Icon-Container > a:hover {
    cursor: pointer;
}

.Icon {
    background-color: blueviolet; 
    width: 64px; 
    aspect-ratio: 1/1;
}

/*-----------------Window Pane css-----------------*/
main > .window {
    position: fixed;
}

.window.pane {
    max-width: none;
    width: 40%;
}

.title {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
}

/*-----------------Decorative Background Windows css-----------------*/
#SonicWindow {
    top: 50%; left: 50%; transform: translate(-50%, -50%);
}

#BlackHoleWindow {
    width: 30%; top: 75%; left: 75%; transform: translate(-50%, -50%);
}

/*-----------------Window css-----------------*/
#SiteInfo {
    top: 10%; left: 50%; transform: translate(-50%);
}

#ProjectsWindow {
    top: 15%; left: 70%; transform: translate(-50%);
}

#LinksWindow {
    width: 25%; top: 10%; left: 40%; transform: translate(-50%);
}

/*----------------------Blog css----------------------*/
#BlogIndexWindow {
    max-width: fit-content;
    top: 10%; left: 15%;
}

#BlogWindow {
    top: 5%; left: 40%; transform: translate(-50%);
}

#BlogWindow > .content {
    height: 80vh;
    overflow-y: scroll;
    scrollbar-width: none;
}

/*-----------------Signature css-----------------*/
#Signature {
    position: fixed; bottom: 2%; right: 2%;
}

/*-----------------PersonalWindow css-----------------*/
#PersonalWindow {
    width: 25%; top: 30%; left: 30%;

    @media (max-width: 1024px) {
        width: 50%;
    }    
}

/*-----------------PersonalWindow/Games css-----------------*/
#GameContainer {
    width: 30%; top: 15%; left: 35%;
    
    @media (max-width: 1024px) {
        width: 60%;
    }
}

#GameContainer > .content {
    max-height: 70vh; overflow-y: scroll; scrollbar-width: none;
}

/*-----------------Project/OtherWorld css-----------------*/
#OtherWorldWindow, #AstralWindow {
    top: 20%; left: 20%;
}

#OtherWorldWindow > .content, #AstralWindow > .content {
    display: flex; max-height: 70vh; overflow-y: scroll; scrollbar-width: none;
}

#OtherWorldWindow #Directory, #AstralWindow #Directory {
    position: sticky;
    top: 0;
}

@media (max-width: 1024px) {
    main > .window.pane {
        width: 70%;
    }
}