/*Made by Thom used and edited by Adrian.
 Thx Thom! :3*/

@font-face {
    font-family: "LucidaGrande";
    src: url("LucidaGrande-01.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "LucidaGrande";
    src: url("LucidaGrande-Bold-02.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: "LucidaGrande", "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif;
    font-size: 13px;
    color: #000;
    min-height: 100vh;
    background-color: #849ec6;
    background-image: url("assets/wall.png");
    background-size: cover;
    margin: auto;
}

/*Window Types*/
.container-big { max-width: 800px; margin: 0 auto; }
.container-min { max-width: 700px; margin: 0 auto; }
.container-small { max-width: 500px; margin: 0 auto; }
.container-foot { max-width: 350px; margin: 0 auto; }

/*Windows*/
.window {
    border-radius: 8px 8px 3px 3px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.6),
        0 1px 0 1px rgba(0,0,0,0.25),
        0 14px 45px rgba(0,0,0,0.65),
        0 5px 12px rgba(0,0,0,0.35);
}

.windowf {
    border-radius: 3px 3px 3px 3px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.6),
        0 1px 0 1px rgba(0,0,0,0.25),
        0 14px 45px rgba(0,0,0,0.65),
        0 5px 12px rgba(0,0,0,0.35);
}

.window-body {
    background: repeating-linear-gradient(#F0F0F0, #F0F0F0 2px, #FFFFFF 2px, #FFFFFF 4px);
    padding: 14px;
}

.title-bar {
    height: 28px;
    background: linear-gradient(to bottom,
        #e2e2e2 0%, #d6d6d6 15%, #c2c2c2 48%,
        #b5b5b5 50%, #bdbdbd 52%, #cccccc 70%, #dedede 100%);
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-bottom: 1px solid #808080;
    position: relative;
    user-select: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}

/*OSX topbar*/
.top-bar {
    height: 28px;
    background: linear-gradient(to bottom,
        #e2e2e2 0%, #d6d6d6 15%, #c2c2c2 48%,
        #b5b5b5 50%, #bdbdbd 52%, #cccccc 70%, #dedede 100%
    );
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-bottom: 1px solid #808080;
    position: relative;
    user-select: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}

.dropdown {
    display: none;
    position: absolute;
    top: 28px; /* Drops down exactly below the 28px top bar */
    left: 0;
    background: rgba(240, 240, 240, 0.95);
    border: 1px solid #808080;
    box-shadow: 2px 4px 10px rgba(0,0,0,0.3);
    min-width: 200px;
    padding: 4px 0;
    border-radius: 0 0 5px 5px;
    z-index: 4;
}

.dropdown a {
    display: block;
    padding: 3px 20px;
    color: #000;
    text-decoration: none;
    font-size: 13px;
}

.menu-item {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 8px;
    cursor: default;
}

.menu-text {
    font-size: 13px;
    color: #2a2a2a;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
    white-space: nowrap;
}

.menu-hr {
    margin: 6px 0;
    border: none;
    border-top: 1px solid #c0c0c0;
    box-shadow: 0 1px 0 #ffffff;
}

.bar-item {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
}

.bar-item.apple {
    width: 17px;
    height: 17px;
    background-image: url('assets/icons/blue-apple-logo-icon-0.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.menu-item.bold .menu-text {
    font-weight: bold;
    text-shadow: 0 -1px 0 color: #2a2a2a;
}

.menu-item:hover .dropdown {
    display: block;
}

.menu-item:hover, .menu-item.active { background: linear-gradient(to bottom,
    #dedede 0%, #cccccc 15%, #bdbdbd 48%,
    #b5b5b5 50%, #c2c2c2 52%, #d6d6d6 70%, #e2e2e2 100% );
}

.dropdown a:hover {
    background: #0058d0;
    color: #ffffff;
}

.dropdown a:active {
    background: #0044a2;
    color: #ffffff;
}

.menu-item:hover .menu-text, .menu-item.active .menu-text {
    color: #ffffff;
    text-shadow: none;
}

/*OSX traffic light buttons*/
.traffic-lights {
    display: flex;
    gap: 1px;
    align-items: center;
}

.traffic-light {
    width: 21px;
    height: 21px;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: default;
}

.traffic-light.close { background-image: url('assets/windows/close-normal.png'); }
.traffic-light.minimize { background-image: url('assets/windows/minimize-normal.png'); }
.traffic-light.maximize { background-image: url('assets/windows/maximize-normal.png'); }

.traffic-light.close:hover { background-image: url('assets/windows/close-hover.png'); }
.traffic-light.minimize:hover { background-image: url('assets/windows/minimize-hover.png'); }
.traffic-light.maximize:hover { background-image: url('assets/windows/maximize-hover.png'); }

.traffic-light.close:active { background-image: url('assets/windows/close-active.png'); }
.traffic-light.minimize:active { background-image: url('assets/windows/minimize-active.png'); }
.traffic-light.maximize:active { background-image: url('assets/windows/maximize-active.png'); }

/*Profile*/
.profile-section {
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin-bottom: 15px;
    align-items: flex-start;
}

.profile-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-pic {
    width: 100px;
    height: 100px;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 5px;
    border: 1px solid rgba(0,0,0,0.28);
    box-shadow: 0 3px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.5);
}

.profile-bio    {
    display: flex;
    flex-direction: column;
    left: 120px; bottom: auto;
}

/*Formatting*/
.center-all {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.title-bar-text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: bold;
    color: #2a2a2a;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
    white-space: nowrap;
}

.window-title {
    font-size: 15px;
    font-weight: bold;
    color: #111;
    text-shadow: 0 1px 0 rgba(255,255,255,0.7);
}

.section-title {
    font-size: 14px;
    font-weight: bold;
    margin: 0 0 5px 0;
    color: #111; text-shadow: 0 1px 0 rgba(255,255,255,0.7);
}

hr {
    border: none;
    height: 1px;
    margin: 15px 0 15px 0;
    background: #aaa;
}

hr::after {
    content: '';
    display: block;
    height: 1px;
    background: #aaa;
}

p { line-height: 1.6; color: #222; }
p strong { font-weight: bold; }

.footer .window-body { text-align: center; font-size: 11px; color: #555; padding: 8px 16px; }

/*imgs*/
.img-brew {
    width: 230px; object-fit: cover; flex-shrink: 0;
    border-radius: 5px;
    border: 1px solid rgba(0,0,0,0.28);
    box-shadow: 0 3px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.5);
}

.img-mart {
    width: 290px; object-fit: cover; flex-shrink: 0;
    border-radius: 5px;
    border: 1px solid rgba(0,0,0,0.28);
    box-shadow: 0 3px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.5);
}

.img-metro {
    width: 208px; object-fit: cover; flex-shrink: 0;
}

.img-oxy {
    width: 320px; object-fit: cover; flex-shrink: 0;
}

img.gif {
    border: 1px solid #999; margin: 10px 0; max-width: 300px;
    border-radius: 2px; box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.link-icon { width: 18px; height: 18px; vertical-align: top; }
.title-icon { width: 16px; height: 16px; vertical-align: top; }

/*Buttons*/
.button-group { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }

input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    width: 14px; height: 14px;
    background-image: url('assets/windows/checkbox-unchecked.png');
    background-size: contain; background-repeat: no-repeat; cursor: pointer; vertical-align: middle;
}

input[type="checkbox"]:checked { background-image: url('assets/windows/checkbox-checked.png'); }

input[type="radio"] {
    appearance: none; -webkit-appearance: none;
    width: 14px; height: 14px;
    background-image: url('assets/windows/radio-unchecked.png');
    background-size: contain; background-repeat: no-repeat; cursor: pointer; vertical-align: middle;
}

input[type="radio"]:checked { background-image: url('assets/windows/radio-checked.png'); }

/*Unused*/
.apple-logo    { background-image: url('data/assets/windows/close-normal.png'); }

/* Mac OS X 10.0 Aqua Buttons

A Pen created on CodePen.

Original URL: [https://codepen.io/andrewmillen/pen/RwqBMrO](https://codepen.io/andrewmillen/pen/RwqBMrO). */

button {
  grid-row: 1;
  font-size: .9rem;
  font-family: "LucidaGrande", "Lucida Grande", Tahoma, sans-serif;
  height: 1.6em;
  padding: 0 1.4em;
  min-width: 2em;
  border-radius: 1000px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: none;
}

button.primary {
  background: linear-gradient(rgba(0, 65, 184, 0.625), rgba(45, 115, 199, 0.625), rgba(33, 160, 196, 0.625));
  box-shadow: 0 0.375em 0.5em rgba(0, 0, 0, 0.3), 0 0.125em 0.125em rgba(0, 78, 187, 0.5), inset 0 0.25em 0.5em rgba(0, 17, 49, 0.8), inset 0 0.375em 0.5em 0.25em rgba(0, 78, 187, 0.75);
}

button.primary:focus,
button.primary:active {
  box-shadow: 0 0.375em 0.5em rgba(0, 0, 0, 0.3), 0 0.125em 0.125em rgba(0, 78, 187, 0.5), inset 0 0.25em 0.5em rgba(0, 17, 49, 0.8), inset 0 0.375em 0.5em 0.25em rgba(0, 78, 187, 0.75), 0 0 0.5em rgba(52, 106, 227, 0.5);
}

button.secondary {
  background: linear-gradient(rgba(160, 160, 160, 0.625), rgba(255, 255, 255, 0.625));
  box-shadow: 0 0.375em 0.5em rgba(0, 0, 0, 0.2), 0 0.125em 0.125em rgba(0, 0, 0, 0.3), inset 0 0.25em 0.25em rgba(0, 0, 0, 0.4), inset 0 0.375em 0.5em 0.25em #BBBBBB;
}

button.secondary:focus,
button.secondary:active {
  box-shadow: 0 0.375em 0.5em rgba(0, 0, 0, 0.2), 0 0.125em 0.125em rgba(0, 0, 0, 0.3), inset 0 0.25em 0.25em rgba(0, 0, 0, 0.4), inset 0 0.375em 0.5em 0.25em #BBBBBB, 0 0 0.5em rgba(0, 0, 0, 0.25);
}

button:before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 33%;
  background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.3));
  width: calc(100% - 0.875em);
  border-radius: 2em 2em 0.5em 0.5em;
  top: 5%;
  filter: blur(1px);
  z-index: 2;
}

button:after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 33%;
  background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.5));
  width: calc(100% - 1.25em);
  border-radius: 0.75em;
  bottom: 10%;
  filter: blur(3px);
}

button span {
  position: relative;
  top: -1px;
  z-index: 1;
  letter-spacing: 0.0375em;
  -webkit-text-stroke-width: 0.025em;
  -webkit-text-stroke-color: #000000;
}

button.primary span {
  text-shadow: 0 0.25em 0.2em rgba(30, 77, 161, 0.5);
}

button.secondary span {
    text-shadow: 0 0.25em 0.2em rgba(0, 0, 0, 0.25);
}