:root{
    /* Color */
    --surface: #c0c0c0;
    --button-highlight: #ffffff;
    --button-face: #dfdfdf;
    --button-shadow: #808080;
    --window-frame: #0a0a0a;
    --dialog-blue: #000080;
    --dialog-blue-light: #1084d0;
    --dialog-gray: #808080;
    --dialog-gray-light: #b5b5b5;
    --link-blue: #0000ff;

    /* Spacing */
    --element-spacing: 8px;
    --grouped-button-spacing: 4px;
    --grouped-element-spacing: 6px;
    --radio-width: 12px;
    --checkbox-width: 13px;
    --radio-label-spacing: 6px;
    --range-track-height: 4px;
    --range-spacing: 10px;

    /* Some detailed computations for radio buttons and checkboxes */
    --radio-total-width-precalc: var(--radio-width) + var(--radio-label-spacing);
    --radio-total-width: calc(var(--radio-total-width-precalc));
    --radio-left: calc(-1 * var(--radio-total-width-precalc));
    --radio-dot-width: 4px;
    --radio-dot-top: calc(var(--radio-width) / 2 - var(--radio-dot-width) / 2);
    --radio-dot-left: calc(
    -1 * (var(--radio-total-width-precalc)) + var(--radio-width) / 2 - var(
        --radio-dot-width
        ) / 2
    );

    --checkbox-total-width-precalc: var(--checkbox-width) +
    var(--radio-label-spacing);
    --checkbox-total-width: calc(var(--checkbox-total-width-precalc));
    --checkbox-left: calc(-1 * var(--checkbox-total-width-precalc));
    --checkmark-width: 7px;
    --checkmark-top: 3px;
    --checkmark-left: 3px;

    /* 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);

    /* Window borders flip button-face and button-highlight */
    --border-window-outer: inset -1px -1px var(--window-frame),
    inset 1px 1px var(--button-face);
    --border-window-inner: inset -2px -2px var(--button-shadow),
    inset 2px 2px var(--button-highlight);

    /* Field borders (checkbox, input, etc) flip window-frame and button-shadow */
    --border-field: inset -1px -1px var(--button-highlight),
    inset 1px 1px var(--button-shadow), inset -2px -2px var(--button-face),
    inset 2px 2px var(--window-frame);
}
@font-face {
    font-family: 'W95'; 
    src: url('./fonts/W95FA.otf') format('opentype'), url('./fonts/w95fa.woff') format('woff'), url('./fonts/w95fa.woff2') format('woff2');
}

body {
    background-color:#008080;
    font-family: 'W95';
}
#table{
    display: inline-block;
}

#table thead{
    font-size: 1.2em;
}
#table tbody td{
    padding-right: 5px;
}

#main{
    background-color: rgb(192,192,192);
    padding: 3px;
    width: 80%;
    margin: 3% auto 0 auto;
    box-shadow: var(--border-window-outer), var(--border-window-inner);
}
#icklepedia{
  height: 90vh;
  width: 100%;
}

#menu-bar{
    background-color: #2a00aa;
    color: white;
    padding: 3px;
    display: flex;
    justify-content: left;
}
#icklescape{
  height: 18px;
  margin-right: 3px;
}

#menu-bar button[aria-label="Close"] {
    margin-left: 2px;
    background-image: url("./icon/close.svg");
    background-repeat: no-repeat;
    background-position: top 3px left 4px;
    padding: 0;
    display: block;
    width: 16px;
    height: 14px;
}
#browserbar{
  margin: 10px 1% 10px 1%;
}
#location{
  display:  inline-block;
  background-color: white;
  padding: 1px;
  width: 90%;
  height: 17px;
  background-image: url(../img/down_arrow.png);
  background-size: 18px;
  background-repeat: no-repeat;
  background-position: 100% 0;
  vertical-align: middle;
}

#window{
    display: flex;
    justify-content: space-between;
    height: 80vh;
}
#frame{
  flex-grow: 1;
}

#buttons{
    margin: 1px 0 0 0;
    width: 110px;
}

button{
    box-sizing: border-box;
    border: none;
    background: var(--surface);
    box-shadow: var(--border-raised-outer), var(--border-raised-inner);
    border-radius: 0;
    font-family: 'W95';
    background-color: rgb(192,192,192);
    margin:2px 2px 5px 4%;
    font-size: 1em;
    width: 100px;
    height: 23px;
}
button::first-letter{
    text-decoration: underline;
}
button:not(:disabled):active {
    box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
    padding: 2px 11px 0 13px;
  }
button:focus{
    outline: 1px dotted #000000;
    outline-offset: -4px;
}

input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
  padding: 3px 4px;
  border: none;
  box-shadow: var(--border-field);
  background-color: var(--button-highlight);
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
}

input[type="text"],
input[type="password"],
input[type="email"],
select {
  height: 21px;
}

input[type="text"],
input[type="password"],
input[type="email"] {
  /* For some reason descenders are getting cut off without this */
  line-height: 2;
}

input[type="email"]:disabled,
input[type="password"]:disabled,
input[type="text"]:disabled,
textarea:disabled {
  background-color: var(--surface);
}

select:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
  outline: none;
}

.field-row {
  display: flex;
  align-items: center;
}
  
[class^="field-row"] + [class^="field-row"] {
  margin-top: var(--grouped-element-spacing);
}

.field-row > * + * {
  margin-left: var(--grouped-element-spacing);
}

.field-row-stacked {
  display: flex;
  flex-direction: column;
}

.field-row-stacked * + * {
  margin-top: var(--grouped-element-spacing);
}

.icon {
  text-align: center;
  cursor: pointer;
  image-rendering: pixelated;
  padding: 10px;
}
.icon-title {
  color: white;
  font-size: 1em;
  -webkit-font-smoothing: none;
  margin-top: 5px;
  width: 100%;
  border: 1px dotted transparent;
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.icon.selected .icon-title {
  background-color: #000080;
  border-color: white;
}
.icon.selected img {
  filter: brightness(0.35) sepia(100%) hue-rotate(148deg) saturate(10);
}
#icons {
  position: absolute;
  bottom: 5%;
}
@media screen and (min-width: 1200px) {
  #icons {
    left: 2%;
  }
}