body {
    margin: 0;
    padding: 0;

    background-image: url("img/btbackground.jpg");
    background-size: cover;       
    background-repeat: no-repeat;  
    background-position: center;  
    background-attachment: fixed; 
}

img{
    display:block;
    margin-left:auto;
    margin-right:auto;
    margin-bottom: 50px;
}

.main{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
}

.logo{
    width: 7vw;
    padding-top: 1vw;
    margin-left: auto;
    margin-right: auto;
    display: block;
    transition: transform 0.3s ease;
    display: block;
}

.logo:hover {
    animation: bounceSpin 0.8s ease-in-out forwards;
}


@keyframes bounceSpin {
    0% {
        transform: translateY(0) rotateY(0deg);
    }
    20% {
        transform: translateY(-10px) rotateY(360deg);
    }
    50% {
        transform: translateY(-5px) rotateY(720deg);
    }
    80% {
        transform: translateY(-2px) rotateY(1080deg);
    }
    100% {
        transform: translateY(0) rotateY(1080deg);
    }
}


@font-face {
    font-family: "Therilo";
    src: url("../fonts/Therilo_Bold.otf");
}

h1{
    text-align: center;
    font-family: Kilogram;
    font-size: 40px;
}

h2{
    text-align: center;
}


p{
    font-size:30px;
    font-family: ThinFourDown;
    text-align: center;
}

.font-size{
    font-size: 50px;
}

#navbar {
    display: flex;
    justify-content: center;  
    align-items: center;      
    padding-top: 1vh;
    padding-bottom: 3vh;
}



ul {
    list-style: none;          
    display: flex;             
    justify-content: center;    
    align-items: center;        
    gap: 50px;                
    padding: 0;
    margin: 0;
}

ul li {
    display: flex;
}

ul li a {
    font-family: Therilo;
    font-size: 4em;
    text-decoration: none;
    color: white;
    transition: transform 0.3s ease, letter-spacing 0.3s ease;
    display: inline-block;
}

ul li a:hover {
    transform: scale(1.1);
    letter-spacing: 1px;
}