:root{

    --color-gold:#FFAE00;
    --color-pink-light:#F3D8D1;
    --color-pink:#FFA4A4;
    --color-red:#DF4C51;
    --color-red-hover:#ff8186;
    --color-red-active:#ffb2b4;

    --font-title:"Jacques Francois Shadow", serif;
    --font-body:"Lancelot", serif;

    --content-opacity:.8;

    --canvas-width:1440px;
    --canvas-height:1024px;

}

*,
*::before,
*::after{

    box-sizing:border-box;

}

html, body{

    height:100%;
    margin:0;

}

body{

    background:#0B100D url("assets/textures/background.png");
    background-size:cover;
    background-repeat:no-repeat;
    overflow:hidden;

}

#stage{

    position:relative;

    width:100%;
    height:100vh;

    display:flex;
    align-items:center;
    justify-content:center;

}

#website{

    position:relative;

    width:var(--canvas-width);
    height:var(--canvas-height);

    flex-shrink:0;

    transform-origin:center center;

}

#website img{

    position:absolute;
    display:block;

}


#nameText,
#aboutText,
#expertiseText,
#projectSectionText,
.project-card,
#journalText,
#contactText{

    opacity:var(--content-opacity);

}

/* Общая рамка */

#ornament{

    left:37px;
    top:39px;
    width:1375px;
    height:934px;

}

/* Верх */

#nameSection{

    left:185px;
    top:73px;
    width:391px;
    height:140px;

}

/* About */

#aboutSection{

    left:185px;
    top:234px;
    width:391px;
    height:478px;

}

/* Expertise */

#expertiseSection{

    left:185px;
    top:733px;
    width:391px;
    height:206px;

}

/* Верхняя большая панель */

#projectsSection{

    left:597px;
    top:73px;
    width:781px;
    height:465px;

}

/* Карточка 1 */

#project1{

    left:601px;
    top:125px;
    width:188px;
    height:409px;

}

/* Карточка 2 */

#project2{

    left:796px;
    top:125px;
    width:188px;
    height:409px;

}

/* Карточка 3 */

#project3{

    left:992px;
    top:125px;
    width:188px;
    height:409px;

}

/* Карточка 4 */

#project4{

    left:1186px;
    top:125px;
    width:188px;
    height:409px;

}

/* Journal */

#journalSection{

    left:597px;
    top:559px;
    width:373px;
    height:380px;

}

/* Contact */

#contactSection{

    left:991px;
    top:635px;
    width:388px;
    height:304px;

}

#aboutText{

    position:absolute;

    left:185px;
    top:234px;

    width:391px;
    height:478px;

}

#aboutText h2{

    position:absolute;

    left:150px;
    top:46px;

    margin:0;

    width:92px;

    text-align:center;

    font-family:var(--font-title);
    font-size:20px;
    font-weight:normal;

    color:var(--color-gold);

}

#aboutText p{

    position:absolute;

    left:55px;
    top:115px;

    width:280px;

    margin:0;

    text-align:center;

    font-family:var(--font-body);
    font-size:20px;
    line-height:22px;

    color:var(--color-pink-light);

}

/* ===========================
   NAME SECTION
=========================== */

#nameText{

    position:absolute;

    left:185px;
    top:73px;

    width:391px;
    height:140px;

}

#nameText h1{

    position:absolute;

    left:15px;
    top:8px;

    width:358px;

    margin:0;

    font-family:var(--font-title);
    font-size:32px;
    font-weight:normal;

    color:var(--color-gold);

    line-height:44px;

}

#nameText h2{

    position:absolute;

    left:15px;
    top:42px;

    width:358px;

    margin:0;

    font-family:var(--font-title);
    font-size:16px;
    font-weight:normal;

    color:var(--color-gold);

    line-height:21px;

}

#nameText .specialties{

    position:absolute;

    left:4px;
    top:80px;

    width:383px;
    height:32px;

    display:flex;

    justify-content:space-evenly;

    align-items:center;

}

#nameText .specialties span{

    font-family:var(--font-title);

    font-size:16px;

    color:var(--color-pink);
}


/* ===========================
   EXPERTISE
=========================== */

#expertiseText{

    position:absolute;

    left:185px;
    top:733px;

    width:391px;
    height:206px;

}

