@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap');
@import url(notes.css);

:root {
  --yellow: #fff9b1;
  --white: #f5f6f8;
  --lightorange: #f5d128;
  --olive: #d0e17a;
  --green: #d5f692;
  --pastelblue: #a6ccf5; 
  --aqua:#67c6c0;
  --blue: #23bfe7;
  --orange: #ff9d48;
  --pink: #ea94bb; 
  --red: #f16c7f;
  --purple: #b384bb;
}
html {
  height: 100svh;
  background-image: url(../assets/images/wood-board-background_low_res.jpg);
  background-size: 100%, 100%;
  background-attachment: scroll;
  display:grid;
  justify-content: center;
}
*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}
body{
  max-width: 1400px;
  font-family: 'Pacifico', cursive;
  height: 95svh;
  gap:20px;
  margin:3.5%;
  display:flex;
  flex-direction: column;
  gap:20px;

}

.title {
  width:95%;
  background-color: #f5d128;
  vertical-align: middle;
  text-align: center;
  display:grid;
  padding: 10px 0;
}
#title::before {
  content: '';
  background-image: url(../assets/images/arrow.png);
  background-size:cover;
  height:54px;
  width:73px;
  aspect-ratio: 70/55;
  position: absolute;
  top:2px;
  left:-20px;
  font-size: 12px;
  letter-spacing: 1px;
  text-align: center;
  /* border: 2px solid rgb(222, 70, 70); */
  padding:2px;
  place-self: center;
  /* animation: highlight2 4s infinite ease-in-out ; */
}
#title::after {
  content: 'Klikni:';
  background-size:contain;
  position: absolute;
  text-align: center;
  margin-left:10px;
  top:20px;
  left:-20px;
  font-size: 12px;
  letter-spacing: 1px;
  text-align: center;
  padding:2px;
  place-self: center;
  display:grid;
  place-items: center;
  font-family:'Open Sans', sans-serif;
  font-weight: bold;
}
.title-heading {
  font-weight: normal;
  font-size:24px;
  align-self: center;
}
.board {
  grid-template-columns: 1fr 1fr 1fr;
  display: grid;
  gap:4vw;
  height:100%;
}
@media screen and (width > 800px) {
  .board {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  .title {
    width:60%;
  }
  #title::after {
    margin-top:16px;
    font-size:24px;
  }
  #title::before {
    height:100px;
    width:134px;
  }
  .note {
    min-height: 20svh;
  }
  .green-pin::after, .red-pin::after, .blue-pin::after, .yellow-pin::after {
    /* width:30% !important;
    aspect-ratio: 1/1; */
    
  }
}
.note {
  height:100%;
  display:grid;
  place-items: center;
  position: relative;
  max-width: 500px;
  max-height: 500px;
  justify-self: center;
  text-align: center;
  word-wrap: break-word;
  font-size:24px;
}
@media screen and (width < 600px) {
  .note {
    font-size:15px;
  }
  body {
    height: 97.5svh;
  }
}
.animate-note {
  transition: filter 200ms ease, transform 200ms ease-in-out, box-shadow 200ms ease;
}
.animate-note:hover {
  transform: scale(105%, 105%);
  filter:saturate(1.5);
  box-shadow: 3px 7px 7px 5px rgba(0, 0, 0, 0.35)
}
a {
  color:#1e1e1e;
  text-decoration: none;
}
a:not(.title){
  
  letter-spacing: 0.03em;
  min-width: 100%;
}
video {
  width:100%;
  object-fit: cover; 
}
.accent-border {
  border:4px dotted rgb(56, 56, 56); 
}
.red {
  background-color: rgb(222, 70, 70);
}
.highlight {
  animation: highlight 2s infinite alternate ease;
}
@keyframes highlight {
  0% {
    transform: scale(0.96);
  }
  100% {
    transform: scale(1.04);
  }
}


/* Decorations */

.blue-pin::after {
  content: '';
  background-image: url(../assets/images/pin-blue.png);
  position: absolute;
  top:-10px;
  left:42%;
  justify-self: center;
  width:43px;
  height:43px;
  background-size: cover;
  transform: scaleX(-1);
  
}
.red-pin::after {
  content: '';
  background-image: url(../assets/images/pin-red.png);
  position: absolute;
  top:-10px;
  left:36%;
  justify-self: center;
  width:43px;
  height:43px;
  background-size: cover;
  transform:scaleX(-1) rotate(35deg);
}
.green-pin::after {
  content: '';
  background-image: url(../assets/images/pin-green.png);
  position: absolute;
  top:-10px;
  left:30%;
  justify-self: center;
  width:43px;
  height:43px;
  background-size: cover;
}
.yellow-pin::after {
  content: '';
  background-image: url(../assets/images/pin-yellow.png);
  position: absolute;
  top:-10px;
  left:34%;
  justify-self: center;
  width:43px;
  height:43px;
  background-size: cover;
  transform:scaleX(-1) rotate(45deg);
}

.stickys {
  position: relative;
  grid-column: -3 / -1 ;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.stickys img {
  width:100%;
  max-height: 60%;
  object-fit: contain;
  position: relative;
}
#img1 {
  top:0px;
}
#img2 {
  top:60px;
}
#img3 {
  top:25px;
}