/*Establish Body details*/
body {
    display: flex;
    justify-content: center;
    height: 100vh;
    background-color: #497D74;
    background-image: url("Assets/feesh64xbg.png");
    font-family: 'Comic Neue';
    /*zoom: 150%;*/
}
/*---------------------------------------------------------*/

/*Grid establishment*/
.container{
    display: inline-grid;
    grid-template-columns: repeat(8, 100px);
    grid-template-rows: repeat(7, 100px);
    grid-auto-rows: 100px;
    grid-auto-columns: 100px;
    grid-gap: 5px;
    grid-template-areas:
        'main main main main main item2 item2 item2'
        'main main main main main item2 item2 item2'
        'main main main main main item3 item3 item3'
        'main main main main main item3 item3 item3'
        'main main main main main item4 item4 item4'
        'main main main main main item4 item4 item4'
        'footer footer footer footer footer footer footer footer';
    text-align: center;
    padding-top: 2%;
}
.item{
    background-color: #27445D;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center; 
}
.item1 {
    grid-area: 1/1/7/6;
}
.item2 {
    grid-area: 1/6/3/9;
}
.item3 {
    grid-area: 3/6/5/9;
}
.item4 {
    grid-area: 5/6/7/9;
}
.item5 {
    grid-area: 7/1/7/9;
}
/*---------------------------------------------------------*/

/*Establish Content Divs*/
.leftContent{
    height: 610px;
    width: 505px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center; 
    background-color: #EFE9D5;
}
.trContent{
    height: 190px;
    width:295px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center; 
    background-color: #EFE9D5;
}
.mrContent{
    height: 190px;
    width: 295px;
    border-radius: 10px;
    
    display: flex;
    justify-content: center;
    align-items: center; 
    background-color: #EFE9D5;
}
.brContent{
    height: 190px;
    width: 295px;
    border-radius: 10px;

    display: flex;
    justify-content: center;
    align-items: center; 
    background-color: #EFE9D5;
}
.footer {
    height: 90px;
    width: 820px;
    border-radius: 11px;

    display: flex;
    justify-content: center;
    align-items: center; 
    background-color: #EFE9D5;
}
/*---------------------------------------------------------*/

/*Establish ACTUAL content*/
.leftContent-Content {
    height: 590px;
    width: 485px;
    border: 2px dashed #71BBB2;
    border-radius: 10px;
    overflow:scroll;

    text-align: center;
}
.trContent-Content {
    height: 170px;
    width: 275px;
    border: 2px dashed #71BBB2;
    border-radius: 10px;
    align-content: center;
}
.mrContent-Content {
    height: 170px;
    width: 275px;
    border: 2px dashed #71BBB2;
    border-radius: 10px;

    background-image: url("https://img1.picmix.com/output/stamp/normal/6/2/9/7/1807926_d2975.gif");
    background-size: 50% 50%;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
}
a:link, a:visited {
    display: block;
    width:100px;
    margin: 5px auto;
    border-radius: 10px;
    color: #EFE9D5;
    background-color: #ff6700;
    text-decoration: none;
}
a:hover, a:active {
    display: block;
    margin: 5px auto;
    border-radius: 10px;
    background-color: #ff9a00;
    text-decoration: none;
}
.brContent-Content {
    height: 170px;
    width: 275px;
    border: 2px dashed #71BBB2;
    border-radius: 10px;
}
.footer-Content{
    height: 90px;
    width: 820px;
    border-radius: 10px;
    background-image: url("Assets/tackleBox.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    
}
.footer-Content:active {
  animation-name: example;
  background-image: url("https://wiki.fishingplanet.com/images/c/c0/Longnose_Gar.png");
  background-size: contain;
  background-position: center;
}

.footer-Content > img {
    padding-top: 20px;
    padding-bottom: 20px;
}
/*---------------------------------------------------------*/

/*Paragraph styling*/
p {
    padding-left: 10px;
    padding-right: 10px;
}

/*Scroll bar test*/

  * {
    scrollbar-width: auto;
    scrollbar-color: #996244 #935732;
  }

/*Color palette: https://colorhunt.co/palette/27445d497d7471bbb2efe9d5 */