/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link lolor." */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");



@font-face {
    font-family: 'Source Han Sans';
    src: url('/font/SourceHanSansHWSC-Normal.woff2');
    font-weight: normal;
}
@font-face {
    font-family: 'Source Han Sans';
    src: url('/font/SourceHanSansHWSC-ExtraLight.woff2');
    font-weight: 100;
}
@font-face {
    font-family: 'Oswald';
    src: url('/font/Oswald-VariableFont_wght.ttf');
}

a {
    color: gray;
}

.scroll {
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: bold;

  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  width: calc(100% + 40px);
  margin-bottom: 5px;
  margin-left: -20px;
  background-color: black;
  border-top: 2px solid rgb(141, 141, 141);
  border-bottom: 2px solid rgb(141, 141, 141);
  padding: 5px 0px;
}

.scroll p {
  display: inline-block;
  animation: scroll 5s linear infinite;
  min-width: 50%;
  padding-left: 40px;
  padding-right: 40px;
  margin: 0;
  border-left: 2px solid rgb(141, 141, 141);
  text-align: center;
}

@keyframes scroll {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(-100%);
  }
}


body {
  background-image: url('/image/pattern-base.png');
  color: white;
  font-family: Source Han Sans, sans-serif;
  width: fit-content;
  margin: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 18px;
}

h1, h2, h3 {
  font-family: Oswald, sans-serif;
  font-weight: 500;
}

.box {
  background-color: rgba(0, 0, 0, 0.6);
  border: 4px solid rgb(141, 141, 141);
  border-right: 4px solid rgb(94, 94, 94);
  border-bottom: 4px solid rgb(63, 63, 63);
  margin: 2px;
  padding: 10px;
  margin-bottom: 100px;
}

#main {
  padding: 10px 20px 100px 20px;
}

a.sidelist {
  color: white;
  text-decoration: none;
}

div.sidelist {
  font-size: 16px;
  padding: 2px 10px 2px 10px;
  transition: background-color .1s;
}
div.sidelist:hover {
  background-color: rgba(88, 88, 88, 0.5);
}

hr {
  height:2px;
  border-width:0;
  color:rgb(141, 141, 141);
  background-color:rgb(141, 141, 141);
  margin-left: -10px;
  margin-right: -10px
}

a.button {
  display: inline-block;
  background-color: rgba(88, 88, 88);
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 5px;
  padding-top: 5px;
  text-align: center;
  width: fit-content;
  border: 3px solid rgba(255, 255, 255, 0.35);
  border-right: 3px solid rgba(0, 0, 0, 0.35);
  border-bottom: 3px solid rgba(0, 0, 0, 0.5);
  color: white;
  font-family: Source Han Sans, sans-serif;
  font-size: 20px;
  text-decoration-line: none;
  transition: transform .1s;
  background-clip:border-box;
}

a.button:active {
  filter: brightness(75%);
  border: 3px solid rgba(255, 255, 255, 0.35);
  border-left: 3px solid rgb(0, 0, 0, 0.35);
  border-top: 3px solid rgba(0, 0, 0, 0.2);
}

.unavailable {
  color: gray;
  filter: saturate(50%) brightness(50%);
}

td {
  padding-right: 10px;
  padding-bottom: 10px;
}

div.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content:space-evenly
}

div.coll {
   padding-bottom: 50px;
}

div.showcase {
  justify-content:center;
  margin-bottom: 10px;
  margin-top: 50px;
  margin-left: -20px;
  margin-right: -20px;
}

.coll img {
  height: 160px;
  margin: 5px;
  border: 3px solid rgb(141, 141, 141);
  border-right: 3px solid rgb(94, 94, 94);
  border-bottom: 3px solid rgb(63, 63, 63);
}

.showcase img {
  height: 100px;
  margin: 7px;
  scale: 1.6;
  margin-bottom: 40px;
}

div.socibuttons {
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
  row-gap: 10px;
  column-gap: 20px;
}

.socibuttons a.button {
  padding-left: 20px;
  padding-right: 20px;
}

div.topbar {
  margin: auto;
  width: fit-content;
  padding-bottom: 10px;
  justify-content: center;
  text-align: center
}

h4 {
  margin-bottom: 10px;
  font-size: 24px;
  
}

.sidebar hr {
  margin-left: 0px;
  margin-right: 0px;
}

div.project {
  display: inline-block;
  width: 100%;
  font-size: 16px;
}

.project img {
  float: left;
  margin-right: 20px;
  width: 240px;
  height: 160px;
  object-fit:contain;
}

.project img:hover {
  transition: transform .2s;
  transform: scale(1.1);
}

.project hr {
  margin-left: 10px;
  margin-right: 10px;
  height: 1px;
}

small {
  color: gray;
}

.blogentry {
  color: white;
  text-decoration: none;
  width: min-content;
}

.blogentry div {
  padding: 10px 0px;
  border-bottom: 1px solid gray;
}

@media (max-width: 980px) {
  .sidebar {
    display: none;
  }
  #main {
    display: inline-block;
    width: 93%;
    margin: 0px;
  }
}
@media (min-width: 981px) {
  .topbar {
    display: none;
  }
  #main {
    min-width: 720px;
  }
}

@media (min-width: 721px) {
  #main {
    width: 720px;
  }
}

@media (max-width: 720px) {
  div.scroll {
    width: 100vw;
    margin: 0px;
  }
  .box {
    padding: 0;
    margin: 0;
  }
}

@media (max-width: 500px) {
  .project img {
  width: 100%;
  margin-bottom: 10px;
  }
}

@media (pointer: fine) {
  .coll img:hover {
  transition: transform .2s;
  transform: scale(1.7);
  cursor: zoom-in;
  z-index: 999;
  }

  .project img:hover {
  transition: transform .2s;
  transform: scale(1.1);
  }

  .blogentry div:hover {
  transform-origin: left;
  transition: transform .2s;
  transform: scale(1.1);
  min-width: 91%;
  width: fit-content;
  }

  .showcase img:hover {
  transition: transform .2s;
  z-index: 999;
  transform: scale(1.4);
  }

  a.button:hover:not(.unavailable) {
  filter: brightness(125%);
  transform: scale(1.05);
  }

  a.unavailable:hover {
  transform: none;
  filter: saturate(50%) brightness(50%);
  }

  a.button:active:not(.unavailable){
  filter: brightness(75%);
  transform: scale(1);
  }
}

@media (pointer: coarse) {
  a.button:active {
  transform: scale(0.95);
  }
}




.recent {
    align-items: center;
    text-align: center;
}

.recent img {
    width: 150px;
    height: auto;
}