/* =====================================
   I MADE *****
   LIVE DEVELOPMENT JOURNAL
   DAILY ENTRY
===================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Cormorant+Garamond:wght@300;400;500;600&display=swap');


/* =====================================
   GENERAL
===================================== */

*{

margin:0;
padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

margin:0;
padding:0;

background:#080a0f;

color:#e9e1d3;

font-family:"Cormorant Garamond",serif;

overflow-x:hidden;

line-height:1.8;

}


/* =====================================
   ATMOSPHERIC BACKGROUND
===================================== */

body::before{

content:"";

position:fixed;

inset:0;

background:

linear-gradient(

rgba(7,9,14,.82),

rgba(7,9,14,.94)

),

url("../../../../project-three-background.jpg");

background-size:cover;

background-position:center;

background-repeat:no-repeat;

opacity:.75;

z-index:-2;

}


/* =====================================
   BACK LINK
===================================== */

.day-header{

max-width:1100px;

margin:0 auto;

padding:45px 35px 0;

}

.back-link{

font-family:"Cinzel",serif;

font-size:17px;

letter-spacing:.7px;

color:#d8c7ff;

text-decoration:none;

transition:.3s;

}

.back-link:hover{

color:#ffffff;

text-shadow:

0 0 12px rgba(216,199,255,.5);

}


/* =====================================
   DAY INTRO
===================================== */

.day-intro{

max-width:900px;

margin:0 auto;

padding:70px 30px 40px;

text-align:center;

}

.journal-label{

font-family:"Cinzel",serif;

font-size:13px;

letter-spacing:4px;

color:#9f91b9;

margin-bottom:22px;

}

.day-intro h1{

font-family:"Cinzel",serif;

font-size:52px;

font-weight:500;

letter-spacing:8px;

color:#d8c7ff;

margin-bottom:18px;

}

.day-subtitle{

font-size:24px;

color:#d7cfdd;

}


/* =====================================
   STAIRCASE SECTION
===================================== */

.staircase-section{

max-width:1100px;

margin:0 auto;

padding:40px 30px 100px;

}

.staircase-intro{

text-align:center;

max-width:600px;

margin:0 auto 70px;

color:#aaa4b4;

font-size:20px;

line-height:1.8;

}

.staircase-intro p:first-child{

margin-bottom:5px;

font-style:italic;

}


/* =====================================
   STAIRCASE
===================================== */

.staircase{

position:relative;

width:900px;

max-width:100%;

height:720px;

margin:0 auto;

}


/* =====================================
   DOOR
===================================== */

.door{

position:absolute;

top:10px;

left:50%;

transform:translateX(-50%);

width:190px;

height:260px;

display:flex;

justify-content:center;

align-items:flex-end;

z-index:5;

}

.door-light{

position:absolute;

inset:-80px -100px -40px;

background:

radial-gradient(

ellipse at center,

rgba(216,199,255,.35),

rgba(216,199,255,.08) 40%,

transparent 72%

);

filter:blur(18px);

}

.door-frame{

position:relative;

width:155px;

height:225px;

border:1px solid rgba(216,199,255,.55);

background:

linear-gradient(

180deg,

rgba(216,199,255,.17),

rgba(216,199,255,.04)

);

box-shadow:

0 0 35px rgba(216,199,255,.15),

inset 0 0 35px rgba(216,199,255,.08);

display:flex;

align-items:center;

justify-content:center;

}

.door-frame span{

font-family:"Cinzel",serif;

font-size:10px;

letter-spacing:3px;

color:#d8c7ff;

writing-mode:vertical-rl;

transform:rotate(180deg);

}


/* =====================================
   STAIR STEPS
===================================== */

.stair-step{

position:absolute;

width:650px;

height:115px;

left:50%;

background:

linear-gradient(

135deg,

rgba(27,28,38,.98),

rgba(14,15,21,.98)

);

border:1px solid rgba(216,199,255,.16);

box-shadow:

0 20px 45px rgba(0,0,0,.45);

transition:.35s;

}

.stair-step:hover{

border-color:rgba(216,199,255,.5);

box-shadow:

0 20px 50px rgba(0,0,0,.55),

0 0 25px rgba(216,199,255,.05);

}


/* =====================================
   STEP POSITIONS
===================================== */

.step-four{

top:210px;

transform:translateX(-45%);

}

.step-three{

top:325px;

transform:translateX(-50%);

}

.step-two{

top:440px;

transform:translateX(-55%);

}

