@font-face {
    font-family: InterRegular;
    src: url(fonts/Inter-Regular.ttf);
}

@font-face {
    font-family: InterMedium;
    src: url(fonts/Inter-Medium.ttf);
}

@font-face {
    font-family: InterBold;
    src: url(fonts/Inter-Bold.ttf);
}

*,
html {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background-color: #dedede;
    background-image: url(images/wallpapers/april-2026-messy.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    font-family: InterRegular;
    font-size: 13px;
    overflow: hidden;
}

a {
    text-decoration: none;
    color: #000000;
}

b {
    font-family: InterBold;
}

.footnote-group {
    padding-top: 20px;
}

.footnote {
    font-size: 9px;
}

h1 {
    margin-bottom: 10px;
}

/*
  _   _             _                
 | \ | | __ ___   _| |__   __ _ _ __ 
 |  \| |/ _` \ \ / / '_ \ / _` | '__|
 | |\  | (_| |\ V /| |_) | (_| | |   
 |_| \_|\__,_| \_/ |_.__/ \__,_|_|  
*/
nav {
    height: auto;
    padding: 1px 15px 1px 15px;
    background-color: #ffffffcd;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    justify-content: space-between;
    user-select: none;
    backdrop-filter: blur(5px);
}

.navbar-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.navbar-section span {
    padding: 3px;
}

.navbar-section span:hover {
    background-color: #e5e5e5;
    padding: 3px;
    border-radius: 5px;
    cursor: pointer;
}

/* Navbar Time */
#time {
    color: #000000;
    border-radius: 25px;
    font-size: 12px;
    text-align: left;
}

/*
  _   _       _   _  __ _           _   _                 
 | \ | | ___ | |_(_)/ _(_) ___ __ _| |_(_) ___  _ __  ___ 
 |  \| |/ _ \| __| | |_| |/ __/ _` | __| |/ _ \| '_ \/ __|
 | |\  | (_) | |_| |  _| | (_| (_| | |_| | (_) | | | \__ \
 |_| \_|\___/ \__|_|_| |_|\___\__,_|\__|_|\___/|_| |_|___/
*/
.notifications {
    display: flex;
    flex-direction: row;

    position: absolute;
    border-radius: 5px;
    background-color: #EAECED;

    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    top: 40px;
    margin-top: 10px;
    right: 10px;
    width: 350px;
    cursor: pointer;
    user-select: none;

    z-index: 2000;
    opacity: 0;
    animation: 2s notificationAppears;
    animation-fill-mode: forwards;
}

@keyframes notificationAppears {
    from {
        opacity: 0;
    }

    to {
        opacity: 100;
    }
}

.notifications-buttons div {
    height: 50%;
}

.notification-message {
    padding: 20px 15px;
    border-right: 1px solid #D1D1D8;
}

.read-more-notification:hover,
.close-notification:hover {
    background-color: #c3c3c6;
}

.read-more-notification {
    padding: 20px 15px;
    align-content: center;
    border-bottom: 1px solid #D1D1D8;
    transition: 0.2s;
}

.close-notification {
    padding: 20px 15px;
    align-content: center;
    transition: 0.2s;
}

.notification-message>p {
    margin: 7px 0 0 0;
}

/*
  ____             _    
 |  _ \  ___   ___| | __
 | | | |/ _ \ / __| |/ /
 | |_| | (_) | (__|   < 
 |____/ \___/ \___|_|\_\                                                            
*/
#dock {
    display: flex;
    flex-direction: row;
    position: fixed;
    gap: 10px;
    left: 50%;
    transform: translateX(-50%);
    height: 50px;
    width: auto;
    bottom: 10px;
    padding: 7px 12px 9px 12px;
    background-color: #E5E1DD;
    border-radius: 10px;
    border: 1px solid #B3B3B3;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
}

.doc-icon {
    max-height: 50px;
}

/*#dock-area {
    display:block;
    position: fixed;
    width:100vw;
    bottom:0px;
    height:100px;
}*/
@keyframes slide-up {
    from {
        bottom: -200px;
    }

    to {
        bottom: 10px;
    }
}

