/* #FFDBDA #911229 #6A66A3 #FFF6C2 #1E1E24 */



body,
html {
height: 100%;
}

body {
font-family: sans-serif;
font-size: 1em; 
background-image: url(images/merchbg.png);
background-size:cover;
background-repeat:no-repeat;
background-attachment: fixed;
margin:0;
}

                        
.containermerch {
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-areas:
        "navbar navbar navbar"
        "main main main";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 100px 1fr;
    margin-bottom: -200px;
}

                        
                img {
                        float: right;
                        height: 150px;
                        width: 150px;
                        margin-right: 133px;
                        margin-top: -169px;
                         margin-bottom: 23px;
                }       
                               



                            .mt {color:#911229;
                                float:left;
                                font-family: "panel-sans", sans-serif;
                                font-weight: 800;
                                font-style: normal;
                                font-size: 15px;
                                margin-top: 261px;
                                margin-left: 48px;
 
                                }

                                .main_grid {
                                    display: grid;
                                    width: 100%;
                                    height: 100%;
                                    grid-template-areas:
                                        "m1 m2 m3"
                                        "m4 m5 m6"
                                        "footer footer footer";
                                    grid-template-columns: 1fr 1fr 1fr;
                                    grid-template-rows: 1fr 1fr 20px;
                                    gap: 20px;
                                    margin:0;
                                }

                                

                                    .m1 {
                                        grid-area:m1;
                                        background-image:url(images/yellowmoon.png);
                                        background-repeat:no-repeat;
                                        background-position:center;
                                    height:300px;
                                width:300px;
                            margin-left:125px;
                            background-color: rgb(0, 0, 0, 0.5);}

                            .m2 {
                                grid-area:m2;
                                background-image:url(images/yellowmoon.png);
                                background-repeat:no-repeat;
                                background-position:center;
                            height:300px;
                        width:300px;
                    margin-left:100px;
                    background-color: rgb(0, 0, 0, 0.5);}


                                .m3 {grid-area:m3;   
                                    background-image:url(images/yellowmoon.png);
                                    background-repeat:no-repeat;
                                    background-position:center;
                                    height:300px;
                                    width:300px;
                                    margin-left:75px;
                                    background-color: rgb(0, 0, 0, 0.5);
                                }
                                
                                .m4 {grid-area:m4;
                                    background-image:url(images/yellowmoon.png);
                                    background-repeat:no-repeat;
                                    background-position:center;
                                    height:300px;
                                    width:300px;
                                    margin-left:125px;
                                    background-color: rgb(0, 0, 0, 0.5);
                                }

                                .m5 {grid-area:m5;
                                    background-image:url(images/yellowmoon.png);
                                    background-repeat:no-repeat;
                                    background-position:center;
                                    height:300px;
                                    width:300px;
                                    margin-left:100px;
                                    background-color: rgb(0, 0, 0, 0.5);
                                }

                                .m6 {grid-area:m6;
                                    background-image:url(images/yellowmoon.png);
                                    background-repeat:no-repeat;
                                    background-position:center;
                                    height:300px;
                                    width:300px;
                                    margin-left:75px;
                                    background-color: rgb(0, 0, 0, 0.5);}






                                    .navbar {
                                        grid-area: navbar;
                                        background-image: linear-gradient(0deg, #6A66A3, #FFDBDA);
                                        height:100px;
                                        grid-gap:20px;
                                        display:flex;
                                       padding-right:30px;
                                        justify-content:right;
                                        text-wrap:balance;
                                        font-family: "rhythm-two-solid", sans-serif;
                                        font-weight: 400;
                                        font-style: normal;
                                        font-size:40px;
                                        align-items:flex-end;
                                        
                            
                                        }

                                            .logo {
                                                display: flex;
                                                height:100px;
                                                width:300px;
                                                justify-content:left;
                                                background-image:url(images/mmlogo.png);
                                                margin-right:500px;
                                                }

            a:link {
                color: #6A66A3;
                text-decoration:none;
              }
            
              
               a:visited {
                color: #6A66A3;
               
              }
            
             
             a:hover {
                color: #FFDBDA ;
                border-bottom: 5px solid #911229;}
            
            
            
            .left {
            grid-area: left;
            display:flex;
            justify-content:left;}
            

            .mainmerch {
                grid-area: main;
                height:250px;
                width:250px;
                margin-left:550px;
                margin-bottom:100px;
               }

            .right {
            grid-area: right;
            display:flex;
            justify-content: right;
       
            }
            
            .footer {
            grid-area:footer;
            background-color:#FFDBDA;
            height:20px;
            opacity:80%;
            }

            .pinkmoon {background-position:center;
                text-align: center;
                font-family: "rhythm-two-solid", sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size:75px;
                color: #1E1E24;
            background-image:url(images/pinkmoon.png);
        background-repeat:no-repeat;
    height:283px;
width:300px;
margin-top:50px;
margin-left: 75px;}

.pt {text-align:center;
    font-family: "rhythm-two-solid", sans-serif;
font-weight: 400;
font-style: normal;
font-size:75px;
margin-top:-200px;
margin-left:110px;
margin-bottom:100px;}

.p {font-family: "panel-sans", sans-serif;
    font-weight: 400;
    font-style: normal;
color:#1E1E24;}

.yellowmoon {background-position:center;
background-image:url(images/yellowmoon.png);
background-repeat:no-repeat;
height:283px;
width:300px;}