body{
background-image:url("gra/BG2.png");
}

pre{
  font-size:x-large;
}
p{
  margin-left: 2vw;
  margin-right: 2vw;
  height:auto;
  font-size:x-large;
}

.fontx{
 font-size:x-large;
}

.Align_Center{text-align:center;
}
.Align_Left{text-align:left;}
.Align_Right{text-align:right;}

.Align_Contents_Center{
  display: flex;
  justify-content: center;
  align-items: center;
}

.BGBlack {
  height 100%;
  display: flex;
  justify-content: center;
  align-items: center;
background-color:black;
}


.BGBlue{
 background-color:blue;
}

.PageTitle{
  width: 80vw;
  height:40vh;
  background-image:url("gra/header1.png");
  background-size:cover;
  background-position: center;
  background-repeat: no-repeat;
}

.PageTitleText{
  color: white;
  font-size:xx-large;
  text-align:center;
  text-shadow: black 1px 1px 2px,navy 0 0 15px;
}

.Midashi{
    background-color:rgb(0,0,255);
  color: white;
  font-size:x-large;
}


@media screen and (orientation:landscape)
{
.ShadowBox{
width:50vw;
border:3px solid #3388ff;
border-radius: 20px;
background-color: white;
box-shadow:4px 4px 4px 5px black;
}
}
@media screen and (orientation:portrait)
{
.ShadowBox{
border:3px solid #3388ff;
border-radius: 20px;
background-color: white;
box-shadow:4px 4px 4px 5px black;
}
}

.GraAndTextList{
display: flex;
flex-direction: column;
}
.ListItem{
border: 5px solid orange;
}
.IMGFloatLeft{
float:left;
image-rendering: pixelated;
width: 10vw;
height: auto;
}
.IMGFloatLeftReset{
clear:left;
}

.IMGVW30{
image-rendering: pixelated;
width: 30vw;
height: auto;
}

.IMGVW50{
image-rendering: pixelated;
width: 50vw;
height: auto;
}

.IMGVW80{
image-rendering: pixelated;
width: 80vw;
height: auto;
}


.IMGVW100{
image-rendering: pixelated;
width: 100vw;
height: auto;
}


.IMGVW80Center{
image-rendering: pixelated;
width: 80vw;
height: auto;
}



.IMGVW50Center{
display: block;
image-rendering: pixelated;
width: 50vw;
height: auto;
margin: 0 auto;

}

.KuroFuchi{
font-size:xx-large;
color:white;
text-shadow: black 2px 2px 4px;
}

.OrangeText{
font-size:xx-large;
color:rgb(255,157,0);
text-shadow: black 2px 2px 4px,black 4px 4px 8px;
}

.ShiroText{
font-size:x-large;
color:black;
text-shadow: white 2px 2px 4px;
}

.RedMidashi{
  font-size:xx-large;
  color:rgb(255,0,0);
  background-color:rgb(255,255,255);
  border-color:darkorange;
}

.GraYokoNarabe{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:horizontal;
-webkit-direction:normal;
-ms-flex-directon:row;
flex-direction: row;
}