*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    background:#f7f2f0;
    background-image: url("https://i.pinimg.com/736x/87/53/c1/8753c1d4fe43ae2240b0a45765dd9376.jpg");
    background-size: 360px 250px;
    color:#8d7979;

    font-family:'IBM Plex Mono', monospace;

    padding:80px 30px;
}

/* PAGE */

.page{

    width:760px;

    margin:auto;
}

/* NAV */

.nav{

    display:flex;

    gap:18px;

    margin-bottom:45px;
}

.nav a{

    text-decoration:none;

    font-size:10px;

    color:#a28d8d;

    transition:0.2s;
}

.nav a:hover{

    opacity:0.6;
}

/* TITLE */

h1{

    font-family:'Cormorant Garamond', serif;

    font-size:58px;

    font-weight:300;

    margin-bottom:55px;

    color:#76495e;
}

/* LAYOUT */

.about-layout{

    display:flex;

    gap:40px;

    align-items:flex-start;
}

/* PHOTO */

.photo{

    width:220px;

    background:#faf8f7;

    padding:10px 10px 30px;

    transform:rotate(-2deg);

    box-shadow:
    0 10px 20px rgba(0,0,0,0.05);
}

.photo img{

    width:100%;

    display:block;

    margin-bottom:12px;
}

.photo span{

    font-family:'Cormorant Garamond', serif;

    font-size:17px;

    color:#8b7474;
}

/* INFO */

.info{

    flex:1;

    background:#f4ece8;

    border:1px solid #e2d5d1;

    padding:35px 35px 35px 55px;

    position:relative;

    box-shadow:
    0 8px 25px rgba(0,0,0,0.04);

    transform:rotate(1deg);
}

.info p{

    font-size:11px;

    line-height:2;

    max-width:360px;

    margin-bottom:30px;
}

/* DETAILS */

.details{

    display:flex;

    flex-direction:column;

    gap:22px;

    margin-bottom:35px;
}

.detail span{

    display:block;

    font-size:9px;

    letter-spacing:2px;

    text-transform:uppercase;

    color:#b79d9d;

    margin-bottom:10px;
}

.detail p{

    margin:0;

    font-size:11px;
}

/* SECRET */

.secret button{

    background:none;

    border:none;

    font-family:inherit;

    font-size:10px;

    color:#9d8484;

    cursor:pointer;

    transition:0.2s;
}

.secret button:hover{

    opacity:0.6;
}

#note{

    margin-top:14px;

    font-size:10px;

    color:#b89d9d;

    opacity:0;

    transition:0.4s;

    line-height:1.8;
}

/* HOLES */

.info::before{

    content:"";

    position:absolute;

    left:18px;
    top:0;

    width:14px;
    height:100%;

    background:
    radial-gradient(circle, #e6d8d3 4px, transparent 5px);

    background-size:14px 32px;

    background-repeat:repeat-y;
}

/* PAPER LINES */

.info::after{

    content:"";

    position:absolute;

    inset:0;

    background:
    repeating-linear-gradient(
        to bottom,
        transparent,
        transparent 27px,
        rgba(214,196,196,0.25) 28px
    );

    pointer-events:none;
}