* {
        box-sizing: border-box;
    }
/**
 * 98.css
 * Copyright (c) 2020 Jordan Scales <thatjdanisso.cool>
 * https://github.com/jdan/98.css/blob/main/LICENSE
 */

:root {
  /* Color */
  --surface: #608043;
  --button-highlight: #ffffff;
  --button-face: #dfdfdf;
  --button-shadow: #000000;
  --window-frame: #000000;
  --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);

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

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

a.button2 {
  box-shadow: var(--border-window-outer), var(--border-window-inner);
  background: #F39C11;
  padding: 3px;

  
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        padding: 6px;

        cursor: pointer;
        text-decoration: none;


        color: ghostwhite;
        font-size: 48px;
        text-shadow: 1px 2px rgb(0, 0, 0);
}


    a.button2:hover {
        box-shadow: var(--border-window-outer-2), var(--border-window-inner-2);

        text-shadow: -1px -2px rgb(0, 0, 0);
        color: ghostwhite;
        text-decoration: none;

    }
    
.window {
  box-shadow: var(--border-window-outer), var(--border-window-inner);
  background: var(--surface);
  padding: 3px;
  margin: 0;
}

.border2 {
  box-shadow: var(--border-window-outer), var(--border-window-inner);
  padding: 3px;
}

.border3 {
  box-shadow: var(--border-window-outer), var(--border-window-inner);
  padding: 2px;
}

.border3:hover {
        box-shadow: var(--border-window-outer-2), var(--border-window-inner-2);

    }

.title-bar {
  background-color: #496430;
  padding: 2px 6px 2px 6px;
  margin: 0;
  display: flex;
  align-items: center;
}

.title-bar-text {
  color: white;
  font-size: 1.2rem;
}

.window-body {
  padding: 12px;
        width: 100%;
}