/* ページ全体の見た目を変更したい部分です
html要素やbody要素ではなく、クラスに対して設定しています
html要素やbody要素に対してとしてしまうと、インターネットアーカイブのウェイバックマシンでこのCSSを使ったページを保存したものを表示させるときに、めんどくさいことになるおそれがあるので、避けています

ジュン2のホームページAngelAZTINにおいては、このCSSを使うページではヘッダーもフッターも置いていないので、body要素の直接の子要素として配置したmain要素をページ全体と見なし、このクラスを設定しています
ヘッダーやフッターを使うページでこのCSSを使う場合、body要素の直接の子要素としてdiv要素を置き、このクラスを設定するのが妥当と考えられます */
.document-jun2 {

    /* ページの横幅が広くなりすぎるのを嫌がっています */
    width: min(1000px, 95%);

    /* ページの横幅を制限することによって余白ができるが、左右均等なのがまあ一番落ち着くであろう */
    margin: auto;

    /* ページの一番下の部分を画面の上の方に表示させることもできるようにしておきたい */
    margin-bottom: 90vh;

    /* 行間はこれぐらいが一番落ち着くかなあと思っています */
    line-height: 1.5;
}

/* Windowsでは文字の描画でアンチエイリアスかからないことがよくあります
文字を僅かに回転させると、強制的に文字の描画にアンチエイリアスがかかります
かからないよりかかる方が好きなので、これを設定しています

僅かに回転したブロック要素の中に僅かに回転したブロック要素があると、二重に回転します
これを許してしまうと目に見えるほど回転してしまうこともあり得て不便です
そのため対象を限定し、回転させた要素の中にブロック要素が含まれないようにします */
.document-jun2 :is(h1, li, p, h2) {
    transform: rotate(0.03deg);
}

/* クリック・タップの判定が大きくて押しやすいハイパーリンクを作りたいので
a要素の中にdiv要素を入れてそれを半透明な青いボックスになるようにします
ボックスの中にある程度余白が欲しいのでそれも設定します */
.document-jun2 a > div {
    box-sizing: border-box;
    min-height: 60px;
    background-color: #00f2;
    padding: 16px;
}    

/* ハイパーリンクを列挙するul要素につけるクラスです
この場合デフォルトのul要素のマーカーや字下げは消したいということで設定しています */
.links-jun2 {
    padding: 0;
}
.links-jun2 > li {
    list-style-type: none;
    margin: 2px 0;
}

/* 見出し・段落にデフォルトで付く余白がでかすぎるため小さくします */
.document-jun2 :is(h1, p, h2) {
    margin: 4px 0;
}

/* 見出しのデフォルトのフォントサイズでかすぎるため小さくします */
.document-jun2 > h1 {
    font-size: 125%;
}
.document-jun2 h2 {
    font-size: 112.5%;
}



/*
v2追加
sectionの間に空間がないの見づらすぎるやろ
*/
.document-jun2 section {
    margin: 3em 0;
}