/*
  まず、2つのfixed-subをまとめる。さらにfixed-subとvariable-subをまとめてsubとする。
  >=1200の場合、これらのsubを両端に配置。flexが使えるかと。中央にmain.
  mainはこれらとは独立している方がいいと思う。
*/

html {
  font-size:calc(100% * 0.625);
}

* {
  box-sizing: border-box;
}

body {
  margin:0;
  width:100%;
  height:100dvh;
  display:grid;
  grid-template-rows:1fr 4rem;
  font-size:1.8rem;
}

main{
  display:grid;
  overflow:auto;
  width:100%;
  position:relative;
}

/* もっとも基本的なあれ */

#main{
  background-color: rgba(255,255,255,0.3);
  overflow:scroll;
  padding:0 0.5rem 0 3rem;
}
#fixed-sub0{
  background-color:rgba(200,100,200,0.8);
  overflow:scroll;
  max-height:calc(100dvh - 4rem);
  padding:0 0 0 3rem;
}
#fixed-sub1{
  background-color:rgba(100,200,200,0.8);
  overflow:scroll;
  max-height:calc(100dvh - 4rem);
  padding:0 0 0 3rem;
}
#variable-sub{
  background-color:rgba(200,200,100,0.8);
  overflow:scroll;
  max-height:calc(100dvh - 4rem);
  padding:0 0 0 3rem;
}

main{
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  position:relative;
}

#buttons{
  position:absolute;
  left:0;
  right:0;
  /* fit-contentを指定すると要素がびょ～～～んって伸びるのを防ぐことができる。 */
  /* ただIEでは機能しない。幅が可変ならともかく、決まってるならダイレクトでもいいと思うよ。 */
  width:3rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height:calc(100dvh - 4rem);
  max-height:20rem;
}

.toggle-button{
  width:100%;
  height:30%;
  border: none;
  border-radius:0 1.2rem 1.2rem 0;
}

#main{
  width:60rem;
  margin:0 auto;
  display:block;
}

#fixed-sub0{
  width:30rem;
  position:absolute;
  left:-30rem;
  transition:0.2s;
}
#fixed-sub0.open{
  left:0;
}

#fixed-sub1{
  width:30rem;
  position:absolute;
  left:-30rem;
  transition:0.2s;
}
#fixed-sub1.open{
  left:0;
}

#variable-sub{
  width:30rem;
  position:absolute;
  left:-30rem;
  transition:0.2s;
}
#variable-sub.open{
  left:0;
}

/* break-pointは変数を使えないので、手動で同じ比率を設定する */
@media screen and (min-width: calc(90rem * 0.625)) {
  #buttons{
    display:none;
  }
  main{
    display:flex;
    flex-direction:row;
    justify-content:space-around;
  }
  #main{
    width:60rem;
    display:block;
  }
  #sub{
    position:static;
    display:flex;
    flex-direction:column;
    overflow:scroll;
    max-height:calc(100dvh - 4rem);
  }
  #fixed-sub{
    width:30rem;
    order:1;
    overflow:visible;
  }
  #fixed-sub0{
    position:static;
    overflow:visible;
    max-height:none;
  }
  #fixed-sub1{
    position:static;
    overflow:visible;
    max-height:none;
  }
  #variable-sub{
    width:30rem;
    order:2;
    position:static;
    overflow:visible;
    max-height:none;
  }
}

/* break-pointは変数を使えないので、手動で同じ比率を設定する */
@media screen and (min-width: calc(120rem * 0.625)) {
  #sub{
    position:absolute;
    left:0;
    right:0;
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:baseline; /* これがないと伸びてしまう */
    gap:60rem;
    overflow:visible;
    pointer-events:none; /* subのpointer-eventsを殺す */
  }
  #fixed-sub{
    width:30rem;
    order:2;
    overflow:scroll;
    max-height:calc(100dvh - 4rem);
    pointer-events:auto; /* 子要素で復活させる */
  }
  #variable-sub{
    width:30rem;
    order:1;
    overflow:scroll;
    max-height:calc(100dvh - 4rem);
    pointer-events:auto; /* 子要素で復活させる */
  }
  #main{
    width:60rem;
    display:block;
    margin:0 auto;
    overflow:scroll;
  }
}

#footer{
  background-color:black;
  color:white;
}

/* custom css */

ul{
  margin:0;
}

li{
  background:transparent;
}

li:hover{
  background-color:rgba(255,255,255,0.5);
}

#tags{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
}

#tags > div{
  background:transparent;
  margin:0 10px;
}
#tags > div:hover{
  background-color:rgba(255,255,255,0.5);
}
.index{
  margin:0;
}

body{
  background-image: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url("background.JPG");
  background-attachment: fixed;
  background-position: center;
}

.index-link{
  scroll-behavior:smooth;
}