html {
    scroll-behavior: smooth;
}

body{
    height: 100vh;
    margin: 0px;
    
    header{

        background: rgba(0, 0, 0, 0.9);
        box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.5);
        padding-left: 5%;
        padding-right: 5%;
        top: 0;
        
        position: fixed;
        width: -webkit-fill-available;
        z-index: 99;

        h1, h2, p, a{
            color: white;
            font-family: 'Audiowide';
        }

        
        .navbar{
            width: 100%;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: black;
            
        }

        li{
            list-style: none;
        }

        
        a{
            text-decoration: none;
            color: white;
            font-size: 1.3rem;
        }

        a:hover{
            color: white(67, 189, 255);
            text-decoration: underline;

        }
        
        .fb{
            color: white(67, 189, 255);
        }

        .fb:hover{
            color: rgb(4, 4, 187);
        }

        .ig:hover{
            color: rgb(215, 19, 229);
        }

        
        .logo{
            background-image: url("assets/gsdev-transparent-white.svg");

            background-size: cover;
            height: 40px;
            width: 200px;
        }
        

        .logo a{
            color: white;
            font-size: 2rem;
            font-weight: bold;
        }

        .links{
            display: flex;
            gap: 2rem;
        }

        .toggle_btn{
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
            display: none;
        }

        .action_btn{
            text-align: center;
            background-color: white;
            color: black;
            padding: 0.5rem 1rem;
            border: none;
            outline: none;
            border-radius: 0.8rem;
            font-size: 1rem;
            font-weight: bolder;
            cursor: pointer;
            transition: scale 0.2 ease;
        }

        .action_btn:hover{
            scale: 1.05;
        }

        .action_btn:active{
            scale: 0.95;
        }

        .dropdown{
            display: none;
        }

        /* RESPONSIVE */
        @media (max-width: 992px) {
            .navbar .links,
            .navbar .action_btn {
                display: none;
            }

            .navbar .toggle_btn{
                display: block;
            }

            .dropdown{
                display: block;
            }
            
        }


        .dropdown{

            position: absolute;
            right: 2rem;
            top: 60px;
            height: 0;
            width: 300px;
            background: rgba(0,0,0,0.9);
            border-radius: 20px;
            overflow: hidden;
            transition: height 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);

            li{
                padding: 0.7rem;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .social{
                justify-content: space-evenly;

                a{
                    i{
                        font-size: 2rem;
                    }
                }
            }

            .action_btn{
                width: 180px;
                display: flex;
                justify-content: center;
            }
        }

        .dropdown.open{
            height: 300px;
        }

        @media (max-width: 992px) {
            .dropdown{
                left: 2rem;
                width: unset;
            }
            
            a{
                font-size: 1.2rem;
            }
            
        }

    }
}