@import url("base.css");
/* body全体に背景画像を設定 */
body {
    background-image: url('wallpaper.jpg');
    background-size: cover; /* 画面全体を覆うように画像を拡大・縮小 */
    background-position: center; /* 画像を中央に配置 */
    background-repeat: no-repeat; /* 画像を繰り返さない */
    background-attachment: fixed; /* スクロールしても背景を固定 */
    display: flex;

    flex-direction: column;
    align-items: center; /* 中央揃え */
    justify-content: flex-start; /* 上端揃え */
    min-height: 100vh;
    padding-top: 8vh; /* 上から少し離す */
    box-sizing: border-box; /* paddingを含めて高さを計算 */
}

/* テキストを囲む白いコンテナ */
.content-container {
    /* 背景色を白の半透明に設定 (rgbaの最後の値が透明度: 0.0〜1.0) */
    background-color: rgba(255, 255, 255, 0.85);
    
    padding: 2em 3em; /* 内側の余白（上下に2文字分、左右に3文字分） */
    width: 70%;
    border-radius: 12px; /* 角を少し丸くする */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* 影を付けて立体感を出す */
    text-align: center;
    z-index: -1;
    max-width: 80%;
}

.perfect-container {
    /* 技術者として恥ずかしくない、完璧なCSS */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border-radius: 12px; /* 角を少し丸くする */ 
    padding: 0.2em 3em;
    margin-top: -1.5em;
    margin-left: 2em;

    text-align: left;
    width: 70%;
    max-width: 80%;
    border: 0.15em solid #000000;
}
.slided-container {
    /* 文字を意図的にずらす、コンテナ*/
    position: relative;
    top: 2.25em;
    left: 1em;

    display: flex;
    flex-direction: row;
}
.my-characteristics {
    flex:1;
}
.my-favorites {
    flex:1;
}
/* --- スマートフォン向けのスタイル --- */
/* 画面幅が768px以下の場合に適用される */
@media (max-width: 768px) {
    .slided-container {
        flex-direction: column;     /*スマホだと横配置は窮屈なので、縦配置 */
        top: -4.7rem;
        left: 1rem;
    }
    .perfect-container {
    /* 技術者として恥ずかしくない、完璧なCSS */
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        border-radius: 12px; /* 角を少し丸くする */ 
        padding: 0.0em 3em;
        margin-top: 4.5rem;
        margin-left: 2em;

        text-align: left;
        width: 60vw;
        height: 6.9em
    }
}