:root
{
  --main-color: #53B7FF;
  --secondary-color: #182430;
  --tertiary-color: white;
}

a, a:hover, a:visited, a:active
{
  color: inherit;
  text-decoration: none;
 }

@font-face
{
  font-family: "FontZero";
  src: url("fonts/Playbrush.ttf");
}
@font-face
{
  font-family: "FontOne";
  src: url("fonts/Oshidashi-M-Gothic-TT.ttf");
}

body
{
  background-color: var(--main-color);
  animation: bg_cycle 1s infinite;
}

@keyframes bg_cycle
{
  0%
  {
    background-image: url("images/main_bg_0.png");
    background-repeat: repeat-y;
    background-size: 100% auto;
    background-position: top left;
  }
  33%
  {
    background-image: url("images/main_bg_1.png");
    background-repeat: repeat-y;
    background-size: 100% auto;
    background-position: top left;
  }
  66%
  {
    background-image: url("images/main_bg_2.png");
    background-repeat: repeat-y;
    background-size: 100% auto;
    background-position: top left;
  }
  100%
  {
    background-image: url("images/main_bg_0.png");
    background-repeat: repeat-y;
    background-size: 100% auto;
    background-position: top left;
  }
}

.main_banner
{
  max-width: 1440px;
  margin: 0 auto;
}

.main_banner img
{
  width: 100%;
  height: auto;
  display: block;
}

.page_layout
{
  display: flex;
  justify-content: center;
  align-items: flex-start;

  width: fit-content;
  min-width: 100%;

  margin: 0 auto;
}

.main_container
{
  max-width:900px;
  margin: 20px;
  background: var(--secondary-color);
  padding: 20px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  border-radius: 5px;
  overflow: hidden;
}

.side_nav_panel
{
  width: 300px;
  background: var(--secondary-color);
  margin: 20px;
  padding: 5px 5px 15px 5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  border-radius: 5px;
  overflow: hidden;
}

.panel_header
{
  background-color: var(--main-color);
  margin: 20px auto 0 auto;

  border-radius: 5px 5px 0 0;
  overflow: hidden;
}

.panel_body
{
  background-color: var(--tertiary-color);
  max-width: 900px;
  margin: 0 auto 20px auto;

  border-radius: 0 0 5px 5px;
  overflow: hidden;
}

.panel_white_no_round
{
  background-color: var(--tertiary-color);
  max-width: 900px;
  margin: 0 auto 20px auto;

  border-radius: 0 0 0 0;
  overflow: hidden;
}

.gallery_grid
{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2px;
}

.card
{
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background: white;
  margin: 0 10px 10px 10px;
}
.card img
{
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.drawing_viewer
{
  width: 100%;
  height: 800px;
  object-fit: contain;
  display: block;
}

#about_intro
{
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-color: transparent;
  z-index: -9999;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}

#about_intro img
{
  position: absolute;
  bottom: 0;

  height: 90%;
  width: auto;

  transform: translateX(-40%);
}




































































/**/