@font-face {
    font-family: dindong;
    src: url('DINdongv3.ttf');
}

body{
    font-family: dindong;
    overflow-y: hidden;
}

@media screen{

  section{
      width: 98vw;
      height: 98vh;
      display: grid;
      grid-template-areas: "soleil ordinateur maison fleur";
      grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  pre#soleil{
    grid-area: soleil;
    font-size: 8px;
  }

  pre#ordinateur{
    grid-area: ordinateur;
    font-size: 8px;
  }

  pre#maison{
    grid-area: maison;
    font-size: 8px;
  }

  pre#fleur{
    grid-area: fleur;
    font-size: 8px;
  }
}

@media print{
  @page {
          size: 297mm 420mm;
          margin: 0;
          padding: 0;
       }

  body {
    padding: 0;
    margin: 0;
  }

   section{
       height: 420mm;
       width: 297mm;
       display: grid;
       grid-template-areas: "soleil ordinateur"
                            "maison fleur";
       grid-template-rows: 1fr / 1fr;
       grid-template-columns: 1fr / 1fr;
   }

   pre {
     margin: 0;
     padding: 0;
     width: 148,6mm;
     height: 210mm;
     color: white;
     font-size: 10px;
   }

   pre#soleil{
     grid-area: soleil;
     background-color: #f66260ff;
   }

   pre#ordinateur{
     grid-area: ordinateur;
     background-color: #819999ff;
   }

   pre#maison{
     grid-area: maison;
     background-color: #819999ff;
   }

   pre#fleur{
     grid-area: fleur;
     background-color: #f66260ff;
   }

}