:root {
    background-color: #283739;
    /* #2c5d63 for hover gradient */
    --header: #f5f5f5;
    --text: #a9c52f;
    --Image: #D82B2B;
}

header h1{
    display: flex;
    justify-content: center;
    font-size: 50px;
    color: var(--header);
}

header nav {
  display: flex;
  justify-content: flex-end;
  font-size: 30px;
  color: var(--text);
}

header nav a {
  padding: 10px;
  color: var(--text);
}

:root a:visited{
    color: black;
}

.Photo {
  display: flex;
  justify-content: center;
}

h2 {
    display: flex;
     justify-content: center;
     font-size: 40px;
     color: var(--header);
}

.About p{
    display: flex;
    text-wrap: wrap;
    justify-content: center;
    text-align: center;
    font-size: 30px;
    color: var(--text);
}

.Work nav{
    padding: 10px;
}

.Banner{
    /* display: flex;
    float: left; */
    width: 100%;
    color: var(--text);
    text-align: center;
}

.Banner a{
    color: var(--Image);
    font-size: 50px;
}

.Grid {
    display: flex;
    flex-direction: column;
    float: left;
    width:32.50%;
    color: var(--text);
    text-align: center;
}

.Grid a{
    color: var(--Image);
    font-size: 50px;
}

.Horiseon{
    background-image: url(./img/Horiseon.PNG);
    height: 800px;
    width: auto;
    object-fit: contain;
}

.Prework{
    background-image: url(./img/Prework.PNG);
    height: 800px;
    width: auto;
    object-fit: contain;
}

.Ticket{
    background-image: url(./img/Ticket.PNG);
    height: 800px;
    width: auto;
    object-fit: fill;
}

h3{
    text-align: center;
    font-size: 40px;
    color: var(--header);
}

.Contact a{
    color: var(--text);
    font-size: 40px;
    display: flex;
    justify-content: center;
    padding: 10px;
}

@media only screen and (max-width: 992px) {
    header{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .Photo{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }
    .Grid {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
}