@font-face {font-family: Comfortaa;src:url(/Comfortaa-Regular.ttf);}
@font-face {font-family: Laksaman;src:url(/Laksaman.ttf);}

body {
    margin: 0;
    background: black;
}

#background {
    background: #303030;
    width: 100%;
    height: 100%;
    color: black;
    float: left;
    margin: 0;
    padding: 0;
    right:0;
    left: 0;
    top: 0;
    bottom: 0;
}

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}

#titleBarWrapper {
	position: fixed;
	width: 100%;
}

#titleBar {
    background: black;
    margin-top: 0rem;
    margin-left: 0;
    margin-right: 0;
    padding-top: min(.269rem, 0.718vw);
    padding-bottom: min(1.2rem, 3.2vw);
    overflow-x: scroll;
}

#title {
    color: white;
    margin-left: min(1.33rem, 3.54vw);
    font-size: min(3rem, 8vw);
    font-family: Comfortaa, sans-serif;
    font-style: normal;
    margin-top: 0px;
    margin-bottom: 0px;

}

.subtitle {
    color: white;
    font-size: min(1rem, 2.67vw);
    font-style: italic;
    font-family: sans-serif;
    white-space: nowrap;
}

#st1 {
    padding-left: min(1.33rem, 3.54vw);
    margin-top: min(0.3em, 0.8vw);
    margin-bottom: min(0.3em, 0.8vw);
}

#st2 {
    margin-left: min(1.33rem, 3.54vw);
    margin-top: min(0.1em, .267vw);
    margin-bottom: 0em;
}

.asRow {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

#barMenus {
    margin-top: min(1.5em, 4vw);
    margin-left: 8vw;
}

.barMenu {
    color: white;
    font-family: sans-serif;
    font-size: min(1rem, 2.67vw);
    padding-right: min(3.2rem, 8.53vw);
    cursor: pointer;
    white-space: nowrap;
}

.barMenu:hover {
    text-decoration: underline;
}

#titleBarBorder {
    background: #663366;
    margin-left: 0;
    margin-right: 0;
    height: min(.532rem, 1.42vw);
}

.brighterTitleBarBorder {
    background: #884488;
}

#scrollBar {
    background: #885588;
    margin-right: 0;
    height: min(.532rem, 1.42vw);
    position: absolute;
}

.italic {
    font-style: italic;
}
    
#mainBody > table {
    display: table;
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

.widget_header {
    text-decoration: underline;
}

.widget td {
	font-family: Laksaman, Sans-Serif;
	font-size: max(0.5rem, min(1.1rem, 3vw));
	color: white;
}

.img-wrap > img, .text-wrap > p, .text-wrap > div {
	margin: min(1.75rem, 4.67vw);
}
    
.img-wrap {
    display: table-cell;
    vertical-align: middle;
    width: 35vw;
}
    
.text-wrap {
    vertical-align: top;
    text-align: left;
    width: 55vw;
}
    

.img-wrap > img {
    width: 90%;
    box-shadow: 50px 50px 113px #defeec inset;
}

.right_img {
    text-align: right;
}

.widget > tr {
    display: table-row;
}

.widget > tr > td {
   display: table-cell;
}

@media (min-aspect-ratio: 3/4) {
    #scope > div > p {
        width: 95%;
    }
}

@media (max-aspect-ratio: 3/4) {
    .widget > tr {
        white-space: wrap;
    }
/*    .widget td {
	    width: calc(100% - max(3.5rem, 9.34vw));
        overflow-y: scroll;
    }
*/
    #scope div {
        width: 100%;
    }
}

.widget td a {
    cursor: pointer;
    color: lightblue;
}

.widget td a:hover {
    color: blue;
}