#expertiseText h2{

    position:absolute;

    left:150px;
    top:10px;

    width:92px;

    margin:0;

    text-align:center;

    font-family:var(--font-title);
    font-size:20px;
    font-weight:normal;

    color:var(--color-gold);
}

#expertiseText p{

    position:absolute;

    left:0;
    top:49px;

    width:391px;

    margin:0;

    text-align:center;

    font-family:var(--font-body);
    font-size:20px;
    line-height:22px;

    color:var(--color-pink-light);
}

/* ===========================
   PROJECT SECTION
=========================== */

#projectSectionText{

    position:absolute;

    left:597px;
    top:73px;

    width:781px;
    height:465px;

}

#projectSectionText h2{

    position:absolute;

    left:315px;
    top:10px;

    width:161px;

    margin:0;

    text-align:center;

    font-family:var(--font-title);
    font-size:20px;
    font-weight:normal;

    color:var(--color-gold);
}


/* PNG карточек */

#project1Image{

    position:absolute;

    left:601px;
    top:125px;

    width:188px;
    height:409px;

}

#project2Image{

    position:absolute;

    left:796px;
    top:125px;

    width:188px;
    height:409px;

}

#project3Image{

    position:absolute;

    left:992px;
    top:125px;

    width:188px;
    height:409px;

}

#project4Image{

    position:absolute;

    left:1186px;
    top:125px;

    width:188px;
    height:409px;

}


/* Общий стиль карточек */

.project-card{

    position:absolute;

    width:188px;
    height:409px;

}

.project-card h3{

    position:absolute;

    left:13px;
    top:165px;

    width:163px;

    margin:0;

    text-align:center;

    font-family:var(--font-body);
    font-size:20px;
    line-height:22px;
    font-weight:normal;

    color:var(--color-pink);
}

.project-card p{

    position:absolute;

    left:13px;
    top:225px;

    width:163px;
    height:122px;

    margin:0;

    text-align:center;

    font-family:var(--font-body);
    font-size:16px;
    line-height:18px;

    color:var(--color-pink-light);
}

.project-card a{

    position:absolute;

    left:0;
    top:369px;

    width:187px;

    text-align:center;

    text-decoration:none;

    font-family:var(--font-body);

    font-size:20px;

    color:var(--color-red);
    transition:color .2s;

}

.project-card a:hover{

    color:var(--color-red-hover);
}

.project-card a:active{

    color:var(--color-red-active);
}

/* ===========================
   JOURNAL
=========================== */

#journalText{

    position:absolute;

    left:597px;
    top:559px;

    width:373px;
    height:380px;

}

#journalText h2{

    position:absolute;

    left:4px;
    top:12px;

    width:365px;

    margin:0;

    text-align:center;

    font-family:var(--font-title);
    font-size:20px;
    font-weight:normal;

    color:var(--color-gold);
}

#journalText p{

    position:absolute;

    left:104px;
    top:44px;

    width:165px;
    height:80px;

    margin:0;

    text-align:center;

    font-family:var(--font-body);
    font-size:20px;
    line-height:22px;

    color:var(--color-pink-light);
}

#journalText a{

    position:absolute;

    left:0;
    top:337px;

    width:366px;

    text-align:center;

    text-decoration:none;

    font-family:var(--font-body);
    font-size:20px;

    color:var(--color-red);
    transition:color .18s;

}

#journalText a:hover{

    color:var(--color-red-hover);
}

#journalText a:active{

    color:var(--color-red-active);
}

/* ===========================
   CONTACT
=========================== */

#contactText{

    position:absolute;

    left:991px;
    top:635px;

    width:388px;
    height:304px;

}

#contactText h2{

    position:absolute;

    left:2px;
    top:131px;

    width:386px;

    margin:0;

    text-align:center;

    font-family:var(--font-title);
    font-size:20px;
    font-weight:normal;

    color:var(--color-gold);
}

#contactText p{

    position:absolute;

    left:0;
    top:151px;

    width:388px;
    height:153px;

    margin:40;

    text-align:center;

    font-family:var(--font-body);
    font-size:20px;
    line-height:28px;

    color:var(--color-pink-light);
}

#contactText a{

    color:var(--color-pink-light);
    text-decoration:none;

    transition:color .18s ease;

}

#contactText a:hover{

    color:#ffffff;
}

#contactText a:active{

    color:var(--color-pink-light);
}