@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap');

:root{
    --main-brand-color: #d8ab4e;
    --primary-color: #040404;
    --secondary-color: #3f3f3f ;
    --light-secondary-color: #dcdcdc;
    --text-color: white;
    --secondary-text-color: #f5f5f5 ;

}

*{
    margin: 0;
    padding: 0;

}

html{
    scroll-behavior: smooth;
}

body{
    min-height: 100vh;
    background-color: var(--primary-color);
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    color: var(--text-color);
}
h1{
    font-size: 100px;
    line-height: 115%;
}
h3{
    font-size: 38px;
}
.subheading{
    margin-top: 25px;
    color: var(--secondary-text-color);
}

.nav_top{
    animation: bouncy 4s ease-in-out 0s 1 normal both;
}

@keyframes bouncy {
	0% 
    {
		animation-timing-function: ease-out;
		transform: scale(1);
		transform-origin: center center;
	}

	10% 
    {
		animation-timing-function: ease-in;
		transform: scale(1.5);
	}

	17% 
    {
		animation-timing-function: ease-out;
		transform: scale(2);
	}

	33% 
    {
		animation-timing-function: ease-in;
		transform: scale(3);
	}

	45% 
    {
		animation-timing-function: ease-out;
		transform: scale(1);
	}
}


@media(max-width:800px){
    h1{
        font-size: 12vw;
        text-align: center;
    }
    .subheading{
        text-align: center;
    }
    body{
        font-size: 16px;
    }
}