Body{
  background:linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

/*ボックスの画像*/

.layout{
  display:flex;
}


.boxlayout{
  width:1000px;
  height:500px;
  z-index:3;
  position:absolute;
  left:460px;
  top:330px;
}

.box img{
  max-width:200px;
  height:auto;
  margin:10px;
  overflow:auto;
  filter:drop-shadow(0 7px 4px black);
  transform:rotate(0deg);
  transition:0.2s;
}
.box img:hover{
  transform:rotate(10deg);
  transition:0.2s;
}

.side-bar {
  border:1px solid white;
  background:white;
  border-radius:50%;
  
  width:650px;
  height:650px;
  padding:20px;
  margin:10px;
  z-index:1;
  position:absolute;
  top:-200px;
  left:-200px;
}
.side-bar ul{
  padding:5px;
  position:absolute;
  left:250px;
  top:300px;
  display:flex;
  flex-direction:column;
  gap:10px;
  list-style:none;
}


.side-bar h2{
  padding:5px;
  position:absolute;
  left:250px;
  top:180px;
  font-size:50px;
}

.tray img{
  width:1300px;
  z-index:2;
  position:absolute;
  top:170px;
  left:250px;
}

.side-bar a{
    text-decoration:none;
    color:black;
    font-size:20px;
}
.side-bar a:hover{
  color:pink;
}


/* 画面全体にかぶせるノイズレイヤー */
#noise-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 999999;

  /* 四角い粒ノイズ（くっきり） */
  background-image:
    repeating-linear-gradient(0deg, rgba(90,60,40,0.28) 0 3px, transparent 3px 6px),
    repeating-linear-gradient(90deg, rgba(90,60,40,0.28) 0 3px, transparent 3px 6px);

  background-size: 6px 6px;

  /* ランダム風の動き（3パターンを高速で切り替える） */
  animation: noiseRandom 0.12s steps(1) infinite;
  opacity: 0.5;
}

@keyframes noiseRandom {
  0%   { transform: translate(0,0); }
  33%  { transform: translate(-2px,1px); }
  66%  { transform: translate(1px,-2px); }
  100% { transform: translate(-1px,2px); }
}


#tint {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999998;
  background: rgba(255,180,120,0.18);
  mix-blend-mode: screen;
}