@import url("one.css");



:root {

  text-transform: lowercase;

}



html {

  cursor: url("https://pixels.crd.co/assets/images/gallery20/553ac0ff.gif?v=29416114"), auto !important;

  filter: sepia(0%);

}



body {

  background: var(--background);

  background-repeat: no-repeat;

  background-attachment: fixed;

  background-size: cover;

  background-position: center;

  font-family: 'w95fa', '04B_30', 'PixelOperator', monospace;

  font-size: 14px;

  line-height: 1.2;

  overflow: hidden;

}


/* MIT rainbow stripe */
.mit-rainbow-stripe {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: 7px;
  background-image: linear-gradient(90deg, #025fff, #22d278, #f5e400, #f09835, #e9373f, #9650a9, #025fff);
  background-size: 200% 100%;
  animation: mitRainbowWander 10s linear infinite;
  pointer-events: none;
  z-index: 20000;
}

@keyframes mitRainbowWander {
  0% { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

@media (prefers-reduced-motion: reduce) {
  .mit-rainbow-stripe {
    animation: none;
    background-position: 50% 0;
  }
}
img {

  filter: sepia(0%);

}



/* icons */

.icons { position: fixed; top: 10px; left: 10px; display: flex; flex-direction: column; align-items: center; padding: 10px; }



.icons .icon {

  box-sizing: border-box;

  background-color: transparent;

  border: none;

  padding: 5px;

  margin: 3px;

  color: var(--darkest);

  font-weight: 900;

  font-family: '04B_30';

  font-size: 14px;

  letter-spacing: -0.5px;

  height: 64px;

  width: 60px;

  position: relative;

  text-shadow: -1px -1px 0 hsla(0, 0%, 100%, 0.439), 1px -1px 0 hsla(0, 0%, 100%, 0.439), -1px 1px 0 hsla(0, 0%, 100%, 0.439), 1px 1px 0 hsla(0, 0%, 100%, 0.439);

}



.icons .icon:hover { outline: 1px dotted hsla(0, 0%, 100%, 0.6); background-color: hsla(0, 0%, 100%, 0.125); }

.icons .icon:active { background-color: hsla(0, 0%, 100%, 0.251); outline: 1px dotted white; }



.shortcut { height: 10px; width: 10px; position: absolute; border: 1px solid var(--darkest); left: 10px; bottom: 20px; background-color: white; }



.icons img { filter: sepia(0.2); }

.icons .mit-icon { width: 32px; height: 32px; object-fit: contain; }



/* bottom menu */

.menu { position: fixed; width: 100%; height: 30px; bottom: 0; left: 0; padding: 4px; color: var(--darkest); background-color: var(--light); outline: 2px solid var(--lightest); font-size: 14px; z-index: 9999; font-family: '04B_30'; }



.divider { height: 20px; width: 1px; background-color: var(--darkest); display: inline-block; box-shadow: 0px 10px 0px var(--darkest), 0px 10px 0px var(--darkest); }



#clock { background-color: var(--light); padding: 5px; margin-top: 1px; margin-right: 10px; border: 2px solid var(--lightest); border-left: 2px solid var(--darkest); border-top: 2px solid var(--darkest); font-weight: 200; }

.clock-icon { float: right; width: 16px; height: 16px; margin-top: 6px; margin-right: 6px; image-rendering: pixelated; }

.clock-icon:not([src]) { display: none; }



/* start drop up */

.drop-up { position: relative; display: inline-block; }



.drop-up-content {

  display: none;

  position: absolute;

  bottom: 100%;

  left: 0;

  background-color: var(--light);

  min-width: 120px;

  box-shadow: 0px 8px 16px hsla(0, 0%, 0%, 0.2);

  padding: 1px;

  z-index: 1;

  border: 2px solid var(--darkest);

  border-left: 2px solid var(--lightest);

  border-top: 2px solid var(--lightest);

  outline: 1px solid var(--lightest);

}



.drop-up-content a { display: flex; align-items: center; color: var(--darkest); text-decoration: none; padding: 4px; height: 24px; line-height: 24px; }

.drop-up-content a:hover { background-color: var(--lightest); }

.drop-up-content img { image-rendering: pixelated; padding-right: 5px; height: 24px; width: 24px; }



.box { border: none; border-right: 1px solid var(--darkest); background-color: var(--light); padding: 7px; display: inline-block; font-family: '04B_30'; }



.drop-divider { width: 95%; margin-left: 2%; background-color: var(--lightest); height: 1px; border-top: 1px solid var(--shadow); }



.show { display: block; }



.hidden-div { display: none; background-color: var(--light); border: 2px solid var(--dark); margin-top: 5px; border-radius: 2px; box-shadow: 0px 1px 2px var(--dark); }



.header { height: 20px; background: linear-gradient(90deg, var(--dark) 0%, hsla(0, 0%, 0%, 0) 100%), var(--dark); border: 2px solid var(--light); color: var(--contrastbg); text-align: left; line-height: 20px; padding: 5px; font-family: '04B_30', 'PixelOperator', monospace; }

.header img { height: 24px; width: 24px; image-rendering: pixelated; line-height: 24px; float: left; padding-right: 5px; }

.header:hover { cursor: url("https://pixels.crd.co/assets/images/gallery28/a7de1a0a.gif?v=29416114"), auto !important; }



.content { padding: 5px; color: var(--dark); }



.x-button { float: right; background-color: var(--light); }

.x-button:hover { cursor: url("https://pixels.crd.co/assets/images/gallery28/a7de1a0a.gif?v=29416114"), auto !important; }



.explorer-navigator { height: 16px; margin: 2px; padding: 3px; padding-top: 5px; text-align: left; border-top: 1px solid var(--lightest); border-left: 1px solid var(--lightest); outline: 1px solid var(--shadow); font-size: 13px; position: relative; background-color: var(--light); }

.explorer-navigator .nav-tab { padding: 2px; margin-left: 2px; padding-right: 10px; }

.explorer-navigator .nav-tab:hover { box-shadow: 1px 1px 0px var(--shadow), -1px -1px 0px var(--lightest); }

.explorer-navigator .nav-tab:active { box-shadow: 1px 1px 0px var(--lightest), -1px -1px 0px var(--shadow); }

.explorer-navigator .back-button { float: left; height: 13px; margin-top: -1px; width: 10px; padding-left: 3px; }

.explorer-navigator .back-button:hover { cursor: url("https://pixels.crd.co/assets/images/gallery28/a7de1a0a.gif?v=29416114"), auto !important; }

.explorer-navigator .address-text { float: left; margin-left: 5px; }

.explorer-navigator .nav-search-bar { float: left; margin-left: 5px; width: 83%; padding-left: 5px; background-color: var(--lightest); box-shadow: inset 1px 1px 0px var(--shadow), -1px -1px 0px var(--darkest); }

.explorer-navigator .search-bar-text:hover { background-color: var(--dark); color: white; padding: 0px; }

.explorer-navigator .nav-search-bar { cursor: url("https://pixels.crd.co/assets/images/gallery28/a7de1a0a.gif?v=29416114"), auto !important; }

.explorer-navigator .nav-search-bar:active { box-shadow: inset -1px -1px 0px var(--shadow), 1px 1px 0px var(--darkest); background-color: var(--light); }

.explorer-navigator .back-button:active { box-shadow: inset -1px -1px 0px var(--shadow), 1px 1px 0px var(--darkest); }



.border { border: 2px solid var(--lightest); border-right: 2px solid var(--darkest); border-bottom: 2px solid var(--darkest); }

.border:active, .border:focus { border: 2px solid var(--dark); border-right: 2px solid #fce7b5; border-bottom: 2px solid #b6b022; }



.draggable { position: absolute; z-index: 1000; }



/* layout specifics */

#div2 { display: flex; flex-direction: column; padding-bottom: 5px; left: calc(50% - 255px); bottom: 16%; width: 513px; height: 630px; }

#div2 .content { width: 501px; min-height: 452px; flex: 1; }

#div7 .buttons { display: flex; flex-wrap: wrap; gap: 4px; padding-right: 24px; padding-left: 0; margin-left: 0; margin-bottom: 6px; }

#div6 { display: block; width: 250px; height: 500px; padding-bottom: 2px; left: calc(50% + 278px); bottom: 22%; font-size: 14px; line-height: 13px; }

#div6 .content { background-color: var(--contrastbg); border: 2px solid var(--darkest); border-right: 2px solid var(--lightest); border-bottom: 2px solid var(--lightest); height: 90%; width: 232px; margin-left: 2px; margin-top: 1px; overflow-y: scroll; color: var(--dark); }

#div7 { display: block; width: 250px; height: 500px; padding-bottom: 2px; left: calc(50% - 525px); bottom: 22%; font-size: 14px; line-height: 13px; }

#div7 .content { background-color: var(--contrastbg); border: 2px solid var(--darkest); border-right: 2px solid var(--lightest); border-bottom: 2px solid var(--lightest); height: 90%; width: 232px; margin-left: 2px; margin-top: 1px; overflow-y: auto; color: var(--dark); }

#div8 { width: 480px; height: 260px; padding-bottom: 2px; left: 80px; bottom: 10%; font-size: 14px; line-height: 13px; }

#div8 .content { background-color: var(--contrastbg); border: 2px solid var(--darkest); border-right: 2px solid var(--lightest); border-bottom: 2px solid var(--lightest); height: 210px; width: 462px; margin-left: 2px; margin-top: 1px; overflow-y: hidden; color: var(--dark); }

#div8 .folder { text-align: center; border: 1px solid #ffffff00; width: 80px; float: left; }

#div8 .folder:hover { border: 1px dotted var(--shadow); background-color: #00000006; }

#div8 .content img { image-rendering: pixelated; width: 36px; height: 36px; object-fit: contain; }

#div8 a { color: var(--dark); text-decoration: none; }

#frame2 { width: 500px; height: 450px; border: 2px solid var(--dark); border-right: 2px solid var(--lightest); margin: 0; padding: 0; display: block; background-color: var(--contrastbg); }

.menulower { display: grid; width: 504px; margin-top: 0; padding-left: 0; grid-template-columns: repeat(5, 1fr); grid-template-rows: 1fr; grid-column-gap: 0; grid-row-gap: 0; border-top: 1px solid var(--shadow); border-left: 1px solid var(--shadow); margin-left: 5px; }

.main-option { height: 70px; padding-top: 10px; font-size: 12px; text-align: center; background-color: var(--light); font-family: '04B_30'; }

.main-option:hover { cursor: url("https://pixels.crd.co/assets/images/gallery28/a7de1a0a.gif?v=29416114"), auto !important; }



/* responsive tweaks */

@media screen and (max-width: 1500px) {

  #div2 { display: flex; flex-direction: column; padding-bottom: 5px; left: calc(50% - 255px); bottom: 16%; width: 513px; height: 630px; }

  #div6 { display: block; width: 250px; height: 500px; padding-bottom: 2px; left: calc(50% + 278px); bottom: 22%; font-size: 14px; line-height: 13px; }

  #div7 { display: block; width: 250px; height: 500px; padding-bottom: 2px; left: calc(50% - 525px); bottom: 22%; font-size: 14px; line-height: 13px; }

}

@media screen and (max-width: 1300px) {

  #div2 { display: flex; flex-direction: column; padding-bottom: 5px; left: calc(50% - 255px); bottom: 16%; width: 513px; height: 630px; }

  #div6 { display: block; width: 250px; height: 500px; padding-bottom: 2px; left: calc(50% + 278px); bottom: 22%; font-size: 14px; line-height: 13px; }

  #div7 { display: block; width: 250px; height: 500px; padding-bottom: 2px; left: calc(50% - 525px); bottom: 22%; font-size: 14px; line-height: 13px; }

}