:root {
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: 'Header';
    src: url(static/fonts/KartHeader.ttf); 
}
@font-face {
    font-family: 'SubHeader';
    src: url(static/fonts/KartSubHeader.ttf); 
}
@font-face {
    font-family: 'kartTitle';
    src: url(static/fonts/KartTitle.ttf); 
}

h1{
    font-family: 'Header';
    font-weight: 100;
    font-size: 40px;

}

p{
    font-family: 'SubHeader';
    font-weight: 100;

}
.navlinks a {
    text-decoration: none;
    color:  white;
    font-family: 'KartTitle';
    font-size: larger
}
.navlinks{
    display: flex;
    gap: 25px;
    
}

.pink{
    color: #B53AD4; 
}

.blue{
    color: #3AA6D0;
}
.white{
    color: white;
}

.block{
    margin: 15dvh;
    
    padding: 5dvw;
    position: relative;

    background-color: rgb(158, 158, 158);
    border-radius: 10px;
    border: 1.3dvh solid transparent;
    border-image: url(static/stone.avif) 30 round;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;

    gap: 5dvw;
    align-items: center;
    background-image: 
    radial-gradient(circle, rgba(22, 22, 22, 0.63) 0%, rgba(31, 31, 31, 0.925) 100%),
        url(static/stone.avif);
    background-blend-mode: overlay;
    background-size: auto, 30dvh;

}


.navbar{
    display: flex;
}

.feature{
              display: flex;
              flex-wrap: wrap;
              flex-direction: column;
              flex: 1.5;
              gap: 25px;
}

.bg{
  
  background-image: 
    radial-gradient(circle, rgb(30, 28, 43) 0%, rgba(8, 8, 8, 0.925) 100%),
    url('static/trianglesheet.jpg');
  
  background-size: auto, 150px;
  
  background-blend-mode: multiply;
}

.sack{
    position: absolute;
    top: -100px;
    left: 150px;
}