@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200;400;600;700;800&display=swap');

@font-face {
  font-family: pixelOperator; 
  src: url(/fonts/PixelOperatorHB.ttf); 
}

*,
*::after,
*::before {
	box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

:root {
    --color-background: #131317;
    --color-background-box: #D4D0BA;
    --color-background-box-hover: #b9b5a2; 
    --color-yellow: #FFF828;
    --color-blue: #f93462;
    --color-pink: #E41CAB;
    --color-header: #F0EDD8;
    --color-footer: rgb(26, 26, 32);
    --color-text: #ffffff;
    --color-text-contrast: #FFFFFF;

    --border-radius: 1em;
}

body {
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: outfit, komet, helvetica, sans-serif;
}

ul {
    list-style-type: none;
    padding: 0;
}

@media (prefers-reduced-motion) {
    * {
        animation: none !important;
    }
}

a {
    color: var(--color-text);
    text-decoration: none;
}

h1 {
    font-size: 5em;
    font-weight: 800;
    font-family: 'Poltawski Nowy';
    font-style: italic;
}

h2 {
    font-family: 'Poltawski Nowy';
    font-style: italic;
}

.bulletList {
    padding-inline-start: 1em;
    list-style-type: disc;
    font-size: 1.5em;
}

.pixelOperator {
    font-family: 'pixelOperator';
}

a.bigButton {
    background-color: var(--color-background);
    border: 4px solid var(--color-blue);
    height: 4em;
    padding: 0 1em;
    color: var(--color-text);
    display: flex;
    justify-content: center;
    width: max-content;
    align-items: center;
    font-size: 1.2em;
    transition-duration: 0.3s;
    position: relative;
    margin-block-end: 1em;
}

a.bigButton img {
    /* filter: invert(1); */
    width: 1.5em;
    position: absolute;
    right: -1em;

}

a.bigButton.award {
    border-image: linear-gradient(134deg, rgba(168,168,168,1) 0%, rgba(219,219,219,1) 27%, rgba(171,171,171,1) 51%, rgba(219,219,219,1) 74%, rgba(163,163,163,1) 100%) 1;
}



a.bigButton:hover .hexIcon {
    transform: rotate(30deg);
    translate: 20px;
}

a.bigButton:hover {
    background-color: rgba(249, 52, 98, 0.2);
}

a.bigButton.award:hover {
    background-color: rgba(219, 219, 219, 0.2);
}

img.noMockup {
    border-radius: 0.8em;
}   

a.inlineLink {
    text-decoration: underline;
    color: var(--color-blue);
}

.hexIcon {
    width: 4.5em;
    height: 4.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: -4.39em;
    background: var(--color-blue);
    clip-path: polygon(
        50% 0%, 
        93% 25%, 
        93% 75%, 
        50% 100%, 
        7% 75%, 
        7% 25%
    );
    /* Optional: add a border */
    border: 2px solid var(--color-blue);
    display: flex;
    transition-duration: 0.5s;
}

.hexIcon.award {
    /* use a valid gradient background */
    background: linear-gradient(134deg, rgba(168,168,168,1) 0%, rgba(219,219,219,1) 27%, rgba(171,171,171,1) 51%, rgba(219,219,219,1) 74%, rgba(163,163,163,1) 100%);
    /* optional: remove or adjust border if you want the gradient to show */
    border: 2px solid transparent;
}

.hexIcon img {
    width: 1.2em;
    height: 1.2em;
    object-fit: contain;
    /* filter: invert(1); */
    position: absolute;
    left: 31%;
    transform: rotate(-30deg);
    background: none;
}

@media (max-width: 800px) {
    a.bigButton {
        padding: 1em;
        font-size: 1em;
    }

    .hexIcon img {
        transform: rotate(0deg);
    }

    .bulletList {
        font-size: 1.1em;
    }
}