/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

* {
  margin: 0px 0px 0px 0px;
}

body {
  background-color: #fff2d6;
}

@font-face {
  font-family: 'bluescreen';
  src: url('bluescreen.ttf') format('truetype');
}

@font-face {
  font-family: 'bankprinter';
  src: url('F25_Bank_Printer.ttf') format('truetype');
}

@font-face {
  font-family: 'bazaroni';
  src: url('BAZARONI.TTF') format('truetype');
}

.container {
  display: grid; 
  grid-template-columns: 15px 1235px 15px auto; 
  grid-template-rows: 100px 10px 700px 100px auto;
  }
  
.banner {
  grid-column: 2;
  grid-row: 1;
  background-color: #FFFFFF;
  display: grid; 
  border: #B3BF6B 2px solid;
}
  
main {
    grid-column: 2;
    grid-row: 3;
    background-color: #FFFFFF;
    display: grid; 
    grid-template-columns: 10px 240px 10px 595px 10px 340px 10px; 
    grid-template-rows: 10px 675px 5px 70px 10px;
    border: #B3BF6B 2px solid;
 }

.left {
    grid-column: 2/3;
    grid-row: 2;
    background-color: #c5e0fa;
    display: grid;
    grid-template-columns: 5px 230px 5px; 
    grid-template-rows: 10px 30px 5px 620px 15px;
    border: #3d7cb8 2px solid;
}

.left-header {
  grid-column: 2;
  grid-row: 2;
}

.left-content {
  grid-column: 2;
  grid-row: 4;
  background-color: #FFFFFF;
  margin: 5px 10px 5px 10px;
}

.left-footer {
  grid-column: 2;
  grid-row: 6;
  margin-left: auto;
  margin-right: 10px;
}

.middle {
    grid-column: 4/5;
    grid-row: 2;
    background-color: #0d74d6;
    display: grid;
    border: #002a52 2px solid;
    grid-template-columns: 5px 585px 5px; 
    grid-template-rows: 10px 30px 5px 560px 5px 55px 15px;
}

.middle-header {
  grid-column: 2;
  grid-row: 2;
}

.middle-content {
  grid-column: 2;
  grid-row: 4;
  background-color: #FFFFFF;
  border: #002a52 2px solid;
  margin: 5px 10px 5px 10px;
}

.middle-footer {
  grid-column: 2;
  grid-row: 6;
  margin-left: auto;
  margin-right: 10px;
}

.right {
    grid-column: 6/7;
    grid-row: 2;
    background-color: #EAF5D3;
    display: grid;
    border: #CAD19F 2px solid;
    grid-template-columns: 5px 330px 5px; 
    grid-template-rows: 10px 30px 5px 600px 2px 15px;
}

.right-header {
  grid-column: 2;
  grid-row: 2;
}

.right-content {
  grid-column: 2;
  grid-row: 4;
  background-color: #FFFFFF;
  margin: 5px 10px 5px 10px;
}

.right-footer {
  grid-column: 2;
  grid-row: 6;
  margin-left: auto;
  margin-right: 10px;
}

h1 {
    font-family: bankprinter;
    font-size: 60px;
    letter-spacing: 3px;
    color: #B3BF6B;
    margin-top: 10px;
    margin-left: 30px;
}

h3 {
    font-family: bazaroni;
    letter-spacing: 2px;
    padding: 5px 20px;
    font-size: 26px;
    color: #0d74d6;
}

p {
  font-family: bluescreen;
  font-size: 14px;
  letter-spacing: 1px;
  padding: 0px 10px 5px 10px;
  color: #373d2a;
}

.latest {
  color: #e8f4ff;
}


.responsive-image {
  width: 100%; /* Image will take 100% width of its container */
  height: auto; /* Height adjusts automatically to maintain aspect ratio */
  max-width: 500px; /* Optional: Sets a maximum width for the image */
}