.step-one{

top:555px;

transform:translateX(-60%);

}


/* =====================================
   STEP CONTENT
===================================== */

.step-content{

padding:22px 35px;

}

.event-time{

display:block;

font-family:"Cinzel",serif;

font-size:12px;

letter-spacing:3px;

color:#8f829f;

margin-bottom:5px;

}

.step-content h2{

font-family:"Cinzel",serif;

font-size:20px;

font-weight:500;

letter-spacing:3px;

color:#d8c7ff;

margin-bottom:5px;

}

.step-content p{

font-size:18px;

color:#bdb6c5;

line-height:1.5;

}


/* =====================================
   SUMMARY
===================================== */

.day-summary{

max-width:700px;

margin:0 auto 100px;

padding:0 30px;

text-align:center;

}

.summary-line{

width:100px;

height:1px;

margin:0 auto 35px;

background:rgba(216,199,255,.35);

}

.summary-label{

font-family:"Cinzel",serif;

font-size:12px;

letter-spacing:4px;

color:#9f91b9;

margin-bottom:18px;

}

.day-summary h2{

font-size:32px;

font-weight:400;

color:#d8c7ff;

margin-bottom:20px;

}

.summary-text{

font-size:21px;

line-height:1.85;

color:#c8c1cd;

}

.summary-text em{

color:#d8c7ff;

}


/* =====================================
   NAVIGATION
===================================== */

.day-navigation{

max-width:760px;

margin:0 auto 90px;

padding:0 30px;

display:flex;

justify-content:space-between;

align-items:center;

font-family:"Cinzel",serif;

font-size:15px;

letter-spacing:2px;

}

.day-navigation a{

color:#d8c7ff;

text-decoration:none;

transition:.3s;

}

.day-navigation a:hover{

color:#ffffff;

text-shadow:

0 0 10px rgba(216,199,255,.5);

}


/* =====================================
   FOOTER
===================================== */

.legal-footer{

padding:0 30px 55px;

text-align:center;

}

.copyright{

color:rgba(233,225,211,.42);

font-size:17px;

letter-spacing:1px;

}


/* =====================================
   SELECTION
===================================== */

::selection{

background:rgba(216,199,255,.35);

color:#ffffff;

}


/* =====================================
   SCROLLBAR
===================================== */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#11141b;

}

::-webkit-scrollbar-thumb{

background:#5d5376;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#80729d;

}


/* =====================================
   TABLET
===================================== */

@media (max-width:900px){

.day-intro{

padding-top:55px;

}

.day-intro h1{

font-size:40px;

letter-spacing:5px;

}

.day-subtitle{

font-size:21px;

}

.staircase{

height:650px;

}

.stair-step{

width:570px;

}

.step-four{

transform:translateX(-45%);

}

.step-three{

transform:translateX(-50%);

}

.step-two{

transform:translateX(-55%);

}

.step-one{

transform:translateX(-60%);

}

}


/* =====================================
   MOBILE
===================================== */

@media (max-width:600px){

.day-header{

padding:30px 18px 0;

}

.back-link{

font-size:14px;

}

.day-intro{

padding:45px 18px 25px;

}

.journal-label{

font-size:10px;

letter-spacing:3px;

}

.day-intro h1{

font-size:29px;

letter-spacing:3px;

}

.day-subtitle{

font-size:19px;

}

.staircase-section{

padding:

25px 15px 70px;

}

.staircase-intro{

font-size:18px;

margin-bottom:45px;

}

.staircase{

height:650px;

}

.door{

width:130px;

height:190px;

top:5px;

}

.door-frame{

width:110px;

height:165px;

}

.door-frame span{

font-size:8px;

letter-spacing:2px;

}

.stair-step{

width:90%;

height:125px;

left:50%;

}

.step-four{

top:155px;

transform:translateX(-45%);

}

.step-three{

top:280px;

transform:translateX(-50%);

}

.step-two{

top:405px;

transform:translateX(-55%);

}

.step-one{

top:530px;

transform:translateX(-60%);

}

.step-content{

padding:20px 22px;

}

.step-content h2{

font-size:16px;

letter-spacing:2px;

}

.step-content p{

font-size:16px;

}

.event-time{

font-size:10px;

}

.day-summary{

margin-bottom:70px;

}

.day-summary h2{

font-size:27px;

}

.summary-text{

font-size:19px;

}

.day-navigation{

font-size:11px;

letter-spacing:1px;

padding:0 18px;

}

}