/*#dock-area:hover + #dock {
    display: flex;
}
#dock:hover {
    display: flex;
    bottom:10px;
}*/
.doc-icon {
    display: inline;
    cursor: pointer;
}

.doc-icon img {
    height: 100%;
}

.tooltip {
    position: absolute;
    background-color: #ffffffbb;
    color: #000000;
    padding: 10px;
    text-align: left;
    z-index: 1000;
    visibility: hidden;
    width: auto;
    max-width: 200px;
    border-radius: 10px;
    margin-top: 15px;
}

/*
  ____            _    _              
 |  _ \  ___  ___| | _| |_ ___  _ __  
 | | | |/ _ \/ __| |/ / __/ _ \| '_ \ 
 | |_| |  __/\__ \   <| || (_) | |_) |
 |____/ \___||___/_|\_\\__\___/| .__/ 
                               |_|    
*/
.desktop-contents {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    padding: 20px;
    gap: 20px;
}

/*
   _____ _ _       __        ___           _                   
 |  ___(_) | ___  \ \      / (_)_ __   __| | _____      _____ 
 | |_  | | |/ _ \  \ \ /\ / /| | '_ \ / _` |/ _ \ \ /\ / / __|
 |  _| | | |  __/   \ V  V / | | | | | (_| | (_) \ V  V /\__ \
 |_|   |_|_|\___|    \_/\_/  |_|_| |_|\__,_|\___/ \_/\_/ |___/
                                                              
 */
#main-window {
    top: 100px;
    left: 100px;
    position: absolute;
    z-index: 2;
}

.window {
    display: block;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    width: 800px;
    height: 500px;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.window-background {
    background-color: #ffffff;
}

.draggable {
    /*position:absolute;*/
    cursor: grab;
}

.draggable:active {
    cursor: grabbing;
}

.draggable-part {
    height: 50px;
    top: 0px;
    position: absolute;
    background-color: #1DA924;
    z-index: 1000;
}

/* Window - Left Sidebar */
.sidebar {
    background-color: #f7f7f7c5;
    width: auto;
    padding: 20px;
    z-index: 1000;
    backdrop-filter: blur(16px);
}

.sidebar:hover {
    cursor: grab;
}

.sidebar:active {
    cursor: grabbing;
}

.window-controls {
    display: flex;
    flex-direction: row;
    gap: 8px;
    height: 50px;
}

.window-control {
    display: flex;
    width: 7px;
    height: 7px;
    padding: 2.5px;
    box-sizing: content-box;
    align-items: center;
    justify-content: center;
}

.exit {
    background-color: #FF5F57;
    border-radius: 20px;
    border: 0.5px solid #E24138;
    cursor: pointer;
}

.exit-img {
    display: none;
    width: 100%;
}

.exit:hover .exit-img,
.minimize:hover .exit-img,
.expand:hover .exit-img {
    display: block;
    cursor: pointer;
}

.material-symbols-outlined {
    visibility: hidden;
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 0.01;
    width: 5px;
}

.exit:hover>.material-symbols-outlined,
.minimize:hover>.material-symbols-outlined,
.expand:hover>.material-symbols-outlined {
    display: block;
    visibility: visible;
    cursor: pointer;
}

.minimize {
    background-color: #FFBC2E;
    border-radius: 20px;
    border: 0.5px solid #E19D1C;
    cursor: pointer;
}

.expand {
    background-color: #2BC840;
    border-radius: 20px;
    border: 0.5px solid #1DA924;
    cursor: pointer;
}

.sidebar-heading {
    display: block;
    padding-left: 5px;
    color: gray;
    font-family: InterMedium;
    font-size: 13px;
}

ul {
    list-style: none;
    padding: 0;
    cursor: pointer;
}

li {
    padding: 5px;
    border-radius: 5px;
}

li:hover {
    background-color: rgb(197, 197, 197);
}

/* Window - Right */
.window-right {
    background-color: #FCFCFB;
    width: 100%;
    overflow: scroll;
}

.file-explorer-controls {
    display: flex;
    height: 50px;
    border-bottom: 1px solid #D9D9D9;
    width: 100%;
    z-index: 1000;
    background-color: #ffffff;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 0 20px 0 20px;
    box-sizing: border-box;
    position: absolute;
    gap: 10px;
}

.file-explorer-name {
    font-family: InterMedium;
}

.file-explorer-controls-icons {
    height: 25px;
    cursor: pointer;
}

.index-icon:hover {
    height: 25px;
    background-color: #D9D9D9;
    border-radius: 5px;
}

/*Open File*/
.open-file-window {
    width: 500px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    z-index: 1000;
}

/* Txt File Window */
.txt {
    width: 500px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    z-index: 1000;
}

.txt-window-controls {
    display: flex;
    flex-direction: row;
    gap: 8px;
    height: 28px;
    flex-wrap: wrap;
    align-content: center;
    padding-left: 5px;
}

.text-navbar {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 28px;
    background-color: #F7F8F6;
    border-bottom: 1px solid #D9D9D9;
    align-items: center;
    justify-content: space-between;
}

.window-title {
    margin-left: -10%;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70%;
}

.txt-content {
    background-color: #ffffff;
    padding: 0px 3px 3px 3px;
    font-family: 'Courier New', Courier, monospace;
}

/* Images */
.file-explorer {
    display: block;
    overflow: scroll;
    padding: 50px 0 0 0;
}

.thumbnail-view {
    padding: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 50px;
}

.thumbnail {
    max-width: 70px;
    border: 3px solid #ffffff;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    max-height: 80px;
}
.thumbnail:active {
    cursor: grab;
}
.thumbnail:active {
    cursor: grabbing;
}

.file-folder {
    width: 70px;
    cursor: pointer;
}

.file-folder:active {
    cursor: grabbing;
}

.file {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    position: relative;
}

.file:hover {
    cursor: grab;
}

.file:active {
    cursor: grabbing;
}

.file-name,
.desktop-file-name {
    margin-top: 8px;
    cursor: pointer;
    text-wrap: wrap;
    width: 70px;
    text-align: center;
}

.file > .file-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70px;
}

