@import "./scene.css";
@import "../color.css";

/* ----------------------------------------------------------------------------
htmlの初期設定
---------------------------------------------------------------------------- */
html
{
    
    width:100%;
    height:100%;
    overflow:hidden;
    overscroll-behavior: none;
}

body
{
    margin:0;
    width:100%;
    height:100%;
    overflow:hidden;
    background-color:var(--blue);   /* 背景色の置き場。シーンごとに scenechange.js が書き換える */
    overscroll-behavior: none;

}



/* ----------------------------------------------------------------------------
シーンの初期設定
---------------------------------------------------------------------------- */
.scene
{
    display:none;

}

.scene.is-active
{
    display:flex;
}


/* ----------------------------------------------------------------------------
背景
---------------------------------------------------------------------------- */

#background
{
    display:contents;
}

#noise
{
    position:fixed;

    width:100%;
    height:100%;
    z-index:-99;
}

#cinemascope_top
{
    position:fixed;
    display:flex;
    overflow:hidden;
    
    z-index:100;
    margin:0;
    padding:0;
    top:0;
    width:100%;
    height:30px;

    background-image: url("../../img/band.svg");
    background-repeat: repeat-x;
    background-size: 40px 30px;

}
#cinemascope_bottom
{
    position:fixed;
    display:flex;
    overflow:hidden;
    
    z-index:100;
    margin:0;
    padding:0;
    bottom:0;
    width:100%;
    height:30px;
    transform:rotate(180deg);
    
    background-image: url("../../img/band.svg");
    background-repeat: repeat-x;
    background-size: 40px 30px;
}