@font-face {
  font-family: 'Windows Regular';
  src: url('Windows Regular.ttf') format('truetype');
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: #25282d;
    font-family: 'Windows Regular';
}

.container {
    max-width: 900px;
    margin: 80px auto 10px auto;
    overflow: hidden;
    background-color: white;
    border: 1px solid #a4afbb;
    border-radius: 10px;
    box-shadow: 10px 10px 20px #b6c0c8;
}

.topbar {
    display: flex;
    background: linear-gradient(to bottom, #eef4f9 0%, #b8d1e2 50%, #99c4e1 51%, #cae1e9 100%);
    border: 1px solid #e5f0f8;
}

.title {
    padding: 6px 10px;
}

.window-buttons {
    display: flex;
    margin: -1px 10px;
    margin-left: auto;
    height: 22px;
}

.window-buttons div {
    margin: 0 0.5px;
    position: relative;
    background: linear-gradient(to bottom, #eef4f9 0%, #b8d1e2 50%, #abcde4 51%, #cae1e9 100%);
    border: 1px solid #dae7ef;
    outline: 1px solid #a4afbb;
    text-align: center;
    color: white;
    -webkit-text-stroke: 0.4px #ffffff;
}

.minimize {
    width: 40px;
    border-bottom-left-radius: 5px;
    font-size: 14px;
    line-height: 2;
}

.minimize::before {
    content: '—';
}

.maximize {
    width: 40px;
}

.maximize::before {
    content: '□';
    font-size: 18px;
    line-height: 1;
}

.close {
    width: 65px;
    border-bottom-right-radius: 5px;
    line-height: 1.75;
}

.close::before {
  content: '✕';
}

header {
    min-height: 150px;
    background: url(headerbg.jpg) center/cover no-repeat;
    border-top: 1px solid #a4afbb;
    border-bottom: 1px solid #a4afbb;
}

.layout {
    min-height: 500px;
    margin: 0;
    display: flex;
}

.sidebar {
    flex: 0 0 180px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #cdd4dc;
    overflow: hidden;
}

nav {
    display: block;
    flex: 0 0 200px;
}

.nav-title {
    padding: 10px;
}

nav ul {
    margin: 0;
    padding: 0 10px;
    list-style: none;
}

ul li a {
    display: block;
    padding: 7px 30px;
    color: #25282d;
    text-decoration: none;
    border: 1px solid white;
    outline: 1px solid white;
}

ul li a:hover {
    background: linear-gradient(to bottom, #f7faff 0%, #d1d7e6 50%, #d2d0e2 51%, #f4f7ff 100%);
    border: 1px solid white;
    outline: 1px solid #cdd4dc;
}

.main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 10px;
}

.content-top {
    flex: 0 0 180px;
    display: flex;
}

.miniheader {
    padding: 8px;
    background: linear-gradient(to bottom, #eef4f9 0%, #b9ddf1 50%, #cce6f3 51%, #eaf7fb 100%);
    border-bottom: 1px solid #a4afbb;
    line-height: 8px;
}

.about {
    flex: 1;
    margin: 20px 50px 0 30px;
    border: 1px solid #a4afbb;
    border-radius: 10px;
    overflow: hidden;
}

p {
    margin: 0;
    padding: 8px 15px;
    line-height: 1;
}

.content-bottom {
    flex: 1;
    border-top: 1px dashed #a7b1bd;
}

.bottombar {
    min-height: 20px;
    background: linear-gradient(to bottom, #eef4f9 0%, #b8d1e2 50%, #b3d1e6 51%, #cae1e9 100%);
    border: 2px solid #dae7ef;
    border-top: 1px solid #a4afbb;
}

.footer {
    text-align: center;
}