.desktop-file-name {
    color: #000000;
}

/* Documents */
#documents {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.selected-file {
    background-color: #E6E6E6;
    border-radius: 10px;
    padding: 1px;
    box-sizing: content-box;
}

.document-thumbnail {
    width: 70px;
    cursor: pointer;
}

/* Index */
.index-entry {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 50px;
    padding: 5px 10px 5px 10px;
    width: 100%;
}

.index-entry:nth-child(odd) {
    background-color: #ececec;
    color: #000000;
}

.index-entry:hover {
    background-color: #b8e9ff;
    color: #000000;
}

.index-thumbnail {
    width: 10px;
    border: 1px solid #ffffff;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    cursor: pointer;
}

#index-headings {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    position: fixed;
    background-color: #ffffff;
    width: 100%;
    z-index: 2000;
    box-sizing: border-box;
    position: absolute;
    border-bottom: 1px solid #DDDDDD;
    padding: 5px 10px 5px 10px;
}

#index-headings>div {
    border-right: 1px solid #E6E6E6;
}

.index-headings {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    position: fixed;
    background-color: #ffffff;
    width: 100%;
    z-index: 2000;
    box-sizing: border-box;
    position: absolute;
    border-bottom: 1px solid #DDDDDD;
    padding: 5px 10px 5px 10px;
}

.index-headings>div {
    border-right: 1px solid #E6E6E6;
}

/*Photo Index*/
.index-view {
    padding: 0px;
    position: relative;
    cursor: pointer;
}

/**/
input {
    display: none;
}

div label {
    position: relative;
    cursor: pointer;
    display: block;
    width: 40px;
    height: 20px;
    background: #cccccc;
    border-radius: 50px;
    transition: 300ms linear;
}

