.fotoPage{
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-auto-rows: 75px;
    grid-auto-flow: dense;
    margin-top: 90px !important;
    }

    .margin{
        margin-left: none;
        margin-right: none;
    }

    .horizon{
        grid-column: span 2;
        min-width: auto;
        min-height: auto;
    }

    .verti{
        grid-row: span 2;
        min-width: auto;
        min-height: auto;
        display: none;
    }

    .groot{
        grid-column: span 2;
        grid-row: span 3;
        min-width: auto;
        min-height: auto;
    }

    .vier{
        grid-column: span 2;
        grid-row: span 2;
        min-width: auto;
        min-height: auto;
    }

    .tekst{
        grid-column: span 4;
        grid-row: span 6;
        min-width: auto;
        min-height: 100%;
    }

    .tekstGroot{
        grid-column: span 4;
        grid-row: span 7;
        min-width: auto;
        min-height: 100%;
    }

    .fotoPage > div {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #050402;
    }

    .fotoPage > div > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
        border-radius: 5px;
        
    }

    .tekstfoto{
        height: 100%;
        width: 100%;
        font-family: 'Nanum Myeongjo', serif;
        color: black;
        background-color: rgb(191, 236, 248);
        text-align: center;
        border-radius: 5px;
        box-shadow: 5px 5px 100px rgb(56, 177, 247) inset;
    }

    .tekstfoto > h1 {
        font-family: 'Special Elite', cursive;
        font-size: 2rem;
    }

    .postidPicture{
        transform: rotate(-7deg);
        box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
        margin-left: 3rem;
        width: 50%;
        height: 50%;
    }

    .postidPicture:hover{
        transform: rotate(-2deg);
        transition-duration: 1s;
        box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
        margin-left: 3rem;
        width: 55%;
        height: 55%;
    }

    .red{
        color: red;
        font-family: 'Butcherman', cursive;
    }

    .blue{
        color: blue;
    }

    

@media (min-width: 576px)
{
    .margin{
        margin-left: 100px;
        margin-right: 100px;
    }

    .fotoPage{
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 5fr));
    grid-auto-rows: 125px;
    grid-auto-flow: dense;
    margin-top: 140px !important;
    }

    .horizon{
        grid-column: span 3;
        grid-row: span 3;
    }

    .horizonK{
        grid-column: span 2;
        grid-row: span 1;
    }

    .horizonD{
        grid-column: span 2;
        grid-row: span 2;
    }

    .verti{
        grid-column: span 1;
        grid-row: span 3;
    }

    .groot{
        grid-column: span 2;
        grid-row: span 5;
    }

    .vier{
        grid-column: span 2;
        grid-row: span 3;
    }

    .vierG{
        grid-column: span 3;
        grid-row: span 5;
    }

    .tekst{
        grid-column: span 3;
        grid-row: span 3;
    }

    .tekstGroot{
        grid-column: span 2;
        grid-row: span 2;
    }

    .fotoPage > div {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #ffeead;
    }

    .fotoPage > div > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .tekstfoto{
        font-size: 1.5rem;
    }

    .tekstfoto > h1 {
        font-size: 2rem;
    }

    .postidPicture{
        margin-left: 5rem;
    }

    .tekstGroot{
        grid-column: span 3;
        grid-row: span 6;
        min-width: auto;
        min-height: 100%;
    }
}

/* styling paper */
#paper {
  width: 100%;
  height: auto;
  margin-top: auto;
  position: relative;
  background-color: rgb(255, 251, 213);
  color: #050402;
}

/* styling red vertical line */
#paper::before {
  content: '';
  width: 2px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 2rem;
  background-color: rgba(255,0,0,0.6);
}

/* styling blue horizontal lines */
#pattern {
  height: 100%;
  background-image: repeating-linear-gradient(rgb(255, 251, 213), rgb(255, 251, 213) 24px, teal 25px);
}

/* styling text content */
#paperContent {
  padding-top: 6px;
  padding-left: 56px;
  padding-right: 16px;
  height: 100%;
  font-family: 'Special Elite', cursive;
}