/* As for the CSS, the width is something I'm pretty concerned and unskilled about widths and lengths and placement
Today I'm just going to style the head and main divs bcause those matter for now. */
body {background-color: black;
           margin: 0;
           padding: 0; 
 }
.grid-container {
  margin: auto 0;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto auto;
  gap: 12px 15px;
  place-items: center;
}

.header { background-color: #080847 ;
                border: solid 3px blue; 
                font: 1.25em  "Eurostile", Sans-Serif ;
                border-radius: 0px;
                color: white;
                width: 95%; 
                display: flex;
                margin: 0 auto;
                position: relative;        
                padding: 5px;}

.main { background-color: #080847;
                border: solid 3px blue; 
                font: 1.24em "Eurostile", Sans-Serif ;
                border-radius: 10px; 
                color: rgb(255, 255, 255);
                width: 95%;
                align-self: start;
                margin: 0 auto;
                padding: 10px;
                position:relative; 
                grid-column: 2; grid-row: 1 / -1;}
.p  { margin: 0 auto; 
      padding: 10px; 
      color: white;
      font: 20px "Eurostile", Sans-Serif; 
      margin-left: auto; 
      width: 95%; }
.image {border: solid 2px white; 
        position: relative;}
iframe { width: 99.25%}

@font-face {
    font-family: Eurostile;
    src: url("/ITW/eurostile.TTF");
}

.navigation {
  list-style: none;         
  padding: 0;
  margin: 0;
  display: flex;             
  gap: 10px
  width: 95%;                  
}

.navigation li {
  margin: 0;
}

.navigation a {
  display: block;
  padding: 12px 24px;       
  background-color: #000;  
  color: white;
  text-decoration: none;
  border-radius: 8px;        
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.navigation a:hover {
  background-color: #010163;  /* Darker on hover */
}

.navigation a:active {
  background-color: #00c;} 

  
.navigtion {
  list-style: none;           /* Remove default bullets */
  padding: 0;
  margin: 0;
  gap: 10px;                  /* Space between buttons */
}
.navigtion li {
  margin: 0;
}

.navigtion a {
  display: block;
  padding: 12px 24px;         /* Internal spacing */
  background-color: #000;  /* Button color */
  color: white;
  text-decoration: none;
  border-radius: 8px;         /* Rounded corners */
  border: solid 2px blue;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.navigtion a:hover {
  background-color: #010163;  /* Darker on hover */
}

.navigtion a:active {
  background-color: #00c;} 



  .right-top { background-color: #080847;
                border: solid 3px blue; 
                font: 18px "Eurostile", Sans-Serif ;
                border-radius: 10px; 
                color: rgb(255, 255, 255);
                width: 80%;
                 margin-left: auto;
                 margin-right: 10px;
                 position: relative;
                grid-column: 3; grid-row: 1; 
                align-self: start;         
                justify-self: left;
              }

  
  .right-bot{ background-color: #080847;
                border: solid 3px blue; 
                font: 18px "Eurostile", Sans-Serif ;
                border-radius: 10px; 
                color: rgb(255, 255, 255);
                width: 80%;
                 margin-left: auto;
                 margin-right: 30px;
                 position: relative;
                grid-column: 3; grid-row: 2;
                align-self: start; 
               }
               
            
  .left-top{background-color: #080847;
                border: solid 3px blue; 
                font: 18px "Eurostile", Sans-Serif ;
                border-radius: 10px; 
                color: rgb(255, 255, 255);
                width: 80%;
                margin-left: 10px;
                position: relative;
                grid-column: 1; grid-row: 1;
                align-self: start;
              }
  .left-bot {background-color: #080847;
                border: solid 3px blue; 
                font: 18px "Eurostile", Sans-Serif ;
                border-radius: 10px; 
                color: rgb(255, 255, 255);
                 width: 80%;
                margin-left: 10px; 
                position: relative;
              grid-column: 1; grid-row: 2;
              align-self: start;   
            }

@media () {

}