/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
    box-sizing: border-box;
}

/*
  2. Remove default margin
*/
* {
    margin: 0;
}

/*
  3. Allow percentage-based heights in the application
*/
html,
body {
    height: 100%;
}

/*
  Typographic tweaks!
  4. Add accessible line-height
  5. Improve text rendering
*/
body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/*
  6. Improve media defaults
*/
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

/*
  7. Remove built-in form typography styles
*/
input,
button,
textarea,
select {
    font: inherit;
}

/*
  8. Avoid text overflows
*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

/*
  9. Create a root stacking context
*/
#root,
#__next {
    isolation: isolate;
}

body {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    background-color: black;
}

a {
    text-decoration: none;
    display: grid;
    align-items: center;
    --scale: 1;
    overflow: hidden;
}

a:hover {
    --scale: 1.1;
}

div {
    grid-area: 1 / 1 / 2 / 2;
    width: 100%;
    background-color: rgba(0.9, 0.9, 0.9, 0.7);
    transition: all 0.5s ease-in-out;
    scale: var(--scale);
    transform: var(--scale)
}

h2 {
    text-align: center;
    color: whitesmoke;
    padding: 0.5rem;
    text-transform: uppercase;
    font-size: 4rem;
    font-family: Segoe, Segoe UI, Optima, Arial, sans-serif;
    font-weight: bold;

    @supports (background-clip: text) or (-webkit-background-clip: text) {
        background-image:
            url("data:image/svg+xml,%3Csvg width='2250' height='900' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath fill='%2300A080' d='M0 0h2255v899H0z'/%3E%3Ccircle cx='366' cy='207' r='366' fill='%2300FDCF'/%3E%3Ccircle cx='1777.5' cy='318.5' r='477.5' fill='%2300FDCF'/%3E%3Ccircle cx='1215' cy='737' r='366' fill='%23008060'/%3E%3C/g%3E%3C/svg%3E%0A");
        background-size: 110% auto;
        background-position: center;
        color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
    }
}

img {
    grid-area: 1 / 1 / 2 / 2;
    grid-row: 1;
    width: 400px;
    height: 400px;
    object-fit: cover;
}