/*=================== ACOUNTS ========================*/
.accounts__window{
    background-color: #000000;
    color:white;
}
.accounts__window h1{
    text-align: center;
    font-size: 2rem;
    /* margin:10px; */
    padding:10px;
    /* border-bottom:2px solid white; */
}
.accounts__window .grid{
    padding:20px;
    width: 100%;
    flex:1;
    display: grid;
    grid-template-columns: repeat(3,1fr);
}
.accounts__window .grid .account{
    margin:auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;

}
.accounts__window .grid .account:hover,
.accounts__window .grid .account:focus{
    transition-duration: 0.2s;
    opacity: 0.7;
}
.accounts__window .grid .account:active{
    opacity:0.4;
}
.accounts__window .grid .account img{
    width:7vw;
    padding:10px;
    aspect-ratio: 1;
    border-radius: 30px;
}
.accounts__window .list{
    flex:2;
    height:50%;
    overflow-y: scroll;
    padding: 0 25px;
    padding-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.accounts__window .list .item{
    color: black;
    flex-shrink: 0;
    height:80px;
    background-color: white;
    text-decoration: none;
    display: flex;
    gap:20px;
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
}
.accounts__window .list img{
    height: 100%;
    padding: 10px;
}
.accounts__window .list .item:hover{
    opacity: 0.8;
}
/*=================== PROJECTS ========================*/
.projects-exe{
    background-color: #000000;
    display: flex;
    flex-direction: row;
}
.projects-exe .tray{
    flex:1;
    display: flex;
    flex-direction: column;
    gap:15px;
    padding:20px;
    height:100%;
    overflow-x: hidden;
}
.projects-exe .tray .project{
    flex-shrink: 0;
    background-color: white;
    display: flex;
    align-items: center;
    gap:1vw;
    flex-shrink: 0;
    height:30%;
    border-radius:10px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid var(--primary);
    transition: background-color 0.2s;
}

.projects-exe .tray .project:hover{
    background-color: var(--primary);
}
.projects-exe .tray .project:active{
    opacity: 0.8;
}
.projects-exe .tray .project img{
    height:100%;
    width:40%;
    object-position: center;
    object-fit:cover;
    background-color: black;
    color: white;
    overflow: hidden;
}
.projects-exe .tray .project h1{
    font-family: "VT323",monospace;
    font-size:2vw;
    letter-spacing: 3px;
}
.projects-exe .preview{
    flex:1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.projects-exe .preview .card{
    position: relative;
    height:90%;
    width: 80%;
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0px 6px 5px 1px var(--primary);
    border: 2px solid var(--primary);
    transition: box-shadow 0.2s;
}

.projects-exe .preview .card:hover{
    box-shadow: 6px 8px 7px 1px #aaff00;
}
.projects-exe .preview .card img{
    height:50%;
    width: 100%;
    object-fit: cover;
    background-color: black;
}
.projects-exe .preview .card h1{
    margin:1vh 1vw;
    font-size: 2vw;
    font-family: "VT323",monospace;
    letter-spacing: 2px;
}
.projects-exe .preview .card p{
    margin:.2vh 1vw;
    font-size: 1.5vw;
    font-family: "VT323",monospace;

}
.projects-exe .preview .card a{
    background-color: black;
    color:white;
    display: inline;
    text-decoration: none;
    margin: 10px;
    margin-left: auto;
    padding: 1vh 1vw;
    border: none;
    font-family: "VT323",monospace;
    font-size:2vw;
    border-radius:5px;
    cursor: pointer;
    transition: background-color .2s;
}
.projects-exe .preview .card a:hover{
    background-color: var(--primary);
}
/*=================== SETTINGS ========================*/

/*=================== START MENU ======================*/
/*=================== TERMINAL ========================*/
.terminal-exe{
    background-color: transparent;
    color:white;
    font-size:1.2vw;
}
.terminal-exe main{
    background-color: #2D0922;
    height:100%;
    width: 100%;
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    overflow-y:scroll;
}
.terminal-exe .prompt{
    display: flex;
}
.terminal-exe .prompt .username{
    color:#aaff00;
}
.terminal-exe .prompt input{
    outline: none;
    border:none;
    flex:1;
    font-size:1.4vw;
    font-weight: bold;
    background-color: transparent;
    margin-left: 1vw;
    color: white;
}
.terminal-exe .history{
    width:100%;
    white-space: pre-wrap;
}
.green{color:#aaff00;}
.red{color:red;}
.yellow{color:yellow;}
.white{color:white;}
.blue{color: cyan;}
/*------- Terminal Light Mode -------------*/
.lightMode{
    transition-duration: 0.3s;
}
.terminal-exe main.lightMode{
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 1);
    height:100%;
    width: 100%;
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    overflow-y:scroll;
}
.terminal-exe .prompt .username.lightMode{
    color:purple;
}
.terminal-exe .prompt input.lightMode{
    color: black;
}
.white.lightMode{color:black;}
.green.lightMode{color:purple;}
.blue.lightMode{color:black;}
/*=================== BROWSER =========================*/
.browser__window{
    background-color: cyan;
    transform: translateX(-10px,030px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.browser__window img{
    width:60%;
    object-fit: cover;
}
.browser__window form{
    /* background-color: blue; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:20px;
    width: 100%;
}
.browser__window form input{
    width:70%;
    padding:5px 10px;
    font-size:2vw;
    border-radius: 5px;
    border: none;
    box-shadow: 0 3px 10px 2px black;
    cursor: pointer;
}
.browser__window form button{
    font-size:2vw;
    padding:10px 15px;
    border: 1px solid black;
    border-radius: 5px;
    cursor: pointer;
    font-family: "VT323",monospace;
    letter-spacing: 2px;
    transition: background-color 0.2s;
}
.browser__window form button:hover,
.browser__window form button:focus{
    background-color: tomato;
}
.browser__window form button:active{
    opacity: 0.6; 
}
/*=================== MEMES========================*/
.memes-exe{
   background-color: black;
   display: block;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   gap:2vw;
}

.memes-exe .meme{
    height: 90%;
    aspect-ratio: 1;
    position: relative;
    overflow: hidden;
}
.memes-exe .meme img{
    height:100%;
    width: 100%;
    object-fit: contain;
    border-radius: 10px;
    overflow: hidden;
}
.memes-exe .meme .phrase{
    background-color: red;
    position: absolute;
    left:70%;
    transform: translate(-50%);
    font-size:2vw;
    cursor: grab;
    /* padding: 5px; */
    font-weight: bold;
    background-color: white;
    border-radius: 5px;
}
.memes-exe .meme .phrase:active{
    cursor: grabbing;
    opacity: 0.8;
}
.memes-exe .meme .text1{top:10%;}
.memes-exe .meme .text2{top:30%;}
.memes-exe .meme .text3{top:50%;}
.memes-exe .meme .text4{top:70%;}
.memes-exe .meme .text5{top:90%;}
.memes-exe .panel{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 90%;
    width:30%;
}
.memes-exe input{
    height:13%;
    border-radius: 5px;
    text-align: center;
    font-size:2vw;
    border: 2px solid tomato;
    outline: none;
}
.memes-exe .newMeme{
    left:0;
    font-size: 3vw;
    font-family: "VT323",monospace;
    letter-spacing: 2px;
    padding: 10px;
    border-radius: 5px;
    border:none;
    cursor: pointer;
    transition: background-color 0.2s;
}
.memes-exe .newMeme:hover,
.memes-exe .newMeme:focus{
    background-color: var(--primary);
}
.memes-exe .newMeme:active{
    opacity:0.6;
}
/*=================== FOLDER ==========================*/
.folder-exe main{
    display: flex;
    flex-direction: row;
    height:100%;
    width: 100%;
}
.folder-exe .sidePanel{
    width:30%;
    background-color: #1E1F22;
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    gap:5px;
    overflow-y:scroll;
}
.folder-exe .sidePanel .tray{
    color: white;
    font-weight: bold;
}
.folder-exe .sidePanel .tray h3{
    border-radius: 5px;
    padding:5px;
    font-size:1.6vw;
    cursor: pointer;
    background-color: green;
}
.folder-exe .sidePanel .tray ul{
    overflow: hidden;
    padding:5px 20px;
    height: 0; /*gets toggled*/
    display: none;/*gets toggled*/
}
.folder-exe .sidePanel .tray ul.isActive{
    height:auto;
    display: block;
}

.folder-exe .sidePanel .tray ul li{
    list-style-type: none;
    font-size:1.4vw;
    cursor: pointer;
    padding:5px;
    border-radius: 5px;
    transition: background-color 0.2s , color 0.2s;
}
.folder-exe .sidePanel .tray ul li:hover{
    background-color: var(--primary);
    color: black;
}
.folder-exe .sidePanel .tray ul li:active{
    opacity: 0.6;
}
.folder-exe .wrapper{
    width:70%;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
}
.folder-exe .container{
    height:90%;
    width: 90%;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.folder-exe .container img{
    height:100%;
    width:100%;
    object-fit:contain;
    display: none;/*gets toggled*/
    border-radius: 10px;
}
.folder-exe .container img.isActive{
    display: block;
}

.folder-exe .container .code{
    display: none;
    padding:20px;
    height:100%;
    width:100%;
    overflow-y:scroll;
    overflow-x:hidden;
    user-select:text;
    font-size:1.2vw;
    font-weight: bold;
    border-radius: 10px;
    background-color: orange;
}
.folder-exe .container .code.isActive{
    display: block;
}