/*  
* NWTF Website
*
* Home Webpage
*
* Authors: Ryan Griffin and Eric Edwards
*
* Date: 11/19/2021
*/

/* Creates the grid for the index page. Sets up a 2 by 2 grid which has 3 boxes contained within it, 1 box taking up 2 spaces and the other 2 boxes taking up 1 space each. */

body {
  overflow-y: scroll;
}

.grid {
    display: grid;
    grid-template-columns: 2.25fr 2fr;
    grid-template-rows: 2fr 1.25fr;
    gap: 2vh 2vh;
    margin: 2vh;
    grid-template-areas:
      "News Events"
      "News Sponsors";
      height: auto;
  }

  /* Creates a blurring effect on the boxes within the grid and adds color and shadow. We also apply a radius and padding. */
  .grid div {
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.3);
    border-radius: 10px;
    padding: clamp(1%, 2%, 3%);
  }
  
  /* The News Section for the grid, sets the alignment and size of the Iframe. */
  .News {
    grid-area: News;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .News iframe {
    width: 50vw;
    height: 65vh;
    border-radius: 10px;
  }
  
   /* The Events Section for the grid, sets the alignment and size of the Iframe. */
  .Events {
    grid-area: Events;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .Events iframe {
    width: 45vw;
    height: 38vh;
    border-radius: 10px
  }
  
   /* The Sponsors Section for the grid, sets the alignment and size of the Iframe. */
  .Sponsors {
    grid-area: Sponsors;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .Sponsors iframe {
    width: 45vw; 
    height: 20vh;
    border-radius: 4px
  }

  /* Media Query for a specific size on the index page so the grid is organized in a 1 by 3 grid, creating a verticle effect. All the other pages use the query's in main style for their mobile optimization, Index is the only page that needed a special case. When messing with mobile sizing, check this query to ensure there are no bugs. */

@media only screen and (max-width: 900px) {
	.grid {
		grid-template-columns: auto;
		grid-template-areas: 
			"News"
			"Events"
			"Sponsors";
    gap: 1vh 1vh;
    margin: 0 1vh;
    height: auto;
    overflow: hidden;
	}

  .News iframe {
    width: 90vw;
    overflow: hidden;
  }

  .Events iframe {
    width: 90vw;
  }

  .Sponsors iframe {
    width: 90vw;
  }
}