/* ==========================================
   OUR STORY ❤️
   RESPONSIVE DESIGN
========================================== */

/* ===============================
Large Tablets
================================ */

@media screen and (max-width:1200px){

.card{

max-width:850px;

padding:40px;

}

.title{

font-size:75px;

}

.main-title{

font-size:90px;

}

.subtitle{

font-size:22px;

}

}

/* ===============================
Tablets
================================ */

@media screen and (max-width:992px){

.page{

padding:20px;

}

.card{

padding:35px;

}

.title{

font-size:65px;

}

.main-title{

font-size:75px;

}

.nickname{

font-size:30px;

}

.subtitle{

font-size:20px;

line-height:1.8;

}

.letter-text{

font-size:18px;

line-height:1.9;

}

#counter{

grid-template-columns:repeat(2,1fr);

gap:20px;

}

.time-box{

padding:20px;

}

.time-box span{

font-size:40px;

}

.photo-frame{

width:220px;

height:220px;

}

}

/* ===============================
Mobile
================================ */

@media screen and (max-width:768px){

body{

overflow-x:hidden;

}

.page{

padding:18px;

}

.card{

width:100%;

padding:25px;

border-radius:25px;

}

.title{

font-size:48px;

line-height:1.2;

}

.main-title{

font-size:58px;

}

.nickname{

font-size:24px;

}

.small-title{

font-size:16px;

letter-spacing:2px;

}

.subtitle{

font-size:17px;

line-height:1.8;

}

.letter-text{

font-size:17px;

line-height:1.8;

text-align:center;

}

button{

width:100%;

font-size:18px;

padding:16px;

}

.proposal-buttons{

flex-direction:column;

gap:20px;

}

#counter{

grid-template-columns:repeat(2,1fr);

gap:15px;

}

.time-box{

padding:15px;

}

.time-box span{

font-size:32px;

}

.time-box p{

font-size:13px;

}

.photo-frame{

width:170px;

height:170px;

}

.big-heart{

font-size:90px;

}

.ending-heart{

font-size:90px;

}

.music-btn{

width:50px;

height:50px;

font-size:22px;

right:15px;

top:15px;

}

}

/* ===============================
Small Phones
================================ */

@media screen and (max-width:480px){

.title{

font-size:38px;

}

.main-title{

font-size:46px;

}

.subtitle{

font-size:16px;

}

.letter-text{

font-size:15px;

}

.card{

padding:18px;

}

#counter{

grid-template-columns:1fr 1fr;

gap:10px;

}

.time-box{

padding:12px;

}

.time-box span{

font-size:26px;

}

.time-box p{

font-size:11px;

}

.loader-heart{

font-size:70px;

}

.loader-box h1{

font-size:40px;

}

.click{

font-size:14px;

}

button{

font-size:16px;

}

}

/* ===============================
Landscape Phones
================================ */

@media screen and (max-height:600px){

.page{

padding:15px;

}

.card{

padding:20px;

}

.title{

font-size:42px;

}

.subtitle{

font-size:15px;

}

button{

padding:12px 20px;

}

}