@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

body {
    font-family: 'Inter', sans-serif;
    color: black;
    background-color: whitesmoke;
    margin: 0;
}

header {
    position: sticky;
    top: 0;
    background:url('background.jpg');
    background-size: 100%;
    background-attachment: fixed;
    background-position: 50% 55%;
    color: white;
    text-shadow: 4px 6px 12px #000000;
    width: 100%;
    border: 0px;
    height: 20ch;
    border-bottom: 1pt;
    border-style: solid;
    border-color: black;
    box-shadow: 0px 0px 4pt 1pt #000000B0;
}

header p {
    text-align: center;
}

h1 {
    padding-top: 1ch;
    margin-top: 0;
    text-align: center;
}

.phone {
    font-size: large;
    font-weight: bold;
    color: black;
    text-shadow:
    -1px -1px 0 azure,
     0   -1px 0 azure,
     1px -1px 0 azure,
     1px  0   0 azure,
     1px  1px 0 azure,
     0    1px 0 azure,
    -1px  1px 0 azure,
    -1px  0   0 azure;
    animation: lighted 1s ease infinite;
}



@keyframes lighted {
    0% {
        text-shadow:
        -1px -1px 0 azure,
         0   -1px 0 azure,
         1px -1px 0 azure,
         1px  0   0 azure,
         1px  1px 0 azure,
         0    1px 0 azure,
        -1px  1px 0 azure,
        -1px  0   0 azure;
    }

    50% {
        text-shadow:
        -2px -2px 0 beige,
         0   -2px 0 beige,
         2px -2px 0 white,
         2px  0   0 white,
         2px  2px 0 burlywood,
         0    2px 0 burlywood,
        -2px  2px 0 papayawhip,
        -2px  0   0 papayawhip;
    }

    100% {
        text-shadow:
        -1px -1px 0 azure,
         0   -1px 0 azure,
         1px -1px 0 azure,
         1px  0   0 azure,
         1px  1px 0 azure,
         0    1px 0 azure,
        -1px  1px 0 azure,
        -1px  0   0 azure;
    }
}

.product-container {
    margin: 10pt auto;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
    justify-items: center;
}

.product {
    margin-top: 10pt;
    border-radius: 3pt;
    background-color: lightgray;
    border-width: 1pt;
    border-color: white;
    border-style: solid;
    width: 30ch;
    height: fit-content;
    box-shadow: 0px 0px 3pt 1pt #000000B0;
}

.product img {
    width: 100%;
    border-radius: 2pt;
}

.product h2 {
    text-align: center;
}

.product p {
    text-align: center;
}

section {
    text-align: center;
}

a {
    color: black;
    text-decoration: none;
    text-shadow:
    -1px -1px 0 azure,
     0   -1px 0 azure,
     1px -1px 0 azure,
     1px  0   0 azure,
     1px  1px 0 azure,
     0    1px 0 azure,
    -1px  1px 0 azure,
    -1px  0   0 azure;
}