/* TSOS.css */

html {
    overflow-y: auto;
    height: 100vh;
}

body {
    font-family: Helvetica, Verdana, Arial, sans-serif;
    font-size: 12pt;
    font-weight: normal;
    font-style: normal;
    height: 100vh;
}

h1 {
    color: #eee;
    font-size: 28pt;
    font-weight: normal;
    font-style: normal;
}

h2 {
    color: #eee;
    font-size: 20pt;
    font-weight: normal;
    font-style: normal;
}

h3 {
    font-family: Helvetica, Verdana, Arial, sans-serif;
    font-size: 16pt;
    font-weight: normal;
    font-style: normal;
}

#display {
    cursor: text;
}

#display:focus {
    outline: none;
}

#title {
    cursor: default;
    font-family: 'Baloo Bhaijaan', cursive;
    overflow: hidden;
}

#footer {
    text-align: center;
    padding: 5px;
    font-size: 12px;
}

#btnStartOS i {
    color: hsl(0, 0%, 21%);
    transition: color 0.2s;
}

#btnStartOS:disabled i {
    color: hsl(141, 71%, 48%);
}

#btnStartOS.destruct {
    transform: translateY(8px);
    transition: transform 0.2s ease-in;
}

#btnHaltOS.destruct {
    transform: rotate(9deg);
    transform-origin: bottom left;
    transition: transform 0.2s ease-in;
}

.hero-head {
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: 0 3px 10px black;
}

.hero.is-dark .nav {
    box-shadow: none;
}

.card {
    box-shadow: 0 4px 5px -1px black;
    width: 100%;
    height: 100%;
    min-height: 150px;
}
.card .card-content {
    overflow-y: auto;
    padding: 0.5rem;
    margin-top: 1px;
}

#message-wrapper {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    padding: 10px 20px;
    background-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: 2s opacity;
    min-height: 44px;
}

#canvas-wrapper {
    overflow-y: auto;
    padding: 0.5rem;
    background-color: #FDF6E3;
    max-height: 523px;
}

#canvas-card {
    transform-origin: top left;
    max-height: 528px;
}

#canvas-card.destruct {
    animation: beginSwing 3.5s ease-in-out forwards,
    swing 1.75s 3.5s ease-in-out forwards infinite;
}

@keyframes swing {
    0% {
        transform: rotate(55deg);
    }
    50% {
        transform: rotate(35deg);
    }
    100% {
        transform: rotate(55deg);
    }
}

@keyframes beginSwing {
    0% {
        transform: rotate(0deg);
        animation-timing-function: ease-in;
    }
    10% {
        transform: rotate(45deg);
        animation-timing-function: ease-out;
    }
    20% {
        transform: rotate(75deg);
        animation-timing-function: ease-in;
    }
    30% {
        transform: rotate(45deg);
        animation-timing-function: ease-out;
    }
    40% {
        transform: rotate(15deg);
        animation-timing-function: ease-in;
    }
    50% {
        transform: rotate(45deg);
        animation-timing-function: ease-out;
    }
    60% {
        transform: rotate(60deg);
        animation-timing-function: ease-in;
    }
    70% {
        transform: rotate(45deg);
        animation-timing-function: ease-out;
    }
    80% {
        transform: rotate(30deg);
        animation-timing-function: ease-in;
    }
    90% {
        transform: rotate(45deg);
        animation-timing-function: ease-out;
    }
    100% {
        transform: rotate(50deg);
        animation-timing-function: ease-in;
    }
}

.card-header-title {
    padding: 0.4rem 0.75rem;
}

.table td {
    padding: 0 0.5em;
    text-align: center;
}

#diskTable td,
#memoryTable td,
#cpuTable tbody tr,
#processTable tbody tr {
    font-family: "Consolas", serif;
}

#diskTable td {
    text-align: left;
    padding: 0;
}
#diskTable td .memory {

}
#diskTable td.key {
    padding-left: 5px;
}
#diskTable td:not(.key) {
    padding-left: 10px;
}
#diskTable tr:not(.unused) td .next-loc {
    color: #276cda;
    font-weight: bold;
}
#diskTable tr:not(.unused) td .next-loc:hover {
    color: #96add1;
}

#diskTable tr:not(.unused) td .cf {
    color: #1ca64c;
    font-weight: bold;
}
#diskTable tr.unused td {
    color: lightgray;
}

.nav-left, .nav-right {
    flex-basis: unset;
}

.selected-ir,
.selected-code {
    font-weight: bold;
    color: #276cda;
}
.selected-mem {
    font-weight: bold;
    color: #00e7eb;
}

.mem-location {
    cursor: pointer;
    transition: font-weight 0.2s, color 0.2s;
}
.mem-location:hover {
    font-weight: bold;
    color: #cd0930;
}
.mem-location.breakpoint {
    background-color: #CD0930;
    color: white;
}

.log-msg {
    display: inline-block;
    margin-bottom: 5px;
    margin-left: 5px;
}

.log-tags {
    margin-bottom: 0!important;
    display: inline-block;
}
.log-tags .tag {
    margin-bottom: 0;
}

#start-icon {
    font-size: 5rem;
    transition: color 0.3s;
}
#start-icon:hover {
    cursor: pointer;
    color: #00d1b2;
}
#start-icon.zoom {
    animation: zoomOut 0.5s ease-in forwards;
}

@keyframes zoomOut {
    0% { transform: scale(1); opacity: 1; }
    20% { transform: scale(1.2); }
    100% { transform: scale(0); opacity: 0; }
}

#os-view .hero-body,
#os-view .hero-foot {
    opacity: 0;
}
#os-view.show .hero-body {
    animation: fadeIn 0.5s linear forwards;
}

#os-view.show .hero-foot {
    animation: fadeIn 1s linear forwards;
}

#os-view .hero-head {
    transform: translateY(-60px);
    transition: 1s all;
}
#os-view .hero-head.show {
    transform: translateY(0px);
}

#os-view .card {
    transition: 0.75s all;
    transform: scale(0);
    transform-origin: 50% 50% 0;
}
#os-view .card.show {
    transform: scale(1);
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}