:root {
    --text-color: #60519b;
    --window-header-color: #f0f8ff;
    --window-border-color: #f0f8ff;
    --tangent-text-color: #3284aa;
    --2ndDegree-tangent-text-color: #455a63; /*5fb1e0, 496a7c*/
    --3rdDegree-tangent-text-color: #d7d6d6;
    --link-text-color: #6c4bf0;
    --background-color: #08090c;
}

/*-----------------Scroll Bar css-----------------*/
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--background-color);
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--text-color);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--link-text-color); 
}

@font-face {
    font-family: DosV;
    src: url(/Assets/Web437_DOS-V_TWN16.woff);
    font-display: block;
}

body {
    font-family: DosV;
    color: var(--text-color);
    font-size: 18px;

    background-color: var(--background-color);

    margin: 8px;
}

main {
    justify-items: center;
}

button {
    font-family: DosV;
    background-color: aliceblue;
}

iframe {
    width: 100%; height: 100%;
}

/*-----------------crt effect css-----------------*/
body::before {
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
                linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 999;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}

/*-----------------links css-----------------*/
.sneakyLink {
    text-decoration: none;
    color: var(--text-color);
    cursor: auto;
}

a {
    color: var(--link-text-color);
}

/*-----------------Window css-----------------*/
.window {
    max-width: fit-content;
    max-height: fit-content;
    margin-bottom: 8px;
    padding: 4px;
}

.window .title {
    padding: 4px;
    background-color: var(--window-header-color);
}

.window .content {
    border: 2px solid var(--window-border-color);
    padding: 4px 4px 8px 4px;
    background-color: #000000;
}

.content.image-container {
    padding: 0;
    line-height: 0;
}

.content.iframe-container {
    padding: 0;
}

.content > img {
    width: 100%;
}

.content .tangent {
    color: var(--tangent-text-color);
}

.content .tangent a {
    color: var(--tangent-text-color);
}

.content .tangent .tangent {
    color: var(--2ndDegree-tangent-text-color);
}

.content .tangent .tangent a {
    color: var(--2ndDegree-tangent-text-color);
}

.content .tangent .tangent .tangent {
    color: var(--3rdDegree-tangent-text-color);
}

.content .tangent .tangent .tangent a {
    color: var(--3rdDegree-tangent-text-color);
}

/*-----------------Writting Project Ul css-----------------*/
.Ul-Tree {
    padding-left: 20px;
    margin: 5px 0px 5px 0px;
}

ul.Ul-Tree li {
    list-style-type: none;
    margin-top: 4px;
}

ul.Ul-Tree ul {
    padding-left: 20px;
}

/*-------------Active css---------*/
.active {
    color: var(--link-text-color);
}