body{
font-family:"Michroma", sans-serif;
  font-style: normal;
  background-color: black;
   padding:50px;}

title{
  font-size: large;}

#Pieces{
    color: yellow;
    font-size: 100px;}

#rules{
  color: yellow;
  font-size: 100px;}

.summary{
  color:yellow;}
  
.documentation{
  font-size:2rem;
  color:yellow;}

section{
  overflow:hidden;}

#page img{
  width:100%;}

#page{
  /*wrap test in css? use fexdirection and flexrow, style container into their own class and fixed width. Use "width:200px" for consistent spacing*/
  position:relative;
  color:yellow;}

#Gallerytitle{
  font-size: 100px;
  color: yellow;}

.gallery{
  display:flex;
  gap: 50px;
  flex-direction: row;
  flex-wrap: wrap;
  display: flex;
    gap: 20px;
    color:yellow}

.gallery div{
  width:400px;}

#title{
  left:0%;
  color: black;
  font-size:120px;
  background-color: yellow;
  height: 150px;
  background-image: url(https://live.staticflickr.com/65535/54821499494_fe1345ceed_c.jpg);
  background-repeat: no-repeat;
  background-size: 1800px;
  padding-left: 60px;
  padding: 0%;
  margin: 0%;}

h1{
  margin: 0%;}
  
video{
  color:cyan;}

header{
  height:150px;
  background-repeat: no-repeat;
  background-size:100%;}