CSS3でコンテンツを全画面表示

/*フルスクリーン（全画面）で表示*/

 {
  width: 100vw;
  height: 100vh;
}

<section>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        
        .hero {
            width: 100vw; /* 全画面表示 */
            height: 100vh; /* 全画面表示 */
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
            position: relative;
        }
        .hero0 {
            background: #ffffff;
        }
        .hero1 {
            background-image: url(https://mebee.info/wp-content/uploads/2021/01/yamanashi-Arakurayama.jpg);
        }
        .hero2 {
            background-image: url(https://mebee.info/wp-content/uploads/2021/01/saga-_Okusu.jpg);
        }
        .hero3 {
            background-image: url(https://mebee.info/wp-content/uploads/2021/01/ehime-Kurushima.jpg);
        }
        .hero4 {
            background-image: url(https://mebee.info/wp-content/uploads/2021/01/yamagata-_Snow.jpg);
        }
        
        /* テキスト */
        .text-box {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            z-index: 100;
            letter-spacing: 0.05em;
            text-align: center;
            color: #fff;
            text-shadow: 1px 2px 3px rgb(0 0 0 / 70%);
        }
        .title {
            font-size: 4em;
            font-weight: bold;
            line-height: 1.2;
            padding: 0 50px;
        }
        .hero0 .text-box {
            color: #191919;
            text-shadow: none;
        }           
        .hero0 .title {
            font-size: 2em;
        }
        .description:before, .description:after {
            content: "＿";
            position: relative;
            bottom: 0.5em;
            margin: 0.5em;
        }
        .hero0 .description:before, .hero0 .description:after {
            content:none;
        }
    </style>
         <div class="hero hero0">
            <div class="text-box">
                <img src="https://mebee.info/wp-content/uploads/2020/06/mebee_logo.png" alt="mebee" width="" height="">
                <p class="title">CSS3だけでコンテンツを全画面表示 デモページ</p>
                <p class="description">説明ページに戻る</p>
            </div>
        </div>
        <div class="hero hero1">
            <div class="text-box">
                <p class="title">spring</p>
                <p class="description">山梨県 新倉山浅間公園（忠霊塔）</p>
            </div>
        </div>
        <div class="hero hero2">
            <div class="text-box">
                <p class="title">summer</p>
                <p class="description">佐賀県 武雄の大楠</p>
            </div>
        </div>
        <div class="hero hero3">
            <div class="text-box">
                <p class="title">autumn</p>
                <p class="description">愛媛県 亀老山から望む来島海峡大橋</p>
            </div>
        </div>
        <div class="hero hero4">
            <div class="text-box">
                <p class="title">winter</p>
                <p class="description">山形県 蔵王温泉スキー場 樹氷</p>
            </div>
        </div>   
</section>