*, *::before, *::after {
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

:root {
margin: 0;
padding: 0;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;;


}

body {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
margin: 0 auto;
font-size: 1.2rem;
max-width: 1000px;
}


.header {
background-color: hsla(183, 100%, 35%, 1);
background-image: url(./assets/home/background1.jpg);
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
min-height: 350px;
height: 40vh;
max-width: 1100px;
margin: 0 auto;
}

.title {
  padding: 8rem 0rem 0rem 4rem;
  margin: 0 auto;
  color: #fff;
  text-align: center;
  font-size: 48px;
}
.nav-toggle {
display: flex;
position: absolute;
left: 8rem;
top: 6rem;
width: 2.2rem;
height: 2.2rem;
border-radius: 10px;
background-color: rgb(250, 244, 244);
}

.nav-img {
padding: .2rem;
align-self: center;
margin: 0 auto;

}

.nav {
width: 100%;
margin: 0 auto;
background-color: rgb(182, 0, 0);
display: flex;
position: relative;
}

.nav__list {

  font-size: 1rem;
}

.nav-hidden {
  display: none;
}

.visible {
  display: block;
}

.hidden {
  display: none;
}
.nav-mobile {
display: flex;
flex-direction: column;
list-style: none;
gap: 2px;
position: absolute;
top: 7rem;
padding: 0;
left: 1rem;
}

.nav__item {
padding: .4rem;
background-color: rgb(45, 156, 110);
opacity: .9;
text-align: center;
width: auto;
}

.nav__link {
text-decoration: none;
color: #fff;
font-weight: 200;
letter-spacing: .1rem;
}

.flex-col {
display: flex;
flex-direction: column;
}



.container {
width: 95%;
margin: 20px auto;
}

.main-grid {
  display: grid;
  grid-template-columns: 4;
  grid-template-rows: 4;
  background-color: #fff;
  min-height: 300px;
  -webkit-text-stroke: .5px black;
  gap: 10px;
  
}

.main-grid h2 {
margin-top: 4rem;
justify-self: center;
  font-weight: 900;
  text-decoration: none;
}

.main-grid a {
min-width: 100px;
min-height:25vh ;
    text-decoration: none;
  }
  


.main-one {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
background-color: red;
color: #fff;
 text-align: center;
  background-image: url(./assets/home/Ali-Logo1.jpg);
  background-position: center; 
background-repeat: no-repeat;
background-size: cover; 
min-height: 25vh;
}

.main-two {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
  background-color: yellow;
  color: #fff;
 text-align: center;
  background-image: url(./assets/home/steve-fish1.jpg);
  background-position: center; 
background-repeat: no-repeat;
background-size: cover; 
min-height: 25vh;

}

.main-three {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
  background-color: black;
  color: #fff;
 text-align: center;
  background-image: url(./assets/home/ed-game1.jpg);
  background-position: center; 
background-repeat: no-repeat;
background-size: cover; 
min-height: 25vh;
}

.main-four {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  background-color: blue;
  color: #fff;
  text-align: center;
   background-image: url(./assets/home/Ali-shed-small.jpg);
   background-position: center; 
 background-repeat: no-repeat;
 background-size: cover; 
 min-height: 25vh;

}

.main-one:hover, .main-two:hover,
.main-three:hover, .main-four:hover,
.main-one:focus-visible, .main-two:focus-visible,
.main-three:focus-visible, .main-four:focus-visible
{
opacity: .75;
background-color: rgb(208, 211, 210);
}

.nav-img:hover,
.nav__item:hover,
.nav__item:focus-visible,
.nav-toggle:hover,
.nav-toggle:focus-visible 
{
opacity: .75;
background-color: aquamarine;
}



@media screen and (min-width: 800px) {

  .nav {
    width: 100%;
    margin: 0 auto;
    background-color: rgb(182, 0, 0);
    display: flex;
    position: fixed;
    }

     .nav-img {
     display: none;
    
      }

.nav-toggle {
  display: none;
}

.nav-hidden {
  display: flex;
 flex-direction: row;
  list-style: none;
  gap: 2px;
  position: absolute;
  top: 0;
  padding: 0;
  left: 0.5rem;
}
.nav__item {
  padding: .4rem;
  background-color: rgb(100, 223, 169);
  opacity: .9;
  min-width: 12rem;
  text-align: center;
  font-size: 1.2rem;
  
  }


}