div label:before {
    position: absolute;
    top: 50%;
    left: 2px;
    transform: translateY(-50%);
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background: #ffffff;
    border-radius: 50%;
    transition: left 300ms linear;
}

div input:checked+label {
    background: #000000;
}

div input:checked+label:before {
    left: 23px;
}

/* Clouder */
div#clouder {
    width: 70vw;
    height: 80vh;
    z-index: 1000;
}

/* Dropdown Menu */
.dropbtn {
    border: none;
    cursor: pointer;
}

span.dropbtn {
    font-weight: bold;
    cursor: pointer;
}

.dropbtn:hover,
.dropbtn:focus {
    background-color: #2980B9;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #ffffffe1;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.5);
    z-index: 12000;
    border-radius: 5px;
    cursor: pointer;
}

.dropdown-content a {
    color: black;
    padding: 8px 14px;
    text-decoration: none;
    display: block;
    cursor: pointer;
}

.dropdown a:hover {
    background-color: #ddd;
    border-radius: 5px;
}

.show {
    display: block;
}

/* Specific Windows */
#about-this-computer {
    max-width: 320px;
    margin-left: 20px;
}

#about-this-computer-content {
    text-align: center;
    padding: 20px;
}

#trashcan {
    z-index: 2000;
    position: absolute;
    top: 50px;
    left: 20%;
}

/*
  __  __           _        ____  _                       
 |  \/  |_   _ ___(_) ___  |  _ \| | __ _ _   _  ___ _ __ 
 | |\/| | | | / __| |/ __| | |_) | |/ _` | | | |/ _ \ '__|
 | |  | | |_| \__ \ | (__  |  __/| | (_| | |_| |  __/ |   
 |_|  |_|\__,_|___/_|\___| |_|   |_|\__,_|\__, |\___|_|   
                                          |___/          
*/
#music-player {
    width: 600px;
    height: 625.55500px;
    position: absolute;
    background-color: #eee;
    border-radius: 10px;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    overflow: hidden;
    top: 50px;
    left: 50px;
}

#music-player-contents {
    display: flex;
    flex-direction: row;
    overflow: scroll;
}

#spinning-cd {
    display: flex;
    flex-direction: column;
    padding: 20px;
    width: 200px;
    text-align: center;
    right: 0px;
    border-left: 1px solid #E6E6E6;
    z-index: 1000;
}

#cd {
    width: 100%;
    margin-bottom: 20px;
}

.cd {
    -webkit-animation: rotate 5s linear infinite;
    -moz-animation: rotate 5s linear infinite;
    -o-animation: rotate 5s linear infinite;
    animation: rotate 5s linear infinite;
}

@-moz-keyframes rotate {
    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

#music-player-right {
    display: block;
    overflow: scroll;
    width: 475.555px;
    height: 450px;
}

#tracklist {
    overflow: scroll;
    overflow-y: auto;
    max-height: 625.55500px;
    background-color: #ffffff;
}

.tracklist-entry {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 5px 10px 5px 10px;
    width: 100%;
    cursor: pointer;
}

.tracklist-entry:nth-child(odd) {
    background-color: #ececec;
    color: #000000;
}

.tracklist-entry:hover {
    background-color: #b8e9ff;
    color: #000000;
}

#tracklist-headings {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    background-color: #ffffff;
    width: 428px;
    z-index: 1;
    box-sizing: content-box;
    position: absolute;
    border-bottom: 1px solid #DDDDDD;
    padding: 5px 10px 5px 10px;
}

#tracklist-headings>div {
    border-right: 1px solid #E6E6E6;
}

#audio-title {
    font-weight: bold;
    margin-bottom: 10px;
}

