@import "colors.css";

body,
html {
    background: var(--background);
    background-position: top;
    cursor: url(images/cursor/cursor.png), auto;
    display: flex;
    align-items: center;
    flex-direction: column;
}

header {
    background-color: var(--surface_container);
    display: flex;
    align-items: center;
    justify-items: center;
    flex-direction: row;
    padding: 0.2rem 0.5rem;
    border-radius: 20px;
    position: sticky;
    top: 10px;
    z-index: 10;
}

.tab {
    margin-inline: 2px;
    padding: 5px 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: Rubik;
    font-size: 8pt;
    color: var(--on_surface);
}

.tab .m3-icon {
    font-size: 16pt;
    padding: 2px 16px;
    margin: 0px;
    border-radius: 20px;
    transition: 200ms;
}

.tab:hover .m3-icon {
    background-color: var(--secondary_container);
}

.tab.active .m3-icon {
    background-color: var(--secondary_container);
    color: var(--on_secondary_container);
    font-variation-settings: "FILL" 1;
}

.container {
    max-width: 600px;
    display: flex;
    align-items: center;
    flex-direction: column;
}

#logo {
    height: 75px;
    margin-top: 20px;
}

.title {
    font-family: Rubik;
    color: var(--on_surface);
    font-size: 32pt;
    font-weight: 800;
    margin: -5px 0px;
}

hr {
    --s: 10px; /* size of the wave */
    --b: 5px; /* thickness of the line */
    --m: 1; /* curvature of the wave [0 2] */

    background: var(--surface_container);
    --R: calc(var(--s) * sqrt(var(--m) * var(--m) + 1) + var(--b) / 2);
    height: calc(2 * var(--R));
    width: 100%;
    --_g:
        #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
    mask:
        radial-gradient(
                var(--R) at left 50% bottom calc(-1 * var(--m) * var(--s)),
                var(--_g)
            )
            calc(50% - 2 * var(--s)) calc(50% - var(--s) / 2 - var(--b) / 2) /
            calc(4 * var(--s)) calc(var(--s) + var(--b)) repeat-x,
        radial-gradient(
                var(--R) at left 50% top calc(-1 * var(--m) * var(--s)),
                var(--_g)
            )
            50% calc(50% + var(--s) / 2 + var(--b) / 2) / calc(4 * var(--s))
            calc(var(--s) + var(--b)) repeat-x;
}

.section {
    border-radius: 25px;
    overflow: hidden;
    width: 100%;
}

.section-header {
    align-self: start;
    margin-left: 1rem;
    margin-bottom: 0.5rem;
    font-family: Rubik;
    color: var(--on_surface);
}

.button,
.text {
    font-family: Rubik;
    color: white;
    background-color: var(--surface_container);
    padding: 10px;
    border-radius: 10px;
    transition: 300ms;
    margin-bottom: 2px;
}

.text {
    padding: 5px 1.2rem;
}

.text h2 {
    margin: 0.5rem 0px -10px 0px;
    color: var(--on_surface);
    display: flex;
    align-items: center;
    flex-direction: row;
}

.text h2 span {
    margin-right: 0.5rem;
}

.text p {
    color: var(--on_surface_variant);
}

.button:hover {
    background-color: var(--surface_container_high);
    cursor: url(images/cursor/pointer.png), auto;
}

.button img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 15px;
    transition: height 300ms;
}

.button:hover img {
    height: 300px;
}

.btn-info {
    padding: 10px;
}

.btn-title {
    color: var(--on_surface);
    font-family: "Rubik";
    font-weight: 600;
    font-size: 20pt;
    transition: 300ms;
    margin-bottom: 25px;
    margin-top: 0px;
}

.btn-desc {
    margin-top: -25px;
    color: var(--on_surface_variant);
    opacity: 0.5;
    font-family: "Rubik";
    margin-bottom: 0px;
}

a {
    text-decoration: none;
}

.m3-icon {
    font-family: "Material Symbols Rounded";
}