facappstyles.css

body {
    font-family:Courier;
    text-align:center;
    }

p { 
    color: rgb(237, 190, 202); /*colour picker chrome extension!*/
    font-size: 14px;
}

/*keeps text in center of viewport*/
.text-container{
	display: inline-block;
	width: 80vw;
	text-align: center;
    align-items: center; 
    margin: 50px;
}

.collage-container{
    align-items: center; 
    justify-content: center; 
    margin: 50px;
}

.collage{
    display: grid;
    justify-content: center;
    grid-template-rows: repeat(2, 250px);
    grid-template-columns: repeat(4, 187.5px);
}

/*In the grid, each picture is inserted into an item id, which is sized to cover a certain amount of grid blocks with percentage syntax*/
/*The image is then sized to be 100% of the relevant item!*/
#collage__item--1{
    width: 200%;
    height: 100%;
    display: block;
    object-fit: cover;
    grid-column-start: 1;
}

#collage__img--1{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;      
}

/*this code works for actual size (two grid boxes)*/
#collage__item--2{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3; 

}

#collage__img--2{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;   
}


/*This one was difficult to insert and breaks the rules! 
resized the image itself to 375 and 500
the width and height are now 100% not 300%- for both image and item
specified all start and end positions*/
#collage__item--3{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    grid-column-start: 3;
    grid-row-start: 1;
    grid-column-end: 5;
    grid-row-end: 3;
}

#collage__img--3{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    grid-column-start: 3;
    grid-row-start: 1;
    grid-column-end: 5;
    grid-row-end: 3;
}

#collage__item--4{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;  
    grid-row-end: 2;
}
#collage__img--4{ 
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;  
    grid-row-end: 2; 
}

#collage__item--5{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2; 
    grid-row-end: 3;    
}
#collage__img--5{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;  
    grid-row-end: 3; 
}

#collage__item--6{
    width: 100%;
    height: 200%;
    display: block;
    object-fit: cover;
    grid-column-start: 3;
    grid-row-start: 1;
}

#collage__img--6{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 3;      
}

#collage__item--7{
    width: 200%;
    height: 100%;
    display: block;
    object-fit: cover;
    grid-column-start: 3;
    grid-row-start: 2;
}

#collage__img--7{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 3;      
}

#collage__item--8{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    grid-column-start: 1;
    grid-row-start: 2;
}

#collage__img--8{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    grid-column-start: 1;    
    grid-row-start: 2; 
}

#collage__item--9{
    width: 200%;
    height: 200%;
    display: block;
    object-fit: cover;
    grid-column-start: 2;
    grid-row-start: 1;
}

#collage__img--9{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover; 
    grid-column-start: 2;
    grid-row-start: 1;   
}


/*the slideshow is the stop animation*/
.slideshow-container{
    width:375px;
    height: 500px;
    margin: auto;
}

.button{
    font-family: Courier;
    color: rgb(237, 68, 131); 
}

.button-hidden{
    opacity: 0;
}

.button-appear{
    font-family: Courier;
    opacity: 1;
}

.hidden{
    opacity: 0;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}

.showing{
    opacity: 1;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}