/* --- RESET --- */

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

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

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

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

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

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

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

/* --- FONTS --- */

/* roboto-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
         url('fonts/roboto-v30-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
  }
  /* roboto-italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    src: url('fonts/roboto-v30-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
         url('fonts/roboto-v30-latin-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
  }
  /* roboto-700 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/roboto-v30-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
         url('fonts/roboto-v30-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
  }
  /* roboto-700italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 700;
    src: url('fonts/roboto-v30-latin-700italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
         url('fonts/roboto-v30-latin-700italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
  }

/* --- ICONS --- */
.gg-volume {
    box-sizing: border-box;
    position: relative;
    display: block;
    width: 8px;
    height: 8px;
    border: 2px solid;
    border-right: 0;
    -webkit-perspective: 12px;
    perspective: 12px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px
}

.gg-volume::after,
.gg-volume::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute
}

.gg-volume::before {
    left: 2px;
    transform: rotateY(-90deg);
    width: 10px;
    height: 10px;
    border: 2px solid;
    border-left: 0;
    top: -3px
}

.gg-volume::after {
    width: 8px;
    height: 16px;
    border: 6px double;
    border-left: 0;
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
    right: -14px;
    top: -6px
}
.gg-image {
    box-sizing: border-box;
    position: relative;
    display: block;
    width: 20px;
    height: 16px;
    overflow: hidden;
    box-shadow: 0 0 0 2px;
    border-radius: 2px
}

.gg-image::after,
.gg-image::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    border: 2px solid
}

.gg-image::after {
    transform: rotate(45deg);
    border-radius: 3px;
    width: 16px;
    height: 16px;
    top: 9px;
    left: 6px
}

.gg-image::before {
    width: 6px;
    height: 6px;
    border-radius: 100%;
    top: 2px;
    left: 2px
}
.gg-mail,
.gg-mail::after {
    display: block;
    box-sizing: border-box;
    height: 14px;
    border: 2px solid
}

.gg-mail {
    overflow: hidden;
    position: relative;
    width: 18px;
    border-radius: 2px
}

.gg-mail::after {
    content: "";
    position: absolute;
    border-radius: 3px;
    width: 14px;
    transform: rotate(-45deg);
    bottom: 3px;
    left: 0
}


/* --- STYLES --- */
:root {
    --content-width: 1440px;
    --content-padding: 1em;
    --ggs: 1.5;
}

body {
    font-family: "Roboto";
}

a {
    text-decoration: none;
}

.container {
    max-width: calc(var(--content-width) - 2 * var(--content-padding));
    padding-inline: var(--content-padding);
    margin-inline: auto;
}

main {
    display: flex;
    flex-direction: column;
    place-items: center;
    padding-block-start: 3em;
}
@media (max-width: 768px) {
    main {
        padding-block: 1em;
    }
}

hgroup {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    line-height: 1;
}

.bg::before {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(17, 17, 17, 0.434);
    backdrop-filter: blur(60px);
    opacity: 0.95;
}
.bg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    background-color: #111;
    background-size: cover;
    background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='65' height='65' patternTransform='scale(4) rotate(20)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0, 0%, 0%, 0)'/><path d='M25.5 6.5a6 6 0 1 1-12 0 6 6 0 0 1 12 0Zm39 13a6 6 0 1 1-12 0 6 6 0 0 1 12 0Zm0 13a6 6 0 1 1-12 0 6 6 0 0 1 12 0Zm-39 0a6 6 0 1 1-12 0 6 6 0 0 1 12 0zm13 26a6 6 0 1 1-12 0 6 6 0 0 1 12 0z'  stroke-width='1' stroke='none' fill='hsla(300, 100%, 50%, 1)'/><path d='M64.5 45.5a6 6 0 1 1-12 0 6 6 0 0 1 12 0zm0-39a6 6 0 1 1-12 0 6 6 0 0 1 12 0zm-13 13a6 6 0 1 1-12 0 6 6 0 0 1 12 0zm0 26a6 6 0 1 1-12 0 6 6 0 0 1 12 0zm-26 13a6 6 0 1 1-12 0 6 6 0 0 1 12 0z'  stroke-width='1' stroke='none' fill='hsla(56, 98%, 56%, 1)'/><path d='M51.5 32.5a6 6 0 1 1-12 0 6 6 0 0 1 12 0Zm-13-13a6 6 0 1 1-12 0 6 6 0 0 1 12 0zm0-13a6 6 0 1 1-12 0 6 6 0 0 1 12 0zm-26 39a6 6 0 1 1-12 0 6 6 0 0 1 12 0zm0 13a6 6 0 1 1-12 0 6 6 0 0 1 12 0z'  stroke-width='1' stroke='none' fill='hsla(300, 100%, 50%, 1)'/><path d='M51.5 58.5a6 6 0 1 1-12 0 6 6 0 0 1 12 0Zm-39-52a6 6 0 1 1-12 0 6 6 0 0 1 12 0Zm0 26a6 6 0 1 1-12 0 6 6 0 0 1 12 0zm26 13a6 6 0 1 1-12 0 6 6 0 0 1 12 0zm-13-26a6 6 0 1 1-12 0 6 6 0 0 1 12 0z'  stroke-width='1' stroke='none' fill='hsla(300, 100%, 50%, 1)'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
    z-index: -1;
}

.card {
    display: flex;
    flex-direction: column;
    gap: 4em;
    padding: 2em 4em;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 15px;
    background-color: #fffffa;
}
@media (max-width: 768px) {
    .card {
        padding: 1em;
    }
}
@media (max-height: 390px) {
    .card {
        flex-direction: row;
        gap: 2em;
    }
}

.card::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 500ms ease-in-out;
    background-color: #5757579d;
    z-index: -1;
}

.card:has(a:hover)::after {
    opacity: 1;
}

.card header {
    display: flex;
    flex-direction: column;
    gap: 2em;
    text-align: center;
}

.card header h2 {
    color: #666;
    font-weight: normal;
}

.yippie {
    --col: #c21ac2;
    --bg: #feeefe;

    display: flex;
    justify-content: space-between;
    gap: 1ch;
    align-items: center;
    line-height: 1;
    font-weight: bold;
    font-size: 1.5rem;
    letter-spacing: 0.125ch;
    color: var(--col);
    background-color: var(--bg);
    box-shadow: 0 0 0 2px transparent;
    border-radius: 2px;
    padding: 0.75em 1em;
    transition:
        color 150ms ease-in-out,
        box-shadow 150ms ease-in-out,
        background-color 250ms ease-in-out;
}
@media (max-width: 768px) {
    .yippie {
        font-size: 1rem;
    }
}
@media (max-height: 390px) {
    .yippie {
        font-size: 1rem;
    }
}

.yippie:hover {
    color: var(--bg);
    background-color: var(--col);
}

.yippie:hover i {
    transform: translateX(100%);
}

.card header h1 {
    font-size: 5rem;
}

.yippie i {
    margin-top: -2px;
    transition: transform 250ms ease-in-out;
}

.links {
    display: flex;
    flex-direction: column;
    padding-inline-start: 0;
    gap: 0.5em;
}
@media (max-height: 390px) {
    .links {
        justify-content: center;
    }
}

.links li {
    list-style-type: none;
}

footer {
    font-weight: bold;
    padding-block: 1em;
    color: #fff;
    text-align: center;
    z-index: 999;
}