#background {
 position: fixed;
 inset: 0;
 z-index: 0;
 background-image: url(./images/sofa.jpg);
 background-size: 12vw 16vh;
 background-repeat: no-repeat;
 background-position: center;
 image-rendering: pixelated;
 transform: scale(9);
 transform-origin: center;
 filter: blur(0.8px);
 height: 100dvh;
 margin: 0%;
 pointer-events: none;
}
*:not(#background) {
 pointer-events: auto;
}
p {
 margin: 0%;
 margin-left: 10px;
 margin-right: 10px;
 font-size: 1.2rem;
 font-family: Fredoka, Arial, sans-serif;
 color: #2a1810;
}
#taskbar {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 display: flex;
 flex-direction: row;
 background-color: #ff6b6b;
 justify-content: space-between;
 padding-right: 10px;
 z-index: 20;
}
#taskbar p { color: #2a1810; filter: none; }

#welcome {
border: 5px solid #2a2a2a;
border-radius: 12px;
width: 340px;
padding: 16px;
position: absolute;
background-color: white;
}

#welcomeheader {
cursor: grab;
padding: 6px;
margin: -8px -8px 10px -8px;
background: #e8e4dc;
}

#welcomeclose {
display: inline-block;
width: 13px;
height: 13px;
background: #c45c4a;
border-radius: 50%;
cursor: pointer
}

h1 {
font-size: 22px;
margin: 8px 0
}

a { color: #3a4a42 }

#topbar {
padding: 8px 13px;
}

.ic {
 position: absolute;
 top: 50px;
 left: 11px;
 width: 58px;
 font-size: 13px;
 text-align: center;
 cursor: pointer
}
#scratchopen { top: 118px; left: 11px }

#welcome {
 display: flex;
 flex-direction: column
}

#scratch {
border: 5px solid #2a2a2a;
border-radius: 16px;
width: 280px;
padding: 11px;
position: absolute;
background-color: white;
flex-direction: column
}

#scratchheader {
cursor: grab;
padding: 6px;
margin: -8px -8px 10px -8px;
background: #d4ccc0
}

#scratchclose {
display: inline-block;
width: 13px;
height: 13px;
background: #c45c4a;
border-radius: 50%;
cursor: pointer
}

textarea {
 min-height: 118px;
 font-family: Helvetica, Arial, sans-serif;
 font-size: 13px
}

#brand { cursor: pointer }

#topbar { z-index: 5 }

textarea { width: 100%; box-sizing: border-box }
.ic { font-weight: 700 }

.ic {
 background: #f6e7c1;
 border: 3px solid #2a2a2a;
 border-radius: 10px;
 padding: 13px 4px;
 width: 68px;
 box-sizing: border-box
}
#welcomeopen { background: #f6e7c1 }
#scratchopen { background: #f2b8c6; top: 136px }

#animeopen { background: #d8c4ef; top: 222px }

#anime {
border: 5px solid #2a2a2a;
border-radius: 14px;
width: 300px;
padding: 11px;
position: absolute;
background-color: white;
flex-direction: column
}
#animeheader {
cursor: grab;
padding: 6px;
margin: -8px -8px 10px -8px;
background: #e4d4f0
}
#animeclose {
display: inline-block;
width: 13px;
height: 13px;
background: #c45c4a;
border-radius: 50%;
cursor: pointer
}
#picks button {
 margin-right: 8px;
 font-family: Helvetica, Arial, sans-serif
}
#shot { max-width: 100%; max-height: 220px; margin-top: 10px }

.app-window {
 position: absolute;
 height: auto;
 width: 380px;
 background-color: #f0c230;
 border: 8px solid #2a1810;
 display: flex;
 flex-direction: column;
 z-index: 2;
 top: 64px;
}
.app-header {
 height: 40px;
 background-color: #5ad0e8;
 display: flex;
 flex-direction: row;
 align-items: center;
 cursor: grab;
}
.header-title { font-size: 1.8rem; }
.close-button {
 width: 18px;
 height: 18px;
 margin-left: 8px;
 border-radius: 50%;
 border: none;
 background: #ff6b6b;
 cursor: pointer;
}
.app-icon {
 position: relative;
 z-index: 3;
 margin-top: 52px;
 width: 74px;
 margin-left: 8px;
 text-align: center;
 cursor: pointer;
 background: #d9a5e8;
 border: 3px solid #2a1810;
 border-radius: 10px;
}
.app-icon.selected { background: #8fde5d; }
#anime {
 background-color: #4ecdc4;
 width: 360px;
 height: auto;
}
.notes-window {
 height: 500px;
 width: 660px;
}
#notes-content {
 padding: 20px;
 display: grid;
 grid-template-columns: repeat(auto-fill, 200px);
 gap: 10px;
 overflow: hidden;
}
.note {
 height: 150px;
 width: 150px;
 resize: none;
 background-color: #d9a5e8;
}
.add-note {
 width: 155px;
 font-size: 6rem;
 background-color: #ff6b6b;
 color: white;
 cursor: pointer;
}
.add-note:hover {
 background-color: #e85a5a;
}
#welcome {
 border: 8px solid #2a1810;
 border-radius: 0;
 width: 500px;
 height: 500px;
 padding: 0;
 background-color: #f0c230;
}
#welcomeheader {
 margin: 0;
 padding: 0;
 background: #5ad0e8;
}
.welcome-window {
 display: flex;
 flex-direction: column;
}
#welcome-paragraph {
 margin: 10px;
 font-size: 1.6rem;
 font-family: Fredoka, Arial, sans-serif;
}
#welcome-paragraph a { display: block; margin-top: 8px }
#anime {
 border: 8px solid #2a1810;
 border-radius: 0;
 padding: 0;
 background-color: #4ecdc4;
}
#animeheader {
 margin: 0;
 padding: 0;
 background: #5ad0e8;
}
#openWelcomeTab { margin-top: 78px; }
.calc-window {
 width: 320px;
 height: auto;
 background-color: #f0c230;
}
#act-calculator { padding: 8px; }
#display {
 width: 280px;
 box-sizing: border-box;
 padding: 8px;
 border: 3px solid #2a1810;
 background: #5ad0e8;
 color: #2a1810;
 font-size: 1.6rem;
 font-family: Fredoka, Arial, sans-serif;
}
#keys {
 display: flex;
 flex-wrap: wrap;
 width: 288px;
 margin-top: 8px;
}
.calc-button {
 height: 58px;
 width: 64px;
 margin: 2px;
 background: #8fde5d;
 color: #2a1810;
 border: 3px solid #2a1810;
 font-size: 1.4rem;
 font-family: Fredoka, Arial, sans-serif;
 cursor: pointer;
}
.music-window {
 width: 340px;
 height: auto;
 background: #d9a5e8;
}
#music-item-holder {
 display: flex;
 flex-direction: column;
 align-items: center;
 padding: 10px;
 gap: 8px;
}
#song-image {
 width: 180px;
 height: 140px;
 object-fit: cover;
 border: 4px solid #2a1810;
}
.music-text {
 font-size: 1.3rem;
 color: #2a1810;
}
#slider-song { width: 240px; accent-color: #ff6b6b; }
.music-button {
 margin: 3px;
 background: #4ecdc4;
 color: #2a1810;
 border: 3px solid #2a1810;
 font-family: Fredoka, Arial, sans-serif;
 cursor: pointer;
}