@font-face {
    font-family: 'Meie Script';
    src: URL('/html/Meie_Script/MeieScript-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    src: URL('/html/Roboto/Roboto-Regular.ttf') format('truetype');
}

.container{
    height: 100vh;
    background-color: #323232; 
    font-family: 'Roboto', sans-serif; 
    display: flex;
    flex-direction: column;
    margin:0
}

.navbar{
    color: white; 
    display: flex; 
    padding: 25px 50px; 
    justify-content: space-between; 
    align-items: center;
}

.navlinks{
    display: flex; 
    gap: 70px; 
    font-size: 20px; 
    color: white;
}

.navlink {
    text-decoration: none;
    color: white;
    
}

.navlink:hover{
    text-decoration: none;
    color: antiquewhite;
}

.content-home {
    display: flex;
    flex-direction: row; 
    justify-content: space-around; 
    align-items: center;
    flex: 1;
}

.content-demo{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.title-container{
    display: flex; 
    flex-direction: column; 
    font-family: 'Meie Script', cursive; 
    color: white; 
    align-items: center;
}

.demo-text{
    margin-top: 48px;
    font-size: 28px;
    color: white;
}

.demo-photo{
    display: flex;
    background-image: url("stars.jpg");
    width:80%;
    height: 50%;
    padding: 24px 32px;
    justify-content: space-between;
}

.demo-card{
    background-color: #323232;
    border-radius: 32px;
    height: 32rem;
    width: 16rem;
    
}

.title-header{
    font-size: 128px; 
    -webkit-text-stroke: 0.2px gray; 
    margin: 0;
}

.title-sub{
    font-size: 32px; 
    margin:0
}