* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

.header {
    width: 96%;
    background-color: #1e1c25;
    border-radius: 25px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: .5em;
    
    /* box-shadow: #1e1c25 0 3px 10px 2px; */
    margin: 2%;
}

#logo {
    width: 60px;
    margin: 0;
}

.column {
    padding: 0 6%;
}

.column:nth-child(1) {
    display: flex;
    flex-direction: row;
    align-items: center;

    & li {
        list-style-type: none;
        padding: 0 2vw;
        transition: .7s all;
        color: white;

        & a {
            text-decoration: none;
            color: white;
        }

        &:hover {
            transform: scale(1.1);
            text-decoration: underline;
            transition: .7s all;
        }
    }
}

.column:nth-child(2) {
    & button {
        color: white;
        background: linear-gradient(to right, #FF7528, #FF9500);
        padding: .5em 4.5em;
        border-radius: 50px 30px 30px 10px;
        border: none;
        transition: all .7s;
        position: relative;
        &::after {
            content: '';
            width: 10px;
            height: 10px;
            background: white;
            position: absolute;
            top: 20%;
            right: 0;
            transform: translateY(-50%) rotate(45deg);
            border-radius: 2px;
            transition: all .2s;
        }
        &:hover {
            cursor: pointer;
            transform: scale(1.1);
            transition: all .2s;
        }
    
    }
}

@media (max-width: 1000px) {

    .column {
        padding: 0;
    }
}

@media (max-width: 668px) {
    .header {
        flex-direction: column; 
    }

    .column {
        padding: 0 1%; 
    }

    .column:nth-child(2) li {
        padding: 0 2vw;
    }

    .column:nth-child(3) button {
        width: 100%;
    }
}