/*      
Code below adapted from: https://codepen.io/joshbader/pen/GqXbVZ
*/
button {
    appearance: none;
    outline: none;
    position: relative;
    padding: 0;
    font-size: 100%;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

#music-button {
    display: flex;
    width: 3em;
    height: 3em;
    background-color: transparent;
    background-image: linear-gradient(#dddddd, #f6f6f6);
    border: 0.125em solid #d5d5d5;
    border-radius: 50%;
    justify-content: center;
    align-content: center;
    margin: 0 auto;
    cursor: pointer;
    padding: 2px;
}

#music-button:hover {
    background-color: #ffffff;
    background-image: none;
    cursor: pointer;
}

.info {
    text-align: center;
    text-shadow: 0 0.0625em rgba(255, 255, 255, 1);
}

.time {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0.5em;
    margin-bottom: 0.5em;
}

.time>* {
    margin: 0 0.5em;
}

.progress {
    flex-grow: 2;
    height: 0.125em;
    background-color: #999;
    border-radius: 0.0625em;
    box-shadow: 0 0.0625em rgba(255, 255, 255, 1);
    cursor: pointer;
}

.progress span {
    display: block;
    width: 0;
    height: 100%;
    background-color: #666;
}

/* Read More Windows */
.readme-window {
    position: absolute;
    background-color: #ffffffe6;
    margin: 0px;
    top: 40px;
    left: 20%;
    backdrop-filter: blur(5px);
}

.window-text-content {
    max-height: 500px;
    overflow: scroll;
    padding: 10px 20px 10px 20px;
    user-select: none;
}

.window-links {
    cursor: pointer;
    color: #0066CC;
}

iframe {
    width: 100%;
    height: 600px;
}

.iframe-window {
    max-height: 600px;
    width: 800px;
}

/*
  ____       _   _   _                 
 / ___|  ___| |_| |_(_)_ __   __ _ ___ 
 \___ \ / _ \ __| __| | '_ \ / _` / __|
  ___) |  __/ |_| |_| | | | | (_| \__ \
 |____/ \___|\__|\__|_|_| |_|\__, |___/
                             |___/     
*/
#wallpaper {
    padding-top: 10px;
    padding-bottom: 20px;
    border-top: 1px solid #B3B3B3;
}

#wallpaper>h2 {
    margin: 5px 0 10px 0;
}

#wallpaper-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.wallpaper-thumbnail {
    border-radius: 5px;
    width: 100%;
    height: 100px;
    object-fit: cover;
    cursor: pointer;
}

/*
  _   _ _     _                   
 | | | (_)___| |_ ___  _ __ _   _ 
 | |_| | / __| __/ _ \| '__| | | |
 |  _  | \__ \ || (_) | |  | |_| |
 |_| |_|_|___/\__\___/|_|   \__, |
                            |___/ 
*/
#dropdownHistory {
    background-color: #fffffff0;
    backdrop-filter: blur(5px);
    width: 200px;
}

#dropdownHistory div {
    display: flex;
    cursor: pointer;
    padding: 8px 14px;
    align-content: center;
}

#dropdownHistory span {
    color: black;
}

.history-thumbnail {
    height: 15px;
    border: 1px solid #ffffff;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    cursor: pointer;
    margin-right: 5px;
}

/*
  ____       _       _   
 |  _ \ _ __(_)_ __ | |_ 
 | |_) | '__| | '_ \| __|
 |  __/| |  | | | | | |_ 
 |_|   |_|  |_|_| |_|\__|
*/
@media print {

    #navbar,
    .readme-window,
    .desktop-contents,
    #dock {
        display: none;
    }

    #main-window,
    .notifications,
    #settings,
    .txt {
        display: none !important;
    }

    #dropdownHistoryPrint {
        display: grid !important;
        gap: 20px;
    }

    #dropdownHistoryPrint>div {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    #dropdownHistoryPrint div>img {
        display: block !important;
        max-width: 400px;
        height: auto;
        max-height: 300px;
        border: none;
        box-shadow: none;
        justify-self: center;
    }
}

#cyberfeminism-gradient {
    display: block;
    background-image: linear-gradient(#00FF00, #ffffff00, #ffffff00);
    height: 20px;
    width: 100%;
    padding: 20px;
    position: absolute;
    top: 29px;
    left: 0px;
}