@import url('https://fonts.googleapis.com/css2?family=Crushed&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mea+Culpa&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200;300;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dawning+of+a+New+Day&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&display=swap');



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

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

section {
  margin-top:-1px;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  width: 100vw;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}



:root {
  --väri-tumma-400: hsla(0, 0%, 0%, 100%);
  --väri-vaalea-400: hsl(0, 0%, 100%);

  --ff-cursive-3: 'Cinzel Decorative', serif;	

  --ff-cursive: 'Mea Culpa', cursive;	
  /* --ff-cursive: 'Princess Sofia', cursive;	 */
  /* --ff-cursive: 'MonteCarlo', cursive;	 */


  --ff-cursive-2: 'Dawning of a New Day', cursive;
  --ff-display: 'Crushed', cursive;
  --ff-ss: 'Dosis', sans-serif;

  --fs-xxl: clamp(4.4rem, .8rem + 12vw, 9rem);
  --fs-xl: 2.8rem;
  --fs-l: 1.5rem;
  --fs-m: 1.125rem;
  --fs-s: .9rem;
  --fs-xs: .8rem;
}

main {
  position:relative;
  max-width:100vw;
  max-height:100vh;
  overflow: hidden;
}

main > div {
    display:flex;
    width:101vw;
}

main > div > div {
    position:relative;
    display:flex;
    justify-content: center;
    pointer-events: none;
}

main > div > div:nth-child(3) {
    background: url(img/malja_saara_1.jpg) right center / cover no-repeat;
}

main > div > div:nth-child(4) {
    background: url(img/malja_saara_2.jpg) left center / cover no-repeat;
    margin-left:-1px;
}

main > div > .main-link:nth-child(2) {
    right:0;
}

.left,
.right {
    min-height:100vh;
    width:50%;
}
.left::before,
.right::before {
    pointer-events: none;
    content:'';
    position:absolute;
    inset:0;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(5px);
    opacity:0;
    transition: opacity 300ms;
}


.main-link:nth-child(1):hover ~ .left::before,
.main-link:nth-child(2):hover ~ .right::before,
.main-link:nth-child(1):focus ~ .left::before,
.main-link:nth-child(2):focus ~ .right::before {
    opacity:1;
}

.main-link {
    position:absolute;
    top: 10vh;
    font-family: var(--ff-display);
    font-size: clamp(1rem, .8rem + 2vw, 2.5rem);;
    color: var(--väri-vaalea-400);
    isolation: isolate;
    display:flex;
    justify-content:center;
    text-align:center;
    filter: drop-shadow(0 0 5px hsla(0, 0%, 0%, 0.4));
    max-height:1em;
    width:50%;
    z-index:2;
    transform: scale(1,1);
    transition: transform 300ms ease-in-out;
}

.main-link > a {
    pointer-events: auto;
    cursor:pointer;
    line-height:1;
}


a:link,
a:visited,
a:active {
    text-decoration:none;
    color: var(--väri-vaalea-400);
}
.main-link::before {
    content: attr(name);
    position:absolute;
    z-index:-1;
    margin-top:-.7em;
    font-size: clamp(1.5rem, .8rem + 2vw, 3rem);;
    font-family: var(--ff-cursive-2);
    color:var(--väri-vaalea-400);
    opacity: .2;
    filter:blur(2px);
    transform: scale(1,1);
    transition: transform 300ms ease-in-out, filter 300ms ease-in-out;

}

.main-link:hover,
.main-link:focus {
    transform: scale(1.08, 1.08);

}

.main-link:hover::before,
.main-link:focus::before {
    transform: scale(1.3, 1.3);
    filter: blur(0px);
}

.saara {
    position:absolute;
    top:53vh;
    z-index:3;
    width:100%;
    display:flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    flex-direction: column;
}

h1 {
    width:100%;
    font-weight:400;
    line-height:1;
    padding:1em 0.2em;
    text-align:center;
    font-family:var(--ff-cursive-3);
    color:#fff;
    font-size: var(--fs-xxl);
    text-shadow: 0 2px 5px #0005;

}


hr {
    position: relative;
    width: 90%;
    display: block;
    height: 3rem;
    background: url(aanimaljahoitaja/img/ornament.png) center no-repeat;
    background-size: 7rem;
    border:transparent;

}

hr::before,
hr::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%; 
    width: 41%;
    border-top: 5px solid;
    border-image-slice: 1;
    border-width: 1px;

}

hr::before {
    border-image-source: linear-gradient(to left, #ffffff, #ffffff00);
}
hr::after {
    border-image-source: linear-gradient(to right, #ffffff, #ffffff00);
    right:0;
}

@media only screen and (orientation:portrait) { /* min-width 641px, medium screens */
    /* .main-link {
        bottom:10vh;  
        top:auto;  
    } */

    .saara {
      top:68vh;
    }

    .main-link::before {
        opacity:.5;
    }
}