/*==================================================

              DANI'S WEBSITE
          GLOBAL STYLE SHEET

====================================================*/

/* GOOGLE FONTS */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@500;700&family=Quicksand:wght@400;500;700&family=Caveat:wght@400;700&display=swap');


/*==================================================

ROOT COLORS

====================================================*/

:root{

--bg:#F8DCE5;

--card:#FFF8FB;

--pink:#D99AAA;

--pink-light:#E7A9B7;

--pink-soft:#FFDCE8;

--red:#A30F2D;

--green:#6A8E23;

--text:#7F4151;

--border:#EAC3CF;

--shadow:rgba(0,0,0,.15);

}


/*==================================================

RESET

====================================================*/

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

background:var(--bg);

font-family:'Quicksand',sans-serif;

color:var(--text);

overflow-x:hidden;

min-height:100vh;

line-height:1.7;

}


/*==================================================

TYPOGRAPHY

====================================================*/

h1{

font-family:'Fraunces',serif;

font-size:70px;

color:var(--red);

letter-spacing:2px;

}

h2{

font-family:'Fraunces',serif;

font-size:42px;

color:var(--red);

}

h3{

font-family:'Fraunces',serif;

font-size:28px;

color:var(--red);

}

p{

font-size:18px;

}

.handwriting{

font-family:'Caveat',cursive;

font-size:28px;

}


/*==================================================

LINKS

====================================================*/

a{

color:var(--red);

text-decoration:none;

transition:.3s;

}

a:hover{

color:var(--pink);

}


/*==================================================

SCROLLBAR

====================================================*/

::-webkit-scrollbar{

width:12px;

}

::-webkit-scrollbar-track{

background:#f6d4de;

}

::-webkit-scrollbar-thumb{

background:var(--pink);

border-radius:30px;

border:2px solid #f6d4de;

}

::-webkit-scrollbar-thumb:hover{

background:var(--red);

}


/*==================================================

SELECTION

====================================================*/

::selection{

background:var(--pink);

color:white;

}


/*==================================================

CONTAINERS

====================================================*/

.container{

width:min(1300px,90%);

margin:auto;

}


/*==================================================

CARDS

====================================================*/

.card{

background:var(--card);

border:2px solid var(--border);

border-radius:18px;

padding:25px;

box-shadow:6px 6px 0 var(--pink-light);

transition:.35s;

}

.card:hover{

transform:translateY(-5px);

box-shadow:10px 10px 0 var(--pink);

}


/*==================================================

BUTTONS

====================================================*/

.button{

display:inline-block;

padding:12px 22px;

background:var(--pink);

border-radius:12px;

color:white;

font-weight:bold;

transition:.3s;

}

.button:hover{

background:var(--red);

transform:translateY(-3px);

}


/*==================================================

SECTION TITLES

====================================================*/

.section-title{

text-align:center;

margin:70px 0 20px;

}

.section-title p{

font-family:'Caveat';

font-size:28px;

}


/*==================================================

POLAROIDS

====================================================*/

.polaroid{

background:white;

padding:10px 10px 35px;

border-radius:10px;

box-shadow:0 8px 18px rgba(0,0,0,.15);

position:relative;

transition:.4s;

}

.polaroid:hover{

transform:translateY(-8px) rotate(1deg);

}

.polaroid img{

width:100%;

display:block;

border-radius:5px;

object-fit:cover;

}

.polaroid::before{

content:"";

position:absolute;

top:-10px;

left:50%;

transform:translateX(-50%) rotate(-4deg);

width:90px;

height:24px;

background:rgba(255,245,245,.9);

border-radius:4px;

}


/*==================================================

UTILITIES

====================================================*/

.center{

text-align:center;

}

.mt-1{

margin-top:20px;

}

.mt-2{

margin-top:40px;

}

.mt-3{

margin-top:60px;

}

.mb-1{

margin-bottom:20px;

}

.mb-2{

margin-bottom:40px;

}

.flex{

display:flex;

}

.grid{

display:grid;

}

.hidden{

display:none;

}


/*==================================================

ANIMATIONS

====================================================*/

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}

@keyframes fade{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.04);

}

100%{

transform:scale(1);

}

}

@keyframes sparkle{

0%{

opacity:.3;

transform:scale(.9);

}

50%{

opacity:1;

transform:scale(1.1);

}

100%{

opacity:.3;

transform:scale(.9);

}

}

@keyframes rotateSlow{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}


/*==================================================

FLOATING STICKERS

====================================================*/

.sticker{

position:fixed;

pointer-events:none;

z-index:10;

animation:float 5s ease-in-out infinite;

}

.sticker-left{

left:20px;

top:35%;

}

.sticker-right{

right:20px;

top:60%;

}


/*==================================================

RESPONSIVE

====================================================*/

@media(max-width:900px){

h1{

font-size:50px;

}

h2{

font-size:34px;

}

.container{

width:94%;

}

}

@media(max-width:600px){

h1{

font-size:38px;

}

h2{

font-size:28px;

}

p{

font-size:16px;

}

}
}