@charset "utf-8";
/* CSS Document */

/* Element Style */
        
        body{
        padding:0px; margin:0px; 
        background-color:#151515; 
        font-family:arial;
        color:gray;
        }
        
        h1{
        font-size:14px;
        }
        
        p{
        font-size:11px; 
        margin:11px 0px; 
        line-height:18px;
        }
        
        ul{
        margin:11px 0px; padding:0px;
        }
            li{
            font-size:11px; 
            line-height:18px;
            list-style-type:none;
            }
        
        a{
        color:#ff0072;
        text-decoration:none;
        }
            a:hover{color:pink;}
                
        input[type=text] {
          border:none;
          border-radius:4px;
          padding:10px;
          margin-right:10px;
        }

        input[type=button] {
          border:none;
          border-radius:4px;
          padding:10px;
          background-color:#ff0072;
          color:#fff;
          cursor:pointer;
        }input[type=button]:hover{color:black;}
        
        /* Layout Style */
        
        .layout{
        display:flex;
        flex-direction:column;
        align-items:center;
        }
        
            .header, .fma, .footer{padding:20px;}
                        
            .header{
            display:flex;
            align-items:center;
            max-width:1200px;
            }
            
                .accountnav{
                display:flex;
                flex-direction:row;
                align-items:center;
                gap:10px;
                }
                    .accountnav span{
                    font-weight:bold;
                    color:#f5f5f5 ;
                    }

                    .accountnav a{
                    display:inline-block;
                    padding:5px 15px;
                    border-radius:5px;
                    background-color: rgba(66,66,66,.5);
                    }
            
            .fma{
            height:50vh;
            display:flex; 
            flex-direction:column;
            align-items:center;
            justify-content: center;
            align-self:stretch;
            gap:20px;
            background-image:url("images/banner-fast6.jpg");
            background-position:top;
            background-attachment:fixed;
            background-size:cover;
            position:relative; z-index:1;
            }
            
                .fmaoverlay {
                background-color:rgba(20, 20, 20, 0.9);
                position:absolute;z-index:2;
                top:0;
                left:0;
                width:100%;
                height:100%;
                }
        
                .logo{
                position:relative; z-index:3;
                }
                
                nav{
                text-align:center;
                position:relative; z-index:3;
                }

                    nav a{
                    color:#fff;
                    }

                    nav a.active{
                    color:#ff0072; 
                    text-decoration:underline;
                    }

                    nav .abcs{
                    line-height:25px;
                    margin-top:20px;
                    }

                .search{position:relative; z-index:3;}
        
            .container{
            display:flex;
            max-width:1143px; /* WHY? */
            margin-top:10px;
            }  
        
                .main{
                margin:15px;
                display:flex;
                flex-direction:row;
                flex-wrap:wrap;
                flex:1 1 auto;
                gap:10px;
                }

                    .item{
                    display:flex;
                    flex-direction:column;
                    align-items:center;
                    align-self:stretch;
                    flex:1 0 160px;
                    border-radius:10px;
                    padding:10px 5px;
                    background-color: rgba(66,66,66,.5);
                    position:relative;
                    cursor: pointer;
                    
                    }
                    
                        .item:hover{
                        box-shadow: 
                        inset 10px 24px 40px 0px #151515, 
                        inset -10px -24px 40px 0px #151515, 
                        inset 20px -10px 40px 0px #151515, 
                        inset -20px 10px 40px 0px #151515;
                        }
                    
                        .item img{
                        max-width:160px;
                        margin-bottom:10px;
                        -webkit-transition-property:all;
                        -webkit-transition-duration:0.3s;
                        -webkit-transition-timing-function:ease;
                        }
                        
                        .item:hover img{transform: scale(1.04);}
                        
                        .item-detail{
                        max-width:160px;
                        text-align:center;
                        }
                            .item-title{font-size:13px; color:#f5f5f5;}
                            .item-nav{font-size:10px;}
        
            .footer{
            display:flex; 
            justify-content:center; 
            align-content:center;
            gap:50px;
            max-width:1200px;
            }
                .footer div{
                flex:1 1 33%;
                }
                
                .footer h1{
                color:#f5f5f5;
                }
                    
            /* Media Queries */
            
            @media only screen and (max-width:675px){
            
                .header, .footer{
                flex-direction:column;
                justify-content:center;
                }
                
                .header{
                text-align:center; 
                align-items:center;
                }
                
                    .logo{
                    margin-bottom:20px;
                    }
                    
                    .accountnav{
                    flex-direction:column;
                    text-align:center;
                    }

                nav{
                text-align:center;
                }
                
                    .search{
                    margin-top:20px;
                    }
                
                .container{
                flex-direction:column-reverse;
                }
                
                    .item{
                    flex:1 0 50px;
                    border-radius:5px;
                    padding:10px 5px;
                    }

                        .item img{max-width:75px;}
                        
                            .item-title{font-size:10px;}

                    .aside{flex:0 0 auto;}
                
                .footer{
                display:block;
                }
                    
                    .footer-about,
                    .footer-contact,
                    .footer-account{
                    displayt:block;
                    text-align:center;
                    }
                    
                    .footer-content-type,
                    .footer-content-category{
                    display:none;
                    }
                
            }