@font-face {
font-family: IBM;
src: url('../assets/fonts/IBM\ PS-55.ttf');

}

h1 {
    font-family: IBM;
    font-size: 50px;
    letter-spacing: 15px;
    text-align: center;
    font-style: italic;
}

a {
    font-family: IBM;
    font-size: 40px;
    text-align: right;
    margin-right: 30px;
    font-style: italic;
    text-decoration: none;
    margin-bottom: 30px;
    
}
p {
font-family: IBM;
font-style: italic;
font-size: 20px;
margin: auto;

}
.photogrid {
grid-auto-flow: row dense;
display: grid;
row-gap: 10px; 
margin-right: 10px;
grid-template-columns: 300px;
width: 300px;
float: left;
text-align: center;

}
.photogridleft {
grid-auto-flow: row dense;
display: grid;
margin-left: 0px;
row-gap: 10px;  
grid-template-columns: 300px;
width: 300px;
float: left;
text-align: center;
}

.photogrid > div {
  background-color: transparent;
  height: auto;
  transition-duration: .2s;
}
.photogrid > div:hover {
  transform: scale(1.10, 1.10);
  transform-origin: center;
}
.photogrid > div:hover p {
  transform: scale(1.10, 1.10);
  transform-origin: center;
  

}
.photogridleft > div {
  background-color: transparent;
  height: auto;
  transition-duration: .2s;
}
.photogridleft > div:hover {
  transform: scale(1.10, 1.10);
  transform-origin: center;
}
.photogridleft > div:hover p {
  transform: scale(1.10, 1.10);
  transform-origin: center;
}




body {

background-image: url("../assets/webassets/dotcrosslight.png");
background-repeat: repeat;
background-color: #a0c86e;

}
#container {
max-width: 920px;
margin: 0 auto;

}

img {
    height: auto;
    width: 100%;
    


}

@media (prefers-color-scheme: dark) {
body{
background-image: url("../assets/webassets/dotcrossdark.png");
background-repeat: repeat;
background-color: #40677c;

}


p {
color: white;
}
h1 {
color: white;
}
}