@font-face {  
    font-family: 'DMSans';
    src: url('/src/DMSans.ttf') format('truetype'); 
  }

* {
    margin: 0px;
    padding: 0px;
}

:root {
    font-family: "DMSans", sans-serif;
}

body {
    display: flex;

    min-height: 100vh;
    height: 100%;

    background-color: black;
    background-image: url("web_bg.webp");
    background-size: cover; /* Fit by height while maintaining aspect ratio */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent repeating */

    color: white;

    
    /* align-items: center; */
}

.content {
    background:rgba(0, 0, 0, 0.4);
    margin: auto;
    border-radius: 0.25rem;
    border-width: 2px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.04);

    text-align: center;
    
    max-width: 30rem;

    padding-inline: 2rem;

}

.content-intro {
    max-width: 30rem;

    font-size: 1.2rem;

}

.sm-icons {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 2rem;
}


.icon {
    max-width: 40px;
    margin: auto;
}

.space-1 {
    margin-top: 1rem;
}
.space-2 {
    margin-top: 2rem;
}
.space-4 {
    margin-top: 4rem;
}