* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    position: relative;
    background-color: var(--md-sys-color-background);
    max-inline-size: 1280px;
    margin-inline: auto;
    font-family: "Roboto", sans-serif;
}

h1 {
    text-align: start;
    font-size: clamp(1.8rem, -0.2625rem + 5vw, 2.5rem);
}

main {
    padding: 50px;
    max-inline-size: 900px;
    margin-inline: auto;
}

.info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

    &>p {
        display: flex;
        position: relative;
        color: var(--md-sys-color-on-secondary-container);
        align-items: center;
        gap: 5px;
        margin-block: 10px;
        background-color: var(--md-sys-color-secondary-container);
        border-radius: 20px;
        padding-inline-end: 15px;
    }

}

@media screen and not (display-mode: standalone) {

    .info,
    .projects {
        display: none;
    }
}