/* style.cssを記載 */


/* 共通はここに記載 */
body{
    /* レイアウト */
    display: flex; /* 子要素=bodyないのパーツのレイアウトを指定する */
    flex-direction: column; /* 子要素を縦並びにする */
    justify-content: center; /* 縦中央 */
    align-items: center; /* 横中央 */
    min-height: 100vh;
    margin: 0;
    /* サイズ・余白 */
    width: 100%;
    /* 色 */
    background-color:hsl(212, 45%, 89%);
    /* テキスト */
    text-align: center;
}

/* 各項目のみの時は以下に記載 */
/* 大枠→各パーツの順、画面上の配置→どんな箱→どう見える→文字どうなってると上から読めるように書く */
.card{
    /* レイアウト */
    /* サイズ・余白 */
    max-width: 320px; 
    padding: 16px;
    border-radius: 15px;
    /* 色 */
    background-color:white;
    /* テキスト */
    font-family: "Outfit", sans-serif;
}

.QR-code{
    /* レイアウト */
    /* サイズ・余白 */
    width: 100%;
    display: block;
    margin: 0 auto;
    border-radius: 15px;
    /* 色 */
    /* テキスト */
}

h2{
    /* レイアウト */
    /* サイズ・余白 */
    /* 色 */
    /* テキスト */
    font-size: 26px;
}

p{
    /* レイアウト */
    /* サイズ・余白 */
    /* 色 */
    color: hsl(220, 15%, 55%);
    /* テキスト */
    font-size: 19px;
}

.attribution {
    /* レイアウト */
    /* サイズ・余白 */
    margin-top: 60px;
    /* 色 */ 
    /* テキスト */
    font-size: 11px; 
}

.attribution a { 
    /* レイアウト */
    /* サイズ・余白 */
    /* 色 */
    color: hsl(228, 45%, 44%); 
    /* テキスト */
}