@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css");
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url("diamond.css");
@import url("responsive.css");
@import url("toc.css");

:root {
    /* Global colors */
    --cprimary: #D8D3C5 /* #280274 */;
    --csecondary: #FFFFFF /* #3652AD */;
    --caccent: #FFFFFF;
    --ctext: #000000;
    
    --sidebarw: 320px;
    --tocw:200px;
    --toc-right-margin:20px;
    
    --project-padding:50px;
    
    --row-2c-left: 70%;
    --row-2c-right: 30%;
}


body {
    font-family: "Roboto", sans-serif;
    font-size: 20px;
    font-weight: 300;
    font-style: normal;
}

/* Desktop/Tablet Navigation*/
nav
{
    background-color: var(--cprimary);
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 20px;
}

nav h1 a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 54px;
    color: var(--ctext);
    display: block;
}

nav a {
    text-decoration: none;
    color: var(--ctext);
    display: block;
}

nav a:hover {
  color: var(--caccent);
}

nav .cat
{
    padding: 6px 8px 6px 16px;
    font-size: 25px;
    font-weight: bold;
}

nav ul
{
    margin:0;
    margin-left:5px;
}

nav li
{
    color: var(--ctext);
}

nav .current-nav
{
    color: var(--caccent) !important;
}

/* Mobile Navigation*/
.mobilenav
{
    background-color: var(--cprimary);
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 20px;
}

/* The sidebar menu */
.sidenav {
  height: 100%; /* Full-height: remove this if you want "auto" height */
  width: var(--sidebarw); /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1001; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: var(--cprimary);
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px;
}

/* The navigation menu heading */
.sidenav h1 a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 54px;
    color: var(--ctext);
    display: block;
}

a i:hover {
    color: var(--caccent);
}

a p:hover {
    color: var(--caccent);
}

.fa-stack .fa-circle
{
    color: var(--ctext);
}

.fa-stack:hover .fa-circle
{
    color: var(--cprimary);
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列网格，每列宽度相同 */
    gap: 20px; /* 网格项之间的间距 */
}
.grid-container .grid-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    width: 100%; /* 确保每个网格项宽度一致 */
}
.image-container {
    height: 0; /* 设置容器的固定高度 */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* 隐藏超出容器范围的部分 */
    
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    margin-bottom: 20px;
}
.image-container img {
    position:absolute;
    top: 0;
    height: 100%; /* 图片高度填满容器 */
    width: auto; /* 自动调整宽度，保持图片纵横比 */
    max-width: 100%; /* 图片宽度最大为容器宽度 */
}
.grid-container .grid-item h2 {
    text-align: left; /* 标题左对齐 */
}

.grid-container .grid-item a {
    text-decoration: none;
}

.grid-container-4c {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4列网格 */
    gap: 20px; /* 网格项之间的间距 */
    padding: 20px;
    box-sizing: border-box; /* 包括内边距和边框在宽度计算内 */
}
.grid-container-4c .grid-item {
    background-color: #f4f4f4; /* 网格项背景颜色 */
    padding: 20px;
    border: 1px solid #ddd; /* 网格项边框 */
    border-radius: 8px; /* 网格项圆角 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 网格项阴影 */
}
.grid-container-4c .grid-item h3 {
    margin-top: 0; /* 去掉标题的外边距 */
}

.grid-container-5c {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 4列网格 */
    gap: 20px; /* 网格项之间的间距 */
    padding: 20px;
    box-sizing: border-box; /* 包括内边距和边框在宽度计算内 */
}
.grid-container-5c .grid-item {
    background-color: #f4f4f4; /* 网格项背景颜色 */
    padding: 20px;
    border: 1px solid #ddd; /* 网格项边框 */
    border-radius: 8px; /* 网格项圆角 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 网格项阴影 */
}
.grid-container-5c .grid-item h3 {
    margin-top: 0; /* 去掉标题的外边距 */
}

.inline-container {
    display: flex;
    align-items: center; /* 垂直对齐 */
}
.inline-container span{
    padding: 0;
}
.inline-container p {
    margin: 0; /* 移除默认外边距 */
    padding: 0 10px; /* 增加左右内边距 */
}
        
/* The navigation menu links */
.sidenav a {
    text-decoration: none;
    color: var(--ctext);
    display: block;
}

/* Style page content */
.mainframe {
}

.center-parent {
  width:auto;
  height:100vh;
  
  display: flex;
  justify-content: center;
  align-items: center;
  /*flex-direction: column;*/
}

.centered {
    margin: auto;
}

/* 2-column row */
.row-2c {
  display: flex;
}

.row-2c .left {
    flex: var(--row-2c-left);
}

.row-2c .right {
  flex: var(--row-2c-right);
}

/* 3-column row */
.row-3c {
  display: flex;
  gap: 10px;
}

.row-3c .left {
  flex: 33%;
}

.row-3c .middle {
  flex: 33%;
}

.row-3c .right {
  flex: 33%;
}

.center-box-left-aligned-content {
  width:600px;
}

.main {
    color: var(--ctext);
}

.main a {
    color: var(--ctext);
}

.main p {
    color: var(--ctext);
}

.main h1 {
    color: var(--ctext);
}

/* Project page */
.projpage
{
    padding:var(--project-padding);
}

.projpage h1
{
    font-size: 42px;
    margin-bottom:0;
    font-weight: 600;
}

.projpage h2
{
    margin-top:0;
    font-size: 28px;
    font-weight: 400;
}

.projpage h3
{
    font-size: 26px;
    margin-bottom:0;
    font-weight: 600;
}

.projpage h4
{
    font-size: 22px;
    margin-bottom:0;
    font-weight: 500;
}

.projpage h5
{
    font-size: 20px;
    margin-bottom:0;
    font-weight: 500;
}

/* Gallery */
.gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    grid-auto-flow: dense;
    gap: 10px;
}

.gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* border: 5px solid transparent; */
}

.gallery img:hover
{
    /* border: 5px solid var(--caccent); */
}

.gallery img.four-grid-cells {
    grid-row: span 2 / auto;
    grid-column: span 2 / auto;
}

.gallery img.wide-image {
    grid-column: span 2 / auto;
}

.bgcolored {
  background-color: var(--csecondary);
}

.accent {
    color: var(--caccent) !important;
}

/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}