:root {
    --icon-color: #938EAC;
    --active-icon-color: #4C4376;
}

@keyframes blinker {
    50% {
      opacity: 0;
    }
}


@keyframes dev_mode {
    0% {
        transform: rotate(-5deg);
    }
    50% {
        transform: rotate(5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}


html, body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

body {
    display: flex;
    background-color: black;
    justify-content: space-around;
    align-items: stretch;
}

#main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5em;
}

#dev_mode_tools {
    display: none;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: #f8f6ed;
    flex-grow: 1;
    padding: 1em 10%;
}

#dev_mode_tools h1 {
    color: #b0d3e7;
}

#dev_mode_tools #dev_mode_logs {
    width: 100%;
    height: 400px;
    list-style-type: none;
    padding: 0;
    margin: 0;
    scroll-behavior: auto;
    overflow-y: scroll;
}

#dev_mode_tools #dev_mode_logs * {
    overflow-anchor: none;
}

#dev_mode_tools #dev_mode_logs #anchor {
    overflow-anchor: auto;
    height: 1px;
}

#dev_mode_tools #dev_mode_logs li {
    display: flex;
    padding: 0.5em;
    align-items: center;
}

#dev_mode_tools #dev_mode_logs li:nth-child(even) {
    background-color: #b0d3e766;
}

#dev_mode_tools #dev_mode_logs li .tag {
    font-weight: bold;
    padding: 0.4em 0.6em;
    border-radius: 0.5em;
    margin-right: 1%;
    color: white;
}

#dev_mode_tools #dev_mode_logs li.err .tag {
    background-color: #d9544d;
}

#dev_mode_tools #dev_mode_logs li.err {
    background-color: #d9544d33;
}

#dev_mode_tools #dev_mode_logs li.mem .tag {
    background-color: #b790d4;
}

#dev_mode_tools #dev_mode_logs li.cpu .tag {
    background-color: #a4bac7;
}

#dev_mode_tools .section {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    border-radius: 1rem;
}

#tamagotchi {
    width: 1015px;
    height: 849px;
}

#tamagotchi #display {
    width: 320px;
    height: 327px;
}


#tamagotchi #screen {
    width: 320px; 
    height: 160px;
    image-rendering: pixelated; 
    background-color: transparent;
    border: none;
}

#tamagotchi .btn {
    background: url(./assets/button.svg) no-repeat center;
    background-size: contain;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    width: 78px;
    height: 78px;
}

#tamagotchi .btn:hover {
    filter: brightness(0.9);
}

#tamagotchi .btn:active {
    transform: rotate(80deg) scale(0.95);
    transition: transform 0.1s ease-out;
}

#tamagotchi .icon {
    fill: var(--icon-color);
}

#tamagotchi .icon.active {
    fill: var(--active-icon-color);
}

#tamagotchi #hw_screen {
    transform: translateY(-120%);
    transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1);
}

#tamagotchi #hw_screen.animate-in {
    transform: translateY(0);
}


#tamagotchi #pcb #pcb_cpu {
    cursor: pointer;
    transform-origin: center;
}

#tamagotchi #pcb #pcb_cpu.clicked {
    animation: dev_mode 1s linear;
}

#tamagotchi #pcb.dragover #pcb_cpu {
    transform: scale(1.1);
    transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1);
}


#loader {
    margin: 0;
    padding: 0;
    color: white;
    animation: blinker 1s linear infinite;
}

#dev_mode_message {
    display: none;
    color: #b0d3e7;
}