/* |||| FONT FACE |||| */
@font-face {
    font-family: "Outfit SemiBold";
    src: url('./design/fonts/static/Outfit-SemiBold.ttf') format("truetype");
}

@font-face {
    font-family: "Outfit Light";
    src: url('./design/fonts/static/Outfit-Light.ttf') format("truetype");
}

@font-face {
    font-family: "Outfit Regular";
    src: url("./design/fonts/static/Outfit-Regular.ttf") format("truetype");
}

/* |||| RESET |||| */
*,
*::before, 
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

img,
picture,
video {
    display: block;
    height: auto;
    max-width: 100%;
}

input,
button,
textarea,
select {
    background-color: transparent;
    border-color: transparent;
    color: inherit;
    font: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

ul,
ol {
    list-style-type: none;
}

/* |||| ROOT |||| */
:root {
    --black: rgb(0, 0, 0);
    --blue--950: rgb(12, 25, 44);
    --blue--900: rgb(21, 38, 63);
    --blue--800: rgb(46, 64, 90);
    --blue--500: rgb(139, 172, 217);
    --cyan--400: rgb(0, 255, 248);
    --white: rgb(255, 255, 255);

    /* || FONT SIZES || */
    /* --text--lg: 22px; */
    --text--lg: 1.222rem;
    /* --text--md: 18px; */
    --text--md: 1rem;
    /* --text--sm: 16px; */
    --text--sm: 0.87rem;
}

/* |||| TEXT PRESET |||| */
/* || FONT-FAMILY || */
.text-preset-1,
.text-preset-3--semibold {
    font-family: "Outfit SemiBold", Arial, Helvetica, sans-serif;
}

.text-preset-2 {
    font-family: "Outfit Light", Arial, Helvetica, sans-serif;
}

.text-preset-3--regular {
    font-family: "Outfit Regular", Arial, Helvetica, sans-serif;
}

/* || FONT-SIZE & LINE-HEIGHT || */
.text-preset-1 {
    font-size: var(--text--lg);
}

.text-preset-2 {
    font-size: var(--text--md);
    line-height: 145%;
}

.text-preset-3--semibold,
.text-preset-3--regular {
    font-size: var(--text--sm);
}

.text-preset-1,
.text-preset-3--semibold,
.text-preset-3--regular {
    line-height: 125%;
}

/* |||| GENERAL |||| */

html {
    font-size: 18px;
}

main {
    align-items: center;
    background-color: var(--blue--950);
    display: flex;
    height: 100vh;
    justify-content: center;
}
/* || WEBSITE TITLE - sr only || */
.website-title {
    left: -1000px;
    object-fit: fill;
    overflow: hidden;
    position: absolute;
}

/* |||| CARD |||| */

.card {
    background-color: var(--blue--900);
    border-radius: 0.833em;
    padding: 1.333em;
    max-width: 19.444em;
}

.hero-container {
    align-items: center;
    display: flex;
    justify-content: center;
    position: relative;
}

.hero-image {
    border-radius: 0.444em;
    object-fit: cover;
}

.overlay {
  background-color: var(--cyan--400);
  border-radius: 0.544em;
  height: 100%;
  opacity: 0;
  position: absolute;
  width: 100%;
}

.hero-image-hover-icon {
    object-fit: contain;
    opacity: 0;
    position: absolute;
}

.card h2 {
    color: var(--white);
    margin-block-start: 1.091em;
}

.card .description {
    color: var(--blue--500);
    margin-block-start: 0.889em;
}

/* || CARD DETAILS || */
.card__details {
    display: flex;
    justify-content: space-between;
    margin: 1.333em 0 1.361em;
}

.card__details figure {
    display: flex;
}

.card__details img {
    object-fit: cover;
    margin-inline-end: 0.444em;
}

.card__details .text-preset-3--semibold {
    color: var(--cyan--400);
}

.card__details .text-preset-3--regular {
    color: var(--blue--500);
}

/* || CREATOR-NAME || */
.card__creator-name {
    align-items: center;
    border-top: 0.056em var(--blue--800) solid;
    display: flex;
    padding: 0.8em 0 0.561em;
}

.card__creator-picture {
    max-width: 1.778em;
}

.card__creator-name picture {
    border: 0.056em solid var(--white);
    border-radius: 1em;
    margin-inline-end: 0.889em;
}

.card__creator-name p {
    color: var(--blue--500);
}

.card__creator-name a {
    color: var(--white);
    margin-inline-start:  0.244em;
}

/* |||| FOCUS/HOVER/ACTIVE STATES |||| */
.hero-container:hover,
.hero-container:focus,
.hero-container:active,
.hero-container:hover .hero-image-hover-icon,
.hero-container:focus .hero-image-hover-icon,
.hero-container:active .hero-image-hover-icon,
.card h2:hover,
.card h2:focus,
.card h2:active,
.card__creator-name a:hover,
.card__creator-name a:focus,
.card__creator-name a:active {
    cursor: pointer;
}

.hero-container:hover .overlay,
.hero-container:focus .overlay,
.hero-container:active .overlay {
    opacity: 0.5;
}

.hero-container:hover .hero-image-hover-icon,
.hero-container:focus .hero-image-hover-icon,
.hero-container:active .hero-image-hover-icon {
    opacity: 1;
}

.card h2:hover,
.card h2:focus,
.card h2:active,
.card__creator-name a:hover,
.card__creator-name a:focus,
.card__creator-name a:active {
    color: var(--cyan--400);
}

/* |||| ATTRIBUTION |||| */
.attribution {
    background-color: var(--blue--950);
    color: var(--blue--500);
    display: flex;
    justify-content: center;
    padding: 2em;
}

.attribution a {
    color: var(--cyan--400);
}