body {
    margin: 0 0 0 0;
    background: #202020;
    width: auto;
    height: auto;
    text-align: -webkit-center;
    background-image: url(BG1.webp);
    background-size: contain;
}
.grid {
    width: auto;
    background: #000000b1;
    border: #5d5d5d solid 2px;
    display: inline-grid;
    row-gap: 10px;
    grid-template-columns: minmax(auto) 1fr 4fr 1fr;
    grid-template-rows: minmax (100px 100px 100px 100px);
    grid-template-areas:
    'aa aa'
    't1 t1'
    'bb cc'
    't2 t2'
    'dd dd';
}
.page-aa {
    grid-area: aa;
    border: #5d5d5d solid 0px;
    width: 25cm;
    height: 100px;
}
.page-bb {
    grid-area: bb;
    border: #5d5d5d ridge 3px;
    background-color: #003e94;
    margin-left: 20px;
    width: 220px;
    height: 250px;
}
.page-cc {
    grid-area: cc;
    border: #0095ff solid 0px;
    display: block;
    width: 650px;
    height: 200px;
}
.page-dd {
    grid-area: dd;
    border: #ff0000 solid 0px;
    margin-left: 20px;
    width: 24cm;
    height: auto;
}
.page-bb p {
  font-size: 20px; font-family: "Roboto", sans-serif;font-weight: 600;
    color: #ffffff;
}
.d {
    border: #ffffff solid 1px;
    background: #0046c8;
    width: 24cm;
    height: 200px;
    margin-bottom: 10px;
    display: inline-grid;
    grid-template-columns: minmax(auto) 1fr 4fr 1fr;
    grid-template-rows: minmax (100px 100px 100px 100px);
    grid-template-areas:
    'd1 d2';
}
.d1 {
    grid-area: d1;
    border: #ff91c1 solid 0px;
    width: 200px;
    height: 200px;
}
.d2 {
    grid-area: d2;
    border: #d500d1 solid 0px;
    width: 18.6cm;
    height: 200px;
    display: inline-block;
    grid-template-columns: minmax(auto) 1fr 4fr 1fr;
    grid-template-rows: minmax (100px 100px 100px 100px);
    grid-template-areas:
    'd2t1 d2t2';
}
.d2t1 {
    grid-area: d2t1;
    border: #40af00 solid 0px;
    width: 100%;
    height: 140px;
}
.d2t1 p {
  margin-top: 10px; margin-left: -30px;
    border: #40af00 solid 0px;
    width: 650px;
    height: 140px;
    font-size: 15px; font-family: "Roboto", sans-serif;font-weight: 600;
    color: yellow;
    text-align: left;
    line-height: 1.8;
}
.d2t2 {
    grid-area: d2t2;
    display: flex;
    border: #ffffff solid 0px;
    width: 100%;
    height: 50px;
}
.page-t1 {
    grid-area: t1;
    background-color: #ffae00;
    width: 100%;
    height: 30px;
}
.page-t2 {
    grid-area: t2;
    background-color: #1eff00;
    width: 100%;
    height: 30px;
}
.d1 img {
    width: 200px;
    height: 200px;
}
.d2t {
    background-color: #0095ff;
    width: 180px;
    height: 50px;
    background-size: 
      10px 1px, 
      10px 1px, 
      1px 10px, 
      1px 10px;
    background-position: 
      0 0, 
      0 100%, 
      0 0, 
      100% 0;
    background-repeat: 
      repeat-x, 
      repeat-x, 
      repeat-y, 
      repeat-y;
    background-image: 
      linear-gradient(to right, #ffffff 50%, transparent 50%), 
      linear-gradient(to right, #ffffff 50%, transparent 50%), 
      linear-gradient(to bottom, #ffffff 50%, transparent 50%), 
      linear-gradient(to bottom, #ffffff 50%, transparent 50%);
    animation: marching-ants 1s linear infinite;
}
.d2l {
    background-color: #0095ff;
    width: 200px;
    height: 50px;
    background-size: 
      10px 1px, 
      10px 1px, 
      1px 10px, 
      1px 10px;
    background-position: 
      0 0, 
      0 100%, 
      0 0, 
      100% 0;
    background-repeat: 
      repeat-x, 
      repeat-x, 
      repeat-y, 
      repeat-y;
    background-image: 
      linear-gradient(to right, #ffffff 50%, transparent 50%), 
      linear-gradient(to right, #ffffff 50%, transparent 50%), 
      linear-gradient(to bottom, #ffffff 50%, transparent 50%), 
      linear-gradient(to bottom, #ffffff 50%, transparent 50%);
    animation: marching-ants 1s linear infinite;
}
.d2e {
    background-color: #0095ff;
    width: 200px;
    height: 50px;
    background-size: 
      10px 1px, 
      10px 1px, 
      1px 10px, 
      1px 10px;
    background-position: 
      0 0, 
      0 100%, 
      0 0, 
      100% 0;
    background-repeat: 
      repeat-x, 
      repeat-x, 
      repeat-y, 
      repeat-y;
    background-image: 
      linear-gradient(to right, #ffffff 50%, transparent 50%), 
      linear-gradient(to right, #ffffff 50%, transparent 50%), 
      linear-gradient(to bottom, #ffffff 50%, transparent 50%), 
      linear-gradient(to bottom, #ffffff 50%, transparent 50%);
    animation: marching-ants 1s linear infinite;
}
.d2p {
  background-color: red;
    width: 125px;
    height: 50px;
    background-size: 
      10px 1px, 
      10px 1px, 
      1px 10px, 
      1px 10px;
    background-position: 
      0 0, 
      0 100%, 
      0 0, 
      100% 0;
    background-repeat: 
      repeat-x, 
      repeat-x, 
      repeat-y, 
      repeat-y;
    background-image: 
      linear-gradient(to right, #ffffff 50%, transparent 50%), 
      linear-gradient(to right, #ffffff 50%, transparent 50%), 
      linear-gradient(to bottom, #ffffff 50%, transparent 50%), 
      linear-gradient(to bottom, #ffffff 50%, transparent 50%);
    animation: marching-ants 1s linear infinite;
}
.c {
    border: #ffffff solid 0px;
    width: 650px;
    height: 50px;
}
p {
  font-size: 20px; font-family: "Roboto", sans-serif;font-weight: 600;
  color: #ffffff;
  text-align: center;
  margin-top: 15px;
}
h1 {
  font-size: 60px; font-family: "Roboto", sans-serif;font-weight: 600;
  color: #ffffff;
  text-align: center;
  margin-top: 10px;
}
a {
  font-size: 12px;
  color: #ff0000;
  text-align: center;
}
.d2p a {
  font-size: 60px; font-family: "Roboto", sans-serif;font-weight: 600;
  color: #ffffff;
  text-align: center;
  margin-top: 10px;
  text-decoration: none;
}
/*//////////////////////////////////////////////////////////////////*/
@keyframes marching-ants {
    0% {
      background-position: 
        0 0, 
        0 100%, 
        0 0, 
        100% 0;
    } 
    100% {
      background-position: 
        40px 0, 
        -40px 100%, 
        0 -40px, 
        100% 40px;
    }
}