/* VARIABLES */
:root {
    --black: #000000;
    --white: #ffffff;
    --text-gray: #363636;
    --secondary: #6A6A6A;
    --primary: #f20574;

    --font-size-headline: 30px;
    --font-size-subheadline: 20px;
    --font-size-subheadline-2: 20px;
    --font-size-foot-note: 14px;

    --line-height-headline: 40px;
    --line-height-subheadline: 92px;
    --line-height-subheadline-2: 42px;

    --layout: 40px;
    --spacing: 20px;

    --flex-widht: 100%;
    --hero-section-height: auto;
    --brand-section-height: auto;
    --footer-flex-jystify-centent: center;

    --footer-link-pposition: static
}
@media only screen and (min-width: 652px) {
    :root {
        --font-size-headline: 30px;
        --font-size-subheadline: 20px ;
        --line-height-headline: 51px;
        --layout: 20px;
        --flex-widht: 50%;
        --hero-section-height: 100vh;
        --brand-section-height: 425px;
        --footer-flex-jystify-centent: space-between;
        --footer-link-pposition: absolute
    }
}
@media only screen and (min-width: 1024px) {
    :root {
        --font-size-headline: 45px;
        --line-height-headline: 70px;
        --font-size-subheadline-2: 36px;
        --line-height-subheadline-2: 40px;
        --layout: 20px
    }
}

/* ANIMATIONS */
@keyframes slide-fade-in-40 {
  from {
    transform: translateY(40px);
    opacity: 0;
    }
  to {
    transform: translateY(0);
    opacity: 1;
    }
}
@keyframes slide-fade-in-100 {
  from {
    transform: translateY(100px);
    opacity: 0;
    }
  to {
    transform: translateY(0);
    opacity: 1;
    }
}
.fade-in{
  opacity: 0;
  transition: 1s all ease;
}
.fade-in.active{
  opacity: 1;
}

/* SHARED */
*, *::after, *::before {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Lexend Zetta', sans-serif;
    color: var(--black);
}
html {
	scroll-behavior: smooth;
}

h1 {
    font-size: var(--font-size-headline);
    line-height: var(--line-height-headline);
    margin-bottom: var(--spacing);
    color: var(--primary)
}

img {
    max-width: 100%;
    border: none
}

section {
    position: relative;
    padding: var(--spacing);
}

.container {
    position: relative;
    max-width: 1140px;
    width: 100%;
    margin: 0 auto;
}

.container.column {
    max-width: 900px;
}

.content-block {
    padding: calc(0.4 * var(--spacing));
    margin-bottom: calc(2.5 * var(--spacing)) ;
}

.content-block img,
.content-block h2,
.content-block p
 {
    margin-bottom: calc(1.8 * var(--spacing)) ;
    font-family: 'IBM Plex Mono', monospace;
}

.content-block h2
 {
    font-size: var(--font-size-subheadline-2);
    line-height: var(--line-height-subheadline-2);
}

.content-block p
 {
    font-size: 1.25rem;
    line-height: 1.5;
}

.content-block2 {
    padding: calc(0.4 * var(--spacing));
    margin-bottom: calc(2.5 * var(--spacing)) ;
    background-color: var(--white); 
    padding-left: 25px;
}

.content-block2 img,
.content-block2 h2,
.content-block2 p
 {
    margin-bottom: calc(1.8 * var(--spacing)) ;
    font-family: 'Lexend Zetta', sans-serif ;
}

.content-block2 h2
 {
    font-size: var(--font-size-subheadline-2);
    line-height: var(--line-height-subheadline-2);
}

.content-block2 p
 {
    font-size: 0.8rem;
    line-height: 1.5;
}


/*  HERO SECTION */
.hero {
    display: flex;
    align-items: center;
    background-image: url('./assets/justslots-background.jpg');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    height: var(--hero-section-height);
}

.hero p {
    font-size: var(--font-size-subheadline);
    max-width: 1000px;
    color: var(--white);
    font-family: 'Lexend Zetta', sans-serif ;
    font-weight: 300;
}

.hero h1 {
    animation-name: slide-fade-in-100;
    animation-duration: 1s;
}
.hero p {
    animation-name: slide-fade-in-40;
    animation-duration: 1s;
}

.hero a {
    display: inline-block;
    padding: calc(0.8 * var(--spacing)) calc(2 * var(--spacing));
    margin-top: var(--layout);
    border: 3px solid var(--white);
    color: var(--white);
    text-decoration: none;
    font-family: 'Lexend Zetta', sans-serif ;
}


/*  BRAND SECTION */
.brand {
    align-items: flex-end;
    background-color: var(--secondary);
    background-image: url('./assets/images/watermark.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    padding-bottom: 0;
    padding-right: 0;
    height: var(--brand-section-height);
}
.brand .container {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;

}
.brand .content-block {
    flex: 1 1 auto;
    margin-bottom: 0;
    width:  var(--flex-widht);
}
.brand .content-block p {
    margin-bottom: 0;
}

.alt-text-color {
    color: var(--primary)
}


/* BODY SECTION*/
.body {
    background-color: var(--primary);
    padding-top:calc(2 * var(--layout));
}

/* CONTACT SECTION*/
.contact {
    background-color: var(--secondary);
    text-align: center;
}

.contact .content-block {
    margin-bottom: 0;
}

/* FOOTER */
footer {
    background-color: var(--primary);
    padding:  var(--layout);
    text-align: center;
}
footer .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: var(--footer-flex-jystify-centent);
    align-items: center;
}

footer p {
    font-family: 'Lexend Zetta', sans-serif;
    font-size: var(--font-size-foot-note);
    color: var(--text-gray);
    width: 100%;
}
footer a {
    position: var(--footer-link-pposition);
    right: 0;
    display: inline-block;
    padding: var(--spacing);
    transition: .3s ease-in-out opacity;
}
footer a:hover {
    display: inline-block;
    padding: var(--spacing);
    opacity: 0.8;
}