@charset "utf-8";

@font-face {
  font-family: 'Comfortaa';
  src: url('../fonts/Comfortaa-VariableFont_wght.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@keyframes icon-float{
	0% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-5px);
	}
	100% {
		transform: translateY(0px);
	}
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: #111;
}

.navbar-per{
    background-color: transparent;
    transition: background-color 0.5s ease;
}

.scrolled{
    background-color: rgb(86, 84, 80);
}

.offcanvas-title{
    font-weight: bold;
	font-family: 'Comfortaa', sans-serif;
}

.nav-link{ 
    font-weight: bold;
	font-family: 'Comfortaa', sans-serif;
    padding: 5px;
    transition: background-color 0.3s ease;
}

.nav-link:hover{
    color: white;
    background-color: #EDAC2A;
}

.nav-link:focus-visible{
    outline: 3px solid white;
}

.logo {
    position: relative;
    height: clamp(2.5rem, 1.857rem + 2.143vw, 4rem);
    width: clamp(5.15rem, 3.826rem + 4.414vw, 8.24rem);
}

.logo img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.3s ease;
}

.logo .hover{
    opacity: 0;
}

.logo:hover .normal{
    opacity: 0;
}

.logo:hover .hover{
    opacity: 1;
}

.icon-float{
	position: fixed;
	right: clamp(1rem, 0.143rem + 2.857vw, 3rem);
	bottom: clamp(1rem, 0.143rem + 2.857vw, 3rem);	
}

.icon-float img{
	width: clamp(2rem, 1.571rem + 1.429vw, 3rem);
	height: clamp(2rem, 1.571rem + 1.429vw, 3rem);	

	animation: icon-float 1.5s infinite ease-out;
}