/* The sidebar menu */
 @font-face {
     font-family: 'PS3';
     src: URL('/resources/PS3.ttf') format('truetype');
 }
.container {
    background-color: #2a2e33;
    display: flex;
    flex-direction: column;
    grid-template-columns: repeat(1, 1fr);
    grid-auto-rows: 150px;
    row-gap:77px;
}
 /* Style page content */
 .main, .projects, .webloglist, .cureentlyusing, .other {
     background:#2a2e33;
     position: relative;
     top: 65px;
     margin-left: 80px; /* Same as the width of the sidebar */
     padding: 0px 10px;
     color:#e4e9f0;
 }
.links {
     flex-wrap:row-reverse wrap;
     top:20px;
     margin-left: 80px; /* Same as the width of the sidebar */
     color:#e4e9f0;
 }
a {
    color: #89b4fa;
    text-decoration: none;

}
.prev a {
    position:fixed;
    align-self:end;
    display: block;
    bottom: 0px;
}
.title
{
    padding-top: 20px;
    text-align: center;
    font-family: "Funnel Display", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: 60px;
    background: linear-gradient(to bottom, #00000000, #e4e9f0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 0;
}
.titlename
{
    padding-top: 20px;
    text-align: center;
    font-family: "Funnel Display", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: 60px;
    padding-left: 10px;
    background: linear-gradient(to bottom, #e4e9f0, #00000000);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 0;
    
}
.titlediv
{
    display: inline-flex;
    justify-content: center;
}
body {
  margin: 0;
  overflow-x: hidden;
}
.header
{
    font-family: "Funnel Display", sans-serif;
    font-optical-sizing: auto;
    font-weight: 450;
    font-style: normal;
    font-size: 36px;
}
.main
{
    font-family: "Funnel Display", sans-serif;
    font-optical-sizing: auto;
    font-weight: 450;
    font-style: normal;
    font-size: 18px;
}
.arrow, .text
{
    font-family: "Funnel Display", sans-serif;
    font-optical-sizing: auto;
    font-weight: 450;
    font-style: normal;
    /* font-size: 36px; */
    font-size: 18px;
    user-select: none;
    color: #e4e9f0;
}
.weblog
{
    font-family: "Funnel Display", sans-serif;
    font-optical-sizing: auto;
    font-weight: 450;
    font-style: normal;
    /* font-size: 36px; */
    font-size: 18px;
    user-select: none;
    color: #e4e9f0;
    min-width: 0;
}
.link
{
    font-family: "Funnel Display", sans-serif;
    font-optical-sizing: auto;
    font-weight: 450;
    font-style: normal;
    font-size: 20px;
}
.linksitem
{
    border-style: dashed;
    border-color: #89b4fa;
    border: 2px;
    padding-bottom: 4px;
}
.header
{
    display: flex;
}
footer {
  width: 100%;
  height: 100px;
  display: block;
  bottom: 0;
  background: repeating-linear-gradient(
    -45deg,
    #00000000,
    #00000000 10px,
    #e4e9f0 10px,
    #e4e9f0 20px
  );
 flex-direction: column;
}
.projects h1, .webloglist h1
{
    font-family: "Funnel Display", sans-serif;
    font-optical-sizing: auto;
    font-weight: 450;
    font-style: normal;
    font-size: 36px;
}

.projectitem, .weblogitem
{
    font-family: "Funnel Display", sans-serif;
    font-optical-sizing: auto;
    font-weight: 450;
    font-style: normal;
    font-size: 24px;
    display: flex;
    padding-top: 5px;
    padding-bottom: 5px;
    align-items: center;
    width: 95%;
    justify-content: space-between;
    border-bottom: dashed 2px #e4e9f040;
}
.projectitem img
{
    height: 48px;
}
.projectitem h4, .projectitem p, .weblogitem h4, .weblogitem p
{
    margin: 0;
}
.projectitem h4, .weblogitem h4
{
    color: #e4e9f0;
}
.projectitem p, .weblogitem p
{
    font-weight: 400;
    font-size: 16px;
    color:#b5bac1;
    
}
.projectitem a, .weblogitem a
{
    text-decoration: none;
    display: flex;
    width: 100%;
}
.cureentlyusing p
{
    font-family: "Funnel Display", sans-serif;
    font-optical-sizing: auto;
    font-weight: 450;
    font-style: normal;
    font-size: 18px;
    
}
.cureentlyusing
{
    font-family: "Funnel Display", sans-serif;
    font-optical-sizing: auto;
    font-weight: 450;
    font-style: normal;
    font-size: 18px;
}

.webring {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  margin-bottom:16px;
  font-family: "Funnel Display", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: 24px;
}
.ring {
  display:flex;
  justify-content:center;
  gap:26px;
  flex-wrap:wrap
}
.webring a {
  color: #e4e9f0;
  text-decoration:none;
  /* font-size:14px */
}
.webring a:has(.ring-arrow) {
  display:inline-flex;
  align-items:center;
  gap:10px
}
.ring-arrow {
  display:block;
  width:24px;
  height:24px;
  flex:none
}
.webring a:hover {
  color:#e4e9f0;
  text-decoration:none
}
.webring .ringname {
  color:#e4e9f0;
}

@media screen and (max-width: 768px) {
    .title, .titlename {
        font-size: 40px;
        padding-top: 10px;
    }
    .titlediv {
        flex-wrap: wrap;
    }
    .main, .projects, .webloglist, .cureentlyusing, .links, .other, .weblog {
        margin-left: 15px !important;
        margin-right: 15px !important;
        padding: 0;
    }
    .header, .projects h1, .cureentlyusing h1, .other h1 , h1{
                font-size: 28px;
            }
.link {
            font-size: 16px;
            word-break: break-all;
        }
    .container
    {
        width: 100%;
        min-width: 0;
    }
    .projectitem, .weblogitem
    {
        width: 100%;
    }
    .weblog
    {
        word-break: break-all;
        font-size: 16px;
        width: auto;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        min-width: 0;
    }
}
.mutual {
    padding: 10px;
  position:relative;
  z-index:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  max-width:676px;
  margin:0 auto 22px;
  background-color: #2a2e33c0;
}
.mutual img {
  width:88px;
  height:31px;
  image-rendering:pixelated;
  border:0;
  display:block
}
.return2home
{
    text-align: center;
    font-family: "Funnel Display", sans-serif;
    font-optical-sizing: auto;
    font-weight: 450;
    font-style: normal;
    font-size: 36px;
}
.title404
{
    padding-top: 20px;
    text-align: center;
    font-family: "Funnel Display", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: 60px;
    background: linear-gradient(to bottom, #00000000, #e4e9f0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 0;

}
pre
{
    background-color: #0000003f;
    border: 1px solid #e4e9f03f;
    overflow-x: auto;
    max-width: 100%;
    box-sizing: border-box;
}
code
{
    /* background-color: #0000003f; */
}

.fullscreen-block {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: repeating-linear-gradient(
    -45deg,
    #2a2e33,
    #2a2e33 10px,
    #e4e9f0 10px,
    #e4e9f0 20px
  );
  animation: drift 18s linear infinite;
  display: none; 
  transform: translateY(100%);
}

.fullscreen-block.startTransition {
  display: block;
  animation: startTrans 1s cubic-bezier(.86,0,.07,1) forwards, scrollBg 10s linear infinite;
}

@keyframes scrollBg {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 500px 0; 
  }
}
@keyframes startTrans {
  from {
    transform: translateY(100%);   
  }
  50% {
    transform: translateY(0);
  }
  85%
  {
    transform: translateY(0);
  }
  to {
    transform: translateX(100%);
  }
}

.fullscreen-block.endTransition {
  display: block;
  animation: endTrans 0.5s cubic-bezier(.68, -0.55, .27, 1.55) forwards;
}