*{ outline: none;}
:root {
    --color-section-primary: #5A9CB5;
    --color-secondary: #FACE68;
    --color-accent: #FAAC68;
    --color-warm: #FA6868;
    --color-mnu: #FACE6811;
    --color-mnu-hover: #FACE6899;
    

    --color-alt-1:#443737;
    --color-alt-2:#272121;
    --color-alt-2b:#272121aa;
    --color-alt-3b:#27212144;
    --color-alt-4b:#27212111;
    --color-alt-3:#FF0000;
    --color-alt-4:#FF4D00AA;
} 
    *{
        padding:0;
        margin:0;
        font-family: "Arimo", sans-serif;
        -webkit-tap-highlight-color: transparent;
    }
    html{
        scroll-behavior: smooth;
        
    }
        .image-selections{
            max-width:290px;
        }

        #content{
            max-width:900px;
            margin:auto;
            padding:0;
            padding-top:100px;
            display:flex;
            flex-direction:column;
            gap:24px;
        }

        .preview{
            width:100vw;
        }

        body{
            padding:0;
            margin:0;
            padding-top:0px;
            padding-bottom:100px;
            margin-top:0;
        }

        .spacer{
            
            background-color: transparent;
        }

        .btn_go{
            padding:8px;
            width:120px;
            background-color:#F48F68;
            border:2px transparent;
            color:white;
        }

        .btn_go:hover{
            cursor:pointer;
            color:#ffffff;
            background-color:#698514;
            border:2px #F48F68;
        }

        .view_title, h4, h3{
            color:#F48F68;
            
        }
        .view_description{
            padding: 25px 25px 0 0;
        }
        #specifications, #feature{
            border:1px solid black;
            background-color: rgb(218, 218, 218);
        }

        #media{
            display:flex;
            justify-content: space-evenly;
        }

        #specifications{
            display:grid;
            grid-gap: 10px;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) );
            padding:10px;
        }

        .spec_attr {
            font-weight:bolder;
            color:#F48F68;
        }
        #km{
            width:100%;
        }
        #burger{
            max-width: 32px;
            visibility: hidden;
        }
        #burger:hover{
            cursor: pointer;
        }

        
        #banner{
            background: linear-gradient(0, var(--color-alt-4b), rgba(65, 126, 188, 0.5));
            margin-top:0;
            
            width:100%;
            padding:0;
            min-height: 40px;
            padding-bottom:14px;
            padding-top:14px;
            display:flex;
            flex-direction: column;
            z-index: 150;
        }
        #logo_img{
            margin:auto;
            max-height: max-content;
            padding:0;
           
        }
        #logo_img > img{
            max-width: 256px;
            
        }
        #menus{
            /*background: linear-gradient(0, var(--color-alt-3b), var(--color-alt-2), var(--color-alt-3b));*/
            background: linear-gradient(0, #5A9CB5, #7ab2f244);
            box-shadow: 0 0 15px 5px var(--color-alt-3b); 
            backdrop-filter:blur(4px);
            padding:0;
            
        }
        #menu{
            height:100%;
            width:max-content;
            padding-bottom:1rem;
            padding-top:1rem;
        }

        #menu_modal{
            background-color: rgba(47, 48, 64, 0.5); 
            display:flex;
            flex-direction: column;
            margin:auto;
            gap:1rem;
            padding:1rem;
            width:100%;
            backdrop-filter: blur(4px);
        }

        #menu_modal::backdrop {
            background-color: rgba(0, 0, 0, 0.5); 
            backdrop-filter: blur(4px);
        }

        .mnu_control{
            padding:1rem;
            background-color: var(--color-section-primary);
            color:white;
            font-weight: bolder;
            font-size:16px;
            border-radius: 10px;
            border:none;
        }

        .mnu_control:hover{
            background-color: white;
            color: var(--color-section-primary);
        }

        #menu2{
            
            text-align: center;
            display:flex;
            flex-direction: row;
            justify-content: space-around;
            padding:0;
           
        }

        .mnux{
            text-decoration: none;
            margin:4px;
            border:1px solid transparent;
            height:100%;
            color:var(--color-alt-4);
            font-weight: bolder;

        }
        .mnu{
            text-decoration: none;
            border:1px solid transparent;
            height:100%;
            color:var(--color-secondary);
            font-weight: bolder;
            padding:1rem;
        }
        .mnu:visited{
            text-decoration: none;
        }

        .mnu:hover{
            cursor: pointer;
            
            transition:500ms;
            corner-shape: bevel;
            border-radius:10px;
            color: var(--color-alt-4);
        }

        

        .mnu_2{
            text-decoration: none;
            margin:auto;
            border:1px solid transparent;
            height:100%;
            width:100%;
            color:white;
            font-weight: 400;
            font-weight:bolder;
            background: linear-gradient(90, var(--color-alt-4), var(--color-mnu-hover ));
        }

        .mnu_2:visited{
            text-decoration: none;
        }

        .mnu_2:hover{
            cursor: pointer;
            color: var(--color-alt-4);
            transition:500ms;
        }