/* zim sum style.css */ 

p:not(:last-child) {
    margin-block-end: 1em;
}

/* borrowed from https://github.com/jdan/98.css/blob/main/style.css */

:root {

/* Color */
  --text-color: #222222;
  --surface: #c0c0c0;
  --button-highlight: #ffffff;
  --button-face: #dfdfdf;
  --button-shadow: #808080;
  --window-frame: #0a0a0a;
  --dialog-blue: #000080;
  --dialog-blue-light: #1084d0; /* add for linear gradient in title header */
  --dialog-gray: #808080;
  --dialog-gray-light: #b5b5b5;
  --link-blue: #0000ff;


/* Borders */

  --border-width: 1px;
  --border-raised-outer: inset -1px -1px var(--window-frame),
    inset 1px 1px var(--button-highlight);
  --border-raised-inner: inset -2px -2px var(--button-shadow),
    inset 2px 2px var(--button-face);
  --border-sunken-outer: inset -1px -1px var(--button-highlight),
    inset 1px 1px var(--window-frame);
  --border-sunken-inner: inset -2px -2px var(--button-face),
    inset 2px 2px var(--button-shadow);

}

/* DOOR OR ENTRY PAGE */ 

.entry-background {
    background-color: #C0C0C0;
    margin: 0;
    width: 100vw;
    height: 100vh;
	display: flex;
    justify-content: center;
    align-items: center;
}

.table {
  font-family: "Pixelated MS Sans Serif";
  height: 200;
  width: 400;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  box-shadow:
    var(--border-raised-outer),
    var(--border-raised-inner);
}

.table th {
  padding: 20px 20px;
  background: var(--button-face);
  box-shadow:
    var(--border-raised-outer),
    var(--border-raised-inner);
}

.table a {
    color: #0000cc;
}

.table a:hover {
    color: #1a73e8;
}

.table a:active {
    color: #0000cc;
}

/* MAIN PAGE */

/* body */ 

.page-layout {
    display: grid;
    grid-template-columns: 150px minmax (0,1fr);
    gap: 40px;
    width: calc(100% - 200px);
    max-width: 1200px;
    margin: 100px 50px 4rem;
    align-items: start;

}

html, body {
    margin: auto;
	padding: 30px;
    min-height: 100%;
	font-family: "Pixelated MS Sans Serif";
    background-color: #c0c0c0;
}

body {
    text-align: left;
    font-family: "Pixelated MS Sans Serif";
}


/* Widget */

.widget {
    width: 90%;
    max-width: 1200px;
    margin: auto;
    background: var(--button-face);
	font-family: "Pixelated MS Sans Serif";
    padding: 3px;
    box-sizing: border-box;
    box-shadow:
        inset -1px -1px var(--window-frame),
        inset 1px 1px var(--button-highlight),
        inset -2px -2px var(--button-shadow),
        inset 2px 2px var(--button-face);
}

/* Windows-style buttons */

.window-titlebar {
	display: flex;
    height: 40px;
	max-width: 1200px;
    align-items: center;
    padding: 2px 3px;
    box-sizing: border-box;
    background: linear-gradient(to right, #000080, #1084d0);
    color: white;
    font-family: "Pixelated MS Sans Serif", sans-serif;
    font-size: 30px;
    font-weight: bold;
}	

/* Push controls to the far right */

.window-controls {
	margin-left: auto;
    display: flex;
    gap: 2px;
}

.window-controls button {
    width: 28px;
    height: 26px;
    padding: 0;
    background: #c0c0c0;
    color: #000;
    border: 1px solid;
    border-color: #ffffff #000 #000 #ffffff;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: 10px;
	z-index: 20;

}

.window-controls button:active {
    border-color: #000 #ffffff #ffffff #000;
}


/* tab design  */ 

.tabs > input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tabs {
    width: 100%;
    box-sizing: border-box;
    background: var(--button-face);
}

.tab-buttons {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding-left: 6px;
    padding-top: 4px;
    background: var(--button-face);
}

/* Individual tabs */

.tab-buttons label {
    min-width: 90px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 12px;
    background: var(--button-face);
    color: var(--text-color);
    font-family: "Pixelated MS Sans Serif", sans-serif;
    font-size: 14px;
    cursor: pointer;
    border-top: 1px solid var(--button-highlight);
    border-left: 1px solid var(--button-highlight);
    border-right: 1px solid var(--window-frame);
    border-bottom: 1px solid var(--button-shadow);
    box-shadow:
        inset 1px 1px var(--button-face),
        inset -1px -1px var(--button-shadow);
    position: relative;
    z-index: 1;
}



/* hover */

	.tab-buttons label:hover {
}

/* tab content */

#tab1:checked ~ .tab-buttons label[for="tab1"],
#tab2:checked ~ .tab-buttons label[for="tab2"],
#tab3:checked ~ .tab-buttons label[for="tab3"],
#tab4:checked ~ .tab-buttons label[for="tab4"] {
    z-index: 2;
}


.tab-content {

    position: relative;
    width: 100%;
    min-height: 300px;
    box-sizing: border-box;
    padding: 25px;
    background: var(--button-face);
    border: 2px solid;
    border-color:
        var(--button-highlight)
        var(--window-frame)
        var(--window-frame)
        var(--button-highlight);
}


/* Hide all content */

	.tab-content-1,
	.tab-content-2,
	.tab-content-3,
	.tab-content-4 {

    	display: none;
}


/* Show selected content */

#tab1:checked ~ .tab-content .tab-content-1 {
    display: block;
}

#tab2:checked ~ .tab-content .tab-content-2 {
    display: block;
}

#tab3:checked ~ .tab-content .tab-content-3 {
    display: block;
}

#tab4:checked ~ .tab-content .tab-content-4 {
    display: block;
}

/* scroll formatting for download table */



.download-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 20px;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
}

.download-folder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 130px;
    padding: 15px;
    box-sizing: border-box;
    background: #c0c0c0;
    border: 2px outset #ffffff;
    color: #000000;
    text-decoration: none;
    font-family: "Pixelated MS Sans Serif", sans-serif;
}

.folder-image {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* steady */
.download-folder .folder-image {
    content: url("images/folder_closed.png");
}

/* hover */
.download-folder:hover .folder-image {
    content: url("images/folder_open.png");
}

/* click */
.download-folder:active .folder-image {
    content: url("images/folder_paper.png");
}