@charset "UTF-8";

/*星空アニメーション->https://animate-club.com/background/starry_sky/　*/
/* ボックスデザイン->https://www.moca-memo.com/2019/10/kakomiwaku.html#toc_headline_10 */
/* カラーコード->https://www.colordic.org/ */
/* テキストの影->https://hotarunote.com/text-shadow/ */

/* 温かい光 */
/*
.main-warm-light {
    background: radial-gradient(

    )
}
*/

h1.neon {
    color: #f4a460;
    font-size: 50px;
    font-family: 'misaki-gothic-2nd';
    text-shadow: 2px 2px 3px #f4a460;
}

p {
    color: #f4a460;
}

html {
    height: 100%;
}
  
body {
    background: linear-gradient(0deg, #ccae9f 0%, #28305d 40%, #050847 80%) no-repeat #383d95;
    min-height: 100%;
    margin: 0;
    overflow: hidden;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: center;
}

body.starry-sky {
    width: 100%;
    height: 100%;
    position: relative;
}

.star {
    background-color: white;
    position: absolute;
    border-radius: 50%;
    animation-name: twinkle;
    animation-iteration-count: infinite;
}

/* 青いテキストボックス */
.blue-box {
    border: #1e90ff solid 3px; 
    border-left: #1e90ff solid 20px; 
    border-right: #1e90ff solid 20px;
    padding: 30px; 
    background: #191970; 
    font-size: 100%;
    width: 80rem;
}

.container {
    display: flex;
    justify-content: center;
}



@keyframes twinkle {
    50% {
        transform: scale(0.2);   
    }
}