/* VARIABLES */

:root {
    /* COLOURS */
    --win-border-dark: #F79F8F;
    --win-border-light: #FFFFFF;
    --win-bg: #FCF0F2;
    --win-shadow: #DE405850;
 
    --win-titlebar-gradient: linear-gradient(60deg, #FFC5C2, #FF756E);
    --win-titlebar-text: #FFF;
 
    --win-link-hover-bg: #C4C4C0;
    --win-link-hover-text: #FFF;
    }

/* FONT */
@font-face {
    font-family: 'PixelOperator';
    src: url('https://toni-is-online.neocities.org/admin/style/PixelOperator.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


/* SCROLLBAR */

::-webkit-scrollbar {
    width: 16px;   /* vertical thickness */
    height: 16px;  /* horizontal thickness */
}

::-webkit-scrollbar-track {
    background-color: var(--win-link-hover-bg);
}

::-webkit-scrollbar-thumb {
    background-color: #D1D1CF;
    border: 1px solid #9E9D9B;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    box-shadow: inset 1px 1px 0 0 var(--win-border-light), inset -1px -1px 0 0 var(--win-shadow);
}

::-webkit-scrollbar-corner {
    background-color: var(--win-bg);
}

::-webkit-scrollbar-button {
    background-color: #D1D1CF;
    border: 1px solid #9E9D9B;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    box-shadow: inset 1px 1px 0 0 var(--win-border-light), inset -1px -1px 0 0 var(--win-shadow);
    display: block;
    width: 16px;
    height: 16px;
    image-rendering: pixelated;
    background-repeat: no-repeat;
    background-position: center center;
}

  /* Scrollbar up arrow */
::-webkit-scrollbar-button:vertical:decrement {
    background-image: url("https://toni-is-online.neocities.org/admin/images/up-arrow.png");
}
  /* Scrollbar down arrow */
::-webkit-scrollbar-button:vertical:increment { 
    background-image: url("https://toni-is-online.neocities.org/admin/images/down-arrow.png");
}

  /* Removing any duplicate arrows */
::-webkit-scrollbar-button:vertical:increment:start,
::-webkit-scrollbar-button:vertical:decrement:end {
    display: none;
}

::-webkit-scrollbar-button:active {
    background-color: var(--win-link-hover-bg);
    border: 1px solid #fff;
    border-top: 1px solid #9E9D9B;
    border-left: 1px solid #9E9D9B;
    box-shadow: none;
}


/* MAIN PANEL */

.aesthetic-windows-95-container,
.aesthetic-windows-95-modal {
  display: block;
    padding: 4px;
    background-color: var(--win-bg);
    border: 1px solid var(--win-border-dark);
    border-top: 1px solid var(--win-border-light);
    border-left: 1px solid var(--win-border-light);
    box-shadow: 1px 1px 0.5px 0.5px var(--win-shadow);
}

  /* Removes nav bar padding */
.aesthetic-windows-95-modal nav.aesthetic-windows-95-modal-content {
    padding-bottom: 0;
}

  /* Top Bar Design */
.aesthetic-windows-95-modal .aesthetic-windows-95-modal-title-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 24px;
    padding: 0 4px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    background: var(--win-titlebar-gradient);
    border: 1px solid;
    border-top: 1px solid var(--win-border-light);
    border-left: 1px solid var(--win-border-light);
    box-shadow: 1px 1px 0.5px 0.5px var(--win-shadow);
    outline: 0;
}

.aesthetic-windows-95-modal .aesthetic-windows-95-modal-title-bar .aesthetic-windows-95-modal-title-bar-text {
    color: var(--win-titlebar-text);
}

.aesthetic-windows-95-modal .aesthetic-windows-95-modal-content {
    padding: 5px 10px;
}

  /* Fake exit button - X in title bar */
.aesthetic-windows-95-modal-title-bar-controls .aesthetic-windows-95-button-title-bar {
    width: 16px;
    height: 16px;
    padding: 2px;
    font-size: 0.8rem;
    font-family: sans-serif;
    font-weight: normal;
    cursor: default;
}
 
.aesthetic-windows-95-button-title-bar button {
    padding: 0;
}


/* BUTTONS */

.aesthetic-windows-95-button,
.aesthetic-windows-95-button2,
.aesthetic-windows-95-button-title-bar,
.aesthetic-windows-95-taskbar .aesthetic-windows-95-taskbar-start,
.aesthetic-windows-95-taskbar2 .aesthetic-windows-95-taskbar-start2 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75px;
    text-align: center;
    color: #000;
    background-color: var(--win-bg);
    border: 1px solid var(--win-border-dark);
    border-top-color: var(--win-border-light);
    border-left-color: var(--win-border-light);
    border-bottom-color: var(--win-border-dark);
    border-right-color: var(--win-border-dark);
    box-shadow: 1px 1px 0.5px 0.5px var(--win-shadow);
}
 
.aesthetic-windows-95-button {
    padding: 2px;
}
 
.aesthetic-windows-95-button button,
.aesthetic-windows-95-button2 button,
.aesthetic-windows-95-button-title-bar button,
.aesthetic-windows-95-taskbar .aesthetic-windows-95-taskbar-start button,
.aesthetic-windows-95-taskbar2 .aesthetic-windows-95-taskbar-start2 button {
    width: 100%;
    padding: 2px;
    color: inherit;
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
    outline: none;
}
 
.aesthetic-windows-95-button:active,
.aesthetic-windows-95-button2:active,
.aesthetic-windows-95-button-title-bar:active,
.aesthetic-windows-95-taskbar .aesthetic-windows-95-taskbar-start:active,
.aesthetic-windows-95-taskbar2 .aesthetic-windows-95-taskbar-start2:active {
    outline: none;
    transform: translateY(1px);
    box-shadow: 1px 1px var(--win-shadow);
}
 
.aesthetic-windows-95-button:focus,
.aesthetic-windows-95-button2:focus,
.aesthetic-windows-95-button-title-bar:focus,
.aesthetic-windows-95-taskbar .aesthetic-windows-95-taskbar-start:focus,
.aesthetic-windows-95-taskbar2 .aesthetic-windows-95-taskbar-start2:focus {
    outline: none;
}
 
  /* Button2 is the only variant with a hover state */
.aesthetic-windows-95-button2 button:hover,
.aesthetic-windows-95-button2 a:hover,
.aesthetic-windows-95-button-title-bar2 button:hover,
.aesthetic-windows-95-taskbar2 .aesthetic-windows-95-taskbar-start2 button:hover {
    background-color: var(--win-link-hover-bg);
    color: #000;
}


/* DROPDOWN MENU */

.aesthetic-windows-95-dropdown {
    position: relative;
    display: inline-block;
}
 
.aesthetic-windows-95-dropdown .aesthetic-windows-95-dropdown-trigger {
    display: inline-block;
    padding: 1px 4px;
    color: inherit;
    cursor: pointer;
    outline: none;
}

.aesthetic-windows-95-dropdown .aesthetic-windows-95-dropdown-trigger:hover {
    color: var(--win-link-hover-text);
}

  /* Credits menu reset styling on open/close */
.aesthetic-windows-95-dropdown-checkbox:checked + .aesthetic-windows-95-dropdown-trigger {
    color: #1AA0C7;
    font-weight: 1000;
}
.aesthetic-windows-95-dropdown-checkbox:checked ~ .aesthetic-windows-95-dropdown-menu {
    display: block;
}
 
.aesthetic-windows-95-dropdown .aesthetic-windows-95-dropdown-menu {
    display: none;
    position: absolute;
    z-index: 1;
    min-width: 150px;
    margin: 0;
    padding: 4px;
    list-style-type: none;
    background-color: var(--win-bg);
    border: 1px solid var(--win-border-dark);
    border-top: 1px solid var(--win-border-light);
    border-left: 1px solid var(--win-border-light);
    box-shadow: 1px 1px 0.5px 0.5px var(--win-shadow);
}
 
/*  Rule for displaying drop down menu .aesthetic-windows-95-dropdown:focus-within .aesthetic-windows-95-dropdown-menu,
.aesthetic-windows-95-dropdown:hover .aesthetic-windows-95-dropdown-menu {
    display: block;
} */
 
.aesthetic-windows-95-dropdown .aesthetic-windows-95-dropdown-menu hr {
    border-color: #fff;
}
 
.aesthetic-windows-95-dropdown .aesthetic-windows-95-dropdown-menu .aesthetic-windows-95-dropdown-menu-item {
    padding: 1px 0 1px 10px;
    cursor: pointer;
}
 
.aesthetic-windows-95-dropdown .aesthetic-windows-95-dropdown-menu .aesthetic-windows-95-dropdown-menu-item button {
    color: inherit;
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
    outline: none;
}
 
.aesthetic-windows-95-dropdown .aesthetic-windows-95-dropdown-menu .aesthetic-windows-95-dropdown-menu-item:hover,
.aesthetic-windows-95-dropdown .aesthetic-windows-95-dropdown-menu .aesthetic-windows-95-dropdown-menu-item:focus,
.aesthetic-windows-95-dropdown .aesthetic-windows-95-dropdown-menu .aesthetic-windows-95-dropdown-menu-item:focus-within {
    background-color: var(--win-link-hover-bg);
    color: var(--win-link-hover-text);
}


/* TEXT INPUT */

.aesthetic-windows-95-text-input {
    background-color: var(--win-bg);
    border: 1px solid var(--win-border-dark);
    border-top-color: var(--win-border-light);
    border-left-color: var(--win-border-light);
    border-bottom-color: var(--win-border-dark);
    border-right-color: var(--win-border-dark);
    box-shadow: 1px 1px 0.5px 0.5px var(--win-shadow);
}

.aesthetic-windows-95-text-input:hover,
.aesthetic-windows-95-text-input:focus-visible {
    outline: none;
    background-color: var(--win-link-hover-bg);
    color: var(--win-link-hover-text);
}

.aesthetic-windows-95-text-input:active {
    outline: none;
    box-shadow: 1px 1px var(--win-shadow);
    transform: translateY(1px);
    background-color: var(--win-link-hover-bg);
    color: var(--win-link-hover-text);
}

/* LINKS */

a,
a:link,
a:visited,
a:active {
  color: var(--color-link);
  background-color: transparent;
  text-decoration: none;
}
 
a:hover,
a:focus {
  color: #fff;
  background-color: transparent;
  text-decoration: none;
}


/* END :) */