@import url('https://fonts.bunny.net/css?family=dejavu-sans:400,700');

@media (max-width: 600px) {
    .hide_on_mobile, .spacer {
        display: none !important;
    }

    .active_window div {
        font-size: 10px !important;
    }

    .topbar div {
        font-size: 14px !important;
    }

    .desktop_icon {
        margin-left: 20px !important;
        margin-top: 5px !important;
    }
    
    .desktop_icon img {
        height: 75% !important;
        width: 75% !important;
    }

    .desktop-container {
        flex-direction: row !important;
    }
}

body {
    margin: 0;
    padding: 0;
    font-family: "DejaVu Sans", sans-serif;
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: none; 
    -moz-osx-font-smoothing: none;

    background-image: url("assets/10.04-LTS-Lucid-Lynx.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
    overflow-x: hidden;

    cursor: url('assets/left_ptr.png') 7 4, auto;
}

a, button, .destkop_icon, .desktop_icon img, .desktop_icon div, .close-btn img, .menu-trigger  {
    cursor: url('assets/hand2.png') 9 5, pointer;
}

.topbar, .bottombar {
    width: 100vw;
    height: 1.75em;
    overflow: hidden;

    background: linear-gradient(0deg, rgba(60, 59, 55, 1) 0%, rgba(78, 77, 72, 1) 30%, rgba(91, 92, 86, 1) 70%);
    font-size: 16px;
    box-shadow: 0 1px 2px #32322d;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bottombar {
    position: fixed;
    bottom: 0;
}

.left_group, .right_group {
    align-items: center;
    display: flex;
    height: 100%;
}

.right_group {
    flex-direction: row-reverse;
}

.bottombar .right_group, .bottombar .left_group, .topbar .left_group {
    padding: 0px;
}

.topbar img, .bottombar img {
    height: 100%;
    max-height: 1.75em;
    padding: 0.1em;
}

.topbar div, .bottombar div {
    color: #eae3d0;
    padding-left: 0.5em;
    padding-right: 0.5em;
    overflow: hidden;
}

.bottombar img {
    padding: 0em;
}

.empty_desktop, .curr_desktop {
    width: 1em;
    height: 1.7em;
    margin: 0.04em;
}

.empty_desktop {
    background-color: #292927;
}

.curr_desktop {
    background-color: #837663;
    display: flex;
    justify-content: center;
    align-items: center;
}

.curr_desktop div {
    background-color: #e0d7ca;
    border: 1px solid #ffffff;
    width: 100%;
    height: 50%;
}

.desktop_icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 3em;
    color: #ffffff;
    margin-left: 75px;
    margin-top: 15px;
    margin-bottom: 0px;
}

.desktop_icon img {
    width: 100%;
}

.desktop_icon a {
    text-decoration: none;
}

.desktop_icon:hover img {
    filter: brightness(1.25);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

#show_site:checked ~ label[for="show_site"] div,
#show_blog:checked ~ label[for="show_blog"] div {
  background-color: #c6b9a6;
  color: #323232;
  border-radius: 5px;
  padding-left: 5px;
  padding-right: 2px;
  padding-bottom: 2px;
}

.gedit_icon, .file_browser_icon {
    display: none;
}

#show_site:checked ~ label[for="show_site"] img,
#show_blog:checked ~ label[for="show_blog"] img {
    filter: brightness(0.75);
}

body:has(#show_site:checked) .active_window,
#show_site:checked ~ #gedit {
    display: flex;
}

body:has(#show_blog_gedit:checked) .gedit_icon,
body:has(#show_site:checked) .gedit_icon {
    display: inline;
}

body:has(#show_site:checked) .active_window_text::before {
    content: "mainpage (~/Desktop/site..." !important;
}

body:has(#show_blog:checked) .active_window,
#show_blog:checked ~ #file {
    display: flex;
}

body:has(#show_blog:checked) .file_browser_icon {
    display: inline;
}

body:has(#show_blog:checked) .active_window_text::before {
    content: "blog - File Browser" !important;
}

body:has(#show_blog_gedit:checked) .active_window,
#show_blog_gedit:checked ~ #blog_gedit {
    display: flex;
}

body:has(#show_blog_gedit:checked) .active_window_text::before {
    content: "blog (~/Desktop/blog) - g..." !important;
}

.active_window {
    background: linear-gradient(0deg,rgba(100, 92, 80, 1) 0%, rgba(121, 109, 93, 1) 100%);
    /*display: flex;*/
    flex-direction: row;
    align-items: center;
    height: 1.75em;
    border-radius: 5px;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
    /*padding-right: 50px !important;*/
    width: 14.5em;
    margin-top: 3px;
    display: none;
}

.active_window div {
    color: #ffffff;
    font-size: 16px;
}

.active_window img {
    height: 1.25em;
}

.menu-trigger {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 5px;
    padding-right: 4px;
    list-style: none;
    user-select: none;
}

.menu-trigger div {
    color: inherit;
}

.menu-trigger img {
    height: 1.5em;
}

.menu-trigger::-webkit-details-marker {
  display: none;
}

.menu-content {
    position: absolute;
    top: 1.75em;
    left: 0;
    background-color: #3c3b37;
    z-index: 5;
    width: 10em;
}

.startmenu {
    height: 1.71em;
}

.startmenu[open] {
    background: linear-gradient(0deg,rgba(161, 146, 124, 1) 0%, rgba(194, 182, 164, 1) 100%);
    color: #ffffff;
    box-shadow: inset 0 0 0 1px #a3947f;
}

.desktop-container {
    display: flex;
    flex-direction: column;
}