:root {
    --mainfont: 'Roboto', sans-serif;
    --blue:#4C6A72;
    --grey:#F1F1F2;
    --darkgrey:#808181;
    
    }
    
    html {
        height: 100%;
        margin:0px;
        overflow-x:hidden;
        width: 100%;

        box-sizing: border-box;
       }
       html:focus-within {
        scroll-behavior: smooth;
       }
       *,
       *::before,
       *::after {
        box-sizing: inherit;
       }
        
        

    
    
    body {
        height: 100%;
        background-color: #FFFFFF;
        width: 100%;
        margin:0;
        width: 100%;
        overflow-x:hidden;
        align-items: center
        
        
    
    
    }
    
    
    nav {
        width: 100%;
        display:flex;
        flex-direction: column;
       
    }
    
    .navbar {
        display: flex;
        width: 100%;
        
    }
    
    .navicons {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        
    }
    
    li {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        
    
    }
    
    
    
    
    
    
    
    
    
    
    header img {
       width: 100px;
       
    
    
      
    
            
    }
    
    header {
        background-color:var(--grey)
        
        
          
        
    }
    
    
    
    .navlogo {
        display: flex;
        justify-content: center;
        flex-direction: row;
        margin-top: 40px;
        
        
    
    }
    
    .navtext{
        display: flex;
        flex-direction: row;
        gap: 30px;
        list-style: none;
        text-decoration: none;
        font-family: roboto;
        width: 100%;
        
        
        
    }
    
    a{
        text-decoration: none;
    }
    
    
    a:hover {
        text-decoration: underline;
        background-position-x: left;
        
    }
    
    a:visited {
        text-decoration: none;
        color:#4C6A72;
    }

    .cartsection {
        border: solid 1px #000000;
        width: 350px;
        margin:15px;
        padding:10px;
        border-radius: 10px;
       


    }

    .jacketcart {
        width: 100px;
    }

   
       

    
    
    .form {
        overflow-x: hidden;
        gap:10px;
        display:grid;
        grid-template-areas:
        "contactus contactus"
        "firstname lastname"
        "email myphonenumber"
        "myadress myadress"
        "mycity myzipcode"
        "myconfirm mycancel";
        
        grid-template-columns: 1fr 1fr;
        grid-template-rows:  1fr;
        
        border: solid 1px black;
        
        
        border-radius: 10px;
        margin:15px;
        padding: 10px 10px 70px 10px;
        width: 350px;
        gap:20px;

        
        
        
        
    
    }
    
    .lastname {
        grid-area:lastname;
        padding: 8px;
        border-radius: 5px;
        border: 1px solid black;
        
    }
    
    .firstname {
        grid-area:firstname;
        padding: 8px;
        border-radius: 5px;
        border: 1px solid black;
        
    
    }
    
    .email {
        grid-area:email;
        padding: 8px;
        border-radius: 2px;
        border: 1px solid black;
        
    }

    .phonenumber {
        grid-area:myphonenumber;
        padding: 8px;
        border: 1px solid black;
    }
    
    .contactus{
        grid-area:contactus;
        padding: 8px;
        
        
    
    }
    
   
    
    .confirm_now {
    grid-area: myconfirm;
    padding: 8px;
    border-radius: 5px;
    border: 1px solid black;
    background-color: var(--blue);
    
    }

    .cancel {
        grid-area: mycancel;
        padding: 8px;
        border-radius: 5px;
        border: 1px solid black;
        
        }

    .adress_form {
        grid-area:myadress;
        padding: 8px;
        border: 1px solid black;
    }

    .city {
        grid-area: mycity;
        padding: 8px;
        border: 1px solid black;

    }
    
    .zipcode {
        grid-area: myzipcode;
        padding: 8px;
        border: 1px solid black;
    }


    .cart_form {
        display:grid;
        grid-template-areas:
        "mycardinfo mycardinfo"
        "mycard_number mycard_number"
        "mymonth_year mycvc"
        "mynameoncard mynameoncard"
        "myname_card myname_card"
        "mypay mypay";
        grid-template-columns: 1fr 1fr;
        grid-template-rows:  1fr;
        
        border: solid 1px black;
        
        
        border-radius: 10px;
        margin:15px;
        padding: 10px 10px 70px 10px;
        width: 350px;
        gap:10px;
        
    
    }
    
    .cardinfo{
        grid-area:mycardinfo;
    }

    .card_number {
        grid-area: mycard_number;
        padding: 8px;
        border: 1px solid black;
    }

    .month_year {
        grid-area:mymonth_year;
        padding: 8px;
        border: 1px solid black;
        gap:20px;
    }

    .cvc {
        grid-area: mycvc;
        padding: 8px;
        border: 1px solid black;
    }

    .nameoncard {
        grid-area: mynameoncard;

        
    }

    .name_card {
        grid-area:myname_card;
        padding: 8px;
        border: 1px solid black;
    }

    .pay-link {
        grid-area: mypay;
        padding: 8px;
        background: var(--blue);
        border:none;
        
    }

    .pay-button {
        background: none;
        border:none;
        
    }