/* =========================
   RESET
   ========================= */

* {
    box-sizing: border-box;
}


/* =========================
   BODY / DESKTOP
   ========================= */

body {
    margin: 0;

    width: 100vw;
    height: 100vh;

    overflow: hidden;

    font-family: "VT323", monospace;

    background-image: url("bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* =========================
   DESKTOP
   ========================= */

#desktop {
    position: relative;

    width: 100%;
    height: 100%;
}


/* =========================
   DESKTOP ICONS
   ========================= */

.desktop_icon {
    position: absolute;

    width: 90px;

    padding: 6px;

    text-align: center;

    border: 1px solid transparent;

    cursor: pointer;

    user-select: none;
}


/* First icon */

.desktop_icon:nth-child(1) {
    top: 30px;
    left: 30px;
}


/* Second icon */

.desktop_icon:nth-child(2) {
    top: 130px;
    left: 30px;
}

/* Third icon */
.desktop_icon:nth-child(3) {
    top: 230px;
    left: 30px;
}


/* Icon image */

.icon_image {
    width: 52px;
    height: 52px;

    margin: 0 auto 5px;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 38px;

    filter:
        drop-shadow(
            1px 2px 2px rgba(0, 0, 0, 0.35)
        );
}


/* Icon text */

.icon_name {
    display: inline-block;

    padding: 2px 4px;

    color: white;

    font-size: 13px;

    text-shadow:
        1px 1px 2px black;
}


/* Icon hover */

.desktop_icon:hover {
    background: rgba(150, 190, 220, 0.25);

    border: 1px solid rgba(255, 255, 255, 0.4);
}


/* Icon click */

.desktop_icon:active {
    background: rgba(100, 160, 210, 0.4);
}


/* =========================
   WINDOWS
   ========================= */

.window {
    position: absolute;

    width: 650px;
    height: 450px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    display: none;

    background: #edf0f2;

    border: 3px solid #6d7c86;

    border-radius: 7px;

    box-shadow:
        inset 2px 2px 0 #ffffff,
        inset -2px -2px 0 #3f4b52,
        5px 5px 0 rgba(0, 0, 0, 0.25);

    overflow: hidden;
}


/* =========================
   TITLE BAR
   ========================= */

.top_bar {
    position: relative;

    width: 100%;
    height: 42px;

    display: flex;

    align-items: center;

    padding-left: 12px;

    background-color: #82a392;

    border-bottom: 2px solid #718da6;

    box-shadow:
        inset 0 1px 0 white;

    cursor: grab;

    user-select: none;
}


.top_bar:active {
    cursor: grabbing;
}


/* =========================
   WINDOW TITLE
   ========================= */

.window_title {
    
    font-family:"VT323", monospace;

    font-size: 18px;

    font-weight: 500;

    color: #e8eaec;

    text-shadow:
        0 2px 0 black;
}


/* =========================
   WINDOW BUTTONS
   ========================= */

.window_buttons {
    margin-left: auto;

    height: 100%;

    display: flex;

    align-items: flex-start;

    padding-top: 4px;
    padding-right: 5px;

    gap: 3px;
}


.window_buttons button {
    width: 42px;
    height: 29px;

    padding: 0;

    font-family:
        "Segoe UI",
        Tahoma,
        sans-serif;

    font-size: 16px;

    color: #263642;

    background: linear-gradient(
        to bottom,
        #edf5fb,
        #c3d9ea
    );

    border: 1px solid #7892a8;

    border-radius: 3px;

    box-shadow:
        inset 1px 1px 0 white,
        inset -1px -1px 0 #9cafbd;

    cursor: pointer;
}


/* Button hover */

.window_buttons button:hover {
    background: linear-gradient(
        to bottom,
        white,
        #c9e1f5
    );

    border-color: #4f87b5;
}


/* Button press */

.window_buttons button:active {
    background: #b8cfdf;

    box-shadow:
        inset 1px 1px 2px
        rgba(0, 0, 0, 0.25);
}


/* Close button hover */

.window_buttons button:last-child:hover {
    color: white;

    background: linear-gradient(
        to bottom,
        #e98989,
        #c94b4b
    );

    border-color: #a43d3d;
}


/* =========================
   WINDOW CONTENT
   ========================= */

.window_content {
    width: 100%;
    height: calc(100% - 42px);

    padding: 30px;

    overflow-y: auto;

    background: #edf0f2;

    color: #263640;
}


/* =========================
   HEADINGS
   ========================= */

.window_content h1 {
    margin-top: 0;

    font-size: 30px;

    font-weight: 400;

    text-shadow:
        0 1px white;
}


.window_content h2 {
    font-size: 20px;

    font-weight: 500;
}


/* =========================
   PARAGRAPHS
   ========================= */

.window_content p {
    max-width: 550px;

    line-height: 1.6;

    color: #465862;
}


/* =========================
   DIVIDER
   ========================= */

.window_content hr {
    border: 0;

    border-top: 1px solid #b5c0c6;
    border-bottom: 1px solid white;

    margin: 25px 0;
}


/* =========================
   PROJECT CARDS
   ========================= */

.project {
    margin-bottom: 18px;

    padding: 15px;

    background: #e2e7ea;

    border: 2px solid #aab7be;

    border-top-color: white;
    border-left-color: white;

    box-shadow:
        1px 1px 0 #68777e;
}


/* Project title */

.project h2 {
    margin: 0 0 6px;

    font-size: 20px;

    font-weight: 500;

    color: #263640;
}


/* Project description */

.project p {
    margin: 5px 0 12px;

    font-size: 14px;

    line-height: 1.5;

    color: #465862;
}


/* =========================
   PROJECT BUTTON
   ========================= */

.project_button {
    padding: 5px 14px;

    font-family:
        "Segoe UI",
        Tahoma,
        sans-serif;

    background: linear-gradient(
        to bottom,
        #f5f9fc,
        #c7dbe9
    );

    border: 1px solid #7892a8;

    border-radius: 3px;

    box-shadow:
        inset 1px 1px white,
        inset -1px -1px #a0b2be;

    cursor: pointer;
}


/* Project button hover */

.project_button:hover {
    background: linear-gradient(
        to bottom,
        white,
        #d2e7f6
    );
}


/* Project button press */

.project_button:active {
    background: #c0d4e2;

    box-shadow:
        inset 1px 1px 2px
        rgba(0, 0, 0, 0.25);
}

/* =========================
   SKILLS WINDOW
   ========================= */

.skills_window {
    width: 700px;
    height: 500px;
}


/* =========================
   SKILLS CONTENT
   ========================= */

.skills_content {
    position: relative;

    width: 100%;
    height: calc(100% - 42px);

    overflow: hidden;

    background: #e9edef;

    color: #263640;
}


/* =========================
   BOOT SCREEN
   ========================= */

#skills_boot {
    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    background: #dfe5e8;

    z-index: 3;
}


