/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}

/* HEADINGS CSS  */
h1 {
font-family: lovely;
font-size: 64px;
}

/* END OF HEADINGS CSS  */

/* CARD CSS  */

@font-face { /*you can change the custom fonts for all the one u like just make sure that don't get things mixed up in the final part hehe */
font-family: Magica;
src: url(https://static.tumblr.com/p6yopnt/Qkiqnu0r5/theheart.ttf);
}
 
@font-face {
font-family: lovely;
src: url(https://dl.dropbox.com/s/xde2bkhiie1bm8r/LovelyRegular.ttf);
 
}
#lovely {
font-family: lovely;
font-size: 30px;
text-align: center;
-webkit-text-stroke: 1px black; /*you can put the normal text-shadow here too!*/
color: white;
}
/* put the rest of your custom font here! */
 
.card { /*container! i'd recommend you to just change the border pls*/
width: 310px;
height: 290px;
padding: 0;
box-sizing: border-box;
overflow: hidden;
border-width: 10px;
border-style: solid; 
border-image: url("https://i.imgur.com/NJa4bp2.png") 8 fill round;         
  
}
 
.card * { 
transition: 0.3s ease all;
}
 
.card img { /*i'd recommend u to not change this but if u want u can mess aroung with the width or height */
margin: 0;
width: 300px;
height: 240px;
object-fit: cover;
display: block;
}
 
#scroll { /* u can change the font, background, text aling. i'd recommend u to not change padding, height and overflow :D */
padding: 5px;
height: 110px;
overflow:hidden;
background: white;
font-size: 14px;
font-family: 'Merryweather';
color: #000;
text-align: center;
 
}
.card p {
margin: 0;
line-height: 1.5;
}
 
.card:hover img, .card:focus-within img {
margin-top: -80px;
}
 
.card:hover h3, .card:focus-within h3 {
padding: 8px 12px 0;
}

/* END OF CARD CSS  */ 


/* Links CSS  */
 
a { /* u can change this link for another! */
font-family: Magica;
text-decoration: none;
color: white;
font-size:25px;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
 
}
a:hover {
webkit-filter: blur(1px);
filter: blur(1px);
}

/* END OF Links CSS  */