/* HEADER */
    header{
        background-color: var(--clr-slate800);
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;   
        border-bottom: 2px solid var(--clr-interaction);
        height: 60px;
        /* min-width: 500px; */
        width: 100vw;

    }
 
/*Nav*/
    header nav{
        padding: 10px 30px;
        display: flex;
        justify-content: space-between;
        align-items: first baseline;
        width: 100%;
        
    }
    /*Title*/
        .nav-main__title-container{
            text-wrap: nowrap;
            margin: 0;
        }
        h1{
            /* text-align: center; */
            font-size: var(--size-3xl);
            color: var(--clr-info);
            text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.493);
        }
        /* h1::after{
            content: '';
            background-color:#ff0000;
            position: absolute;
            display: block;
            width: 7px;
            height: 7px;
            border-radius: 50px;
            top: 20px;
            left:-12px;
            box-sizing: border-box;
            box-shadow: 0px 0px 8px rgb(255, 0, 0);
        } */
        /* Makes a bigger "C" in the h1 */
        .c{
            font-size: larger;
        }
        /* .o{
            color: rgb(182, 7, 7);
        } */
        .icon{
            color: var(--clr-info);
            font-weight: bold;
            cursor: default;
        }
    /* <ul> */
        .nav-main__menu{
            display: none;
            justify-content: left;
            gap: 30px;
            padding: 10px 40px;
        
        }
        
        .nav-main__menu a{
            font-size: var(--size-sm);
        }
        
    /* </ul> */
    /* burger <ul> */
    .burger-button i{
        font-size: 22px;
        cursor: pointer;
    }
    .burger-button i:hover{
        transform: scale(1.05);
    }
    .burger-menu__container{
        position: absolute;
        background-color:#212d41cb;
        backdrop-filter: blur(5px);
        height: 0px;
        width: 200px;
        top: 60px;
        right: 30px;
        border-radius: 5px;
        padding: 10px;
        z-index: 1;

        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        border-bottom: 2px solid var(--clr-interaction);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        
    }
    .burger-menu__container.open{
       display: flex;
       height: 200px;
    }
     /* div */
    .burger-menu{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: first baseline;

    }
    .burger-menu ul{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .burger-menu a{
        font-size: var(--size-base);
    }
    .burger-menu a:hover,.nav-main__menu a:hover{
        cursor: pointer;
        color:var(--clr-light);
        transition: 0.25s;
    }
    .space-bar{
        width: 100px;
        background-color: var(--clr-slate400);
        height: 1px;
        
    }
   
   
/*Currency choice*/
    .nav__currency{
        display: flex;
        justify-content: right;
    }
    .nav__currency__container{
        margin-right: 40px;
    }
    #nav__currency-choice{
        border-radius: 5px;
        background-color: var(--clr-slate800);
        color: var( --clr-options);
        border: 1px solid var(--clr-slate400);
        outline:none;
    }
    .nav__currency-label{
        font-style: italic;
        font-size:  var( --size-sm	);
        text-transform: lowercase;
        color: var(--clr-slate400);
        display: none;
    }

/* xs */
@media(min-width :475px){
    h1{
        /* text-align: center; */
        font-size: var(--size-3xl);
        
    }
}
/* s */
@media(min-width :640px){
    header{
        height: 80px;
    }
}
    /* m */
    @media(min-width :768px){
        h1{
            /* text-align: center; */
            font-size: var(--size-3xl);
            
        }
        header{
            height: 90px;
        }
        .nav-main__menu{
            display: flex;
        }
        .burger-button{
            display: none;
        }
        header nav{
            justify-content: space-between;
            padding: 10px 50px;
        }
        .nav-main__menu a{
            font-size: var(--size-lg);
        }
        #nav__currency-choice{
            font-size: var(--size-sm);
        }
        body{
            font-size: var(--size-lg);
        }
    }
/* l */
@media(min-width :1024px){
    header{
        height: 120px;
    }
    h1{
        font-size: var(--size-4xl);
    }
    .nav-main__menu a{
        font-size: 18px;
    }
    .nav-main__menu {
        gap: 50px;
    }
    #nav__currency-choice{
        font-size: 16px;
    }
    body{
        font-size: var(--size-lg);
    }
}
/* xl */
@media(min-width :1280px){
    header nav{
        padding: 10px 100px;
    }

    .nav-main__menu {
        gap: 80px;
    }
  
    body{
        font-size: var(--size-xl);
    }
}
/* 2xl */
 @media(min-width :1536px){
    header nav{
        padding: 10px 160px;
    }
}