.boot_logo {
    margin-bottom: 20px;

    font-family: "VT323", monospace;

    font-size: 42px;

    letter-spacing: 3px;

    color: #344b5a;

    text-shadow:
        1px 1px 0 white;
}


.boot_status {
    margin-bottom: 12px;

    font-family: "VT323", monospace;

    font-size: 18px;

    letter-spacing: 1px;

    color: #506674;
}


.boot_bar {
    width: 320px;
    height: 14px;

    padding: 2px;

    background: #c3cdd2;

    border: 2px solid #71818a;

    box-shadow:
        inset 1px 1px 0 #89969d,
        inset -1px -1px 0 white;
}


#boot_progress {
    width: 0%;
    height: 100%;

    background: #6c9fc2;

    transition: width 0.05s linear;
}


#boot_message {
    margin-top: 12px;

    font-family: "VT323", monospace;

    font-size: 16px;

    color: #61727d;
}


/* =========================
   CODE STREAM
   ========================= */

#skills_code {
    position: absolute;

    inset: 0;

    display: none;

    padding: 15px;

    overflow: hidden;

    background: #e4e9eb;

    z-index: 2;
}


#code_output {
    font-family: "VT323", monospace;

    font-size: 16px;

    line-height: 1.1;

    color: #536d7a;

    word-break: break-all;
}


/* =========================
   SKILLS MAIN
   ========================= */

#skills_main {
    position: absolute;

    inset: 0;

    display: none;

    padding: 24px;

    overflow-y: auto;

    background: #edf0f2;
}


/* =========================
   SKILLS HEADER
   ========================= */

.skills_header {
    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 20px;

    padding-bottom: 12px;

    border-bottom: 2px solid #aebbc2;

    box-shadow:
        0 1px 0 white;
}


.system_label {
    font-family: "VT323", monospace;

    font-size: 15px;

    letter-spacing: 2px;

    color: #78909d;
}


.skills_header h1 {
    margin: 2px 0 0;

    font-family: "VT323", monospace;

    font-size: 38px;

    font-weight: 400;

    letter-spacing: 2px;

    color: #304754;
}


.system_status {
    padding: 6px 10px;

    font-family: "VT323", monospace;

    font-size: 16px;

    color: #4d7487;

    background: #dce8ed;

    border: 1px solid #9eb2bd;

    box-shadow:
        inset 1px 1px white,
        inset -1px -1px #b2c0c7;
}


/* =========================
   SKILL GRID
   ========================= */

.skill_grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 14px;
}


/* =========================
   SKILL CARDS
   ========================= */

.skill_card {
    background: #e2e7ea;

    border: 2px solid #aab7be;

    border-top-color: white;
    border-left-color: white;

    box-shadow:
        1px 1px 0 #68777e;
}


.skill_card_header {
    padding: 8px 10px;

    font-family: "VT323", monospace;

    font-size: 19px;

    letter-spacing: 1px;

    color: #344d5b;

    background: linear-gradient(
        to bottom,
        #d8e8f1,
        #b9d0df
    );

    border-bottom: 1px solid #91a6b2;
}


.skill_list {
    padding: 10px;
}


.skill {
    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 6px 0;

    font-size: 13px;

    border-bottom: 1px solid #c4cdd1;
}


.skill:last-child {
    border-bottom: none;
}


.skill_level {
    font-family: "VT323", monospace;

    font-size: 16px;

    letter-spacing: 1px;

    color: #648ba0;
}


.learning_item {
    padding: 6px 0;

    font-family: "VT323", monospace;

    font-size: 17px;

    color: #526b78;
}


/* =========================
   FOOTER
   ========================= */

.skills_footer {
    margin-top: 18px;

    padding-top: 8px;

    font-family: "VT323", monospace;

    font-size: 14px;

    letter-spacing: 1px;

    color: #83939c;

    border-top: 1px solid #c0c9cd;
}