html{
    margin: 0;
    background-color: var(--grey);
    scroll-behavior: smooth;
}
@font-face {
    font-family: 'TheoryOfSignature';
    src: url('Theory Of Signature.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
body{
    --grey: #f0f0f0;
    --black: black;
    --Dgrey: #a7a7a7;
    margin: 0;
    background-color: var(--grey);
    width: 100vw;
    overflow-x: hidden;
    position: relative;
    scroll-behavior:smooth;
    font-family: 'Helvetica', sans-serif;

    height: 100vh;
    display: flex;
    flex-direction: column;
}
@font-face {
  font-family: 'Helvetica';
  src: url('fonts/Helvetica.ttf') format('truetype');
}

@font-face {
  font-family: 'Helvetica Bold';
  src: url('fonts/Helvetica-Bold.ttf') format('truetype');
  font-weight: bold;
}

@font-face {
  font-family: 'Helvetica Bold Oblique';
  src: url('fonts/Helvetica-BoldOblique.ttf') format('truetype');
  font-style: oblique;
  font-weight: bold;
}

@font-face {
  font-family: 'Helvetica Oblique';
  src: url('fonts/Helvetica-Oblique.ttf') format('truetype');
  font-style: oblique;
}

@font-face {
  font-family: 'Helvetica Light';
  src: url('fonts/helvetica-light-587ebe5a59211.ttf') format('truetype');
  font-weight: 300;
}

@font-face {
  font-family: 'Helvetica Compressed';
  src: url('fonts/helvetica-compressed-5871d14b6903a.otf') format('opentype');
}

@font-face {
  font-family: 'Helvetica Rounded Bold';
  src: url('fonts/helvetica-rounded-bold-5871d05ead8e.otf') format('opentype');
  font-weight: bold;
}

*::selection{
    background-color: rgb(252, 63, 63);
    color: black;
}
header{
    position: relative;
    top: 0;
    left: 0;
    z-index: 10;
    /*mix-blend-mode: difference;*/
}
.desk h2{
    font-size: 1.033vw !important;
    font-family: 'Helvetica', sans-serif !important;
    line-height: 120%;
    font-weight: 800 !important;
    cursor: pointer;
}
nav{
    width: 100vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.094vw 4.167vw;
    box-sizing: border-box;
    margin: 0;
    background-color: var(--grey);
}
.desk :is(a:not(.links a), p){
    opacity: .5;
}
h1,h2,h3,h4,h5,h6,a,p{
    margin: 0;
    color: var(--black);
    text-decoration: none;
}
a{
    text-transform: uppercase;
    font-family: 'Helvetica', sans-serif;
    font-size: 1.033vw;
    color: var(--black);
    font-weight: 100;
}
nav h1{
    font-size: 20px;
    font-family: 'Helvetica', sans-serif;
    color: var(--black);
}
.links{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
}
.links a{
    text-transform: lowercase;
    font-weight: 800;
}
.fW{
    width: 100vw;
    height: fit-content;
}
.Intro{
    background-color: var(--grey);
    padding: 5.208vw 80px 20px 80px;
    box-sizing: border-box;
    display:flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    flex-direction: column;
    height: 100%;
}
h2{
    color: var(--black);
    font-size: 10vw;
    margin: 0;
    line-height: 90%;
    font-family: 'Helvetica', sans-serif;
    font-weight: 200;
    z-index: 2;
}
section h1{
    font-family: 'Helvetica', sans-serif;
    width: fit-content;
    text-align: center;
    box-sizing: border-box;
    font-size: 6.944vw;
    display: none;
}
.desc{
    width: 50%;
    flex-direction: column;
    display: flex;
    height: 90%;
    align-items: flex-start;
    justify-content: space-between;
    box-sizing: border-box;
    padding-bottom: 1.389vw;
    gap: 50px;
}
.nameIntro{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    padding-right: 0;
    width: 100%;
    height: 100%;
}
.ab{
    font-size: 1.033vw;
    opacity: .6;
    text-transform: uppercase;
    width: 100%;
}
.ddk{
    font-size: 1.111vw;
    color: #4B4B4B;
    text-transform: none;
    line-height: 130%;
}
.litdescec .ddk{
    font-size: 1.111vw;
    width: 322%;
}
.nameIntro0 section p{
    font-size: 1.111vw;
}
.litdesc{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16.667vw;
}
.aboutme .litdesc{
    display: none;
}
.Intro{
    padding-right: 0;
    padding-left: 4.444vw;
    padding-bottom: 0px;
    padding-top: 0;
    height: 100%;
}
.nameIntro img{
    width: 44%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    z-index: 1;

}
h2:nth-of-type(1){
    font-family:serif;
    font-weight: 100;
    font-family: 'TheoryOfSignature', cursive;
    font-size: 16vw;
}
h2:nth-of-type(2){   
    margin-top: -4.492vw;
    font-family: serif;
}
.scroll{
    color: var(--black);
    width: 60px;
    height: 60px;
    border-radius: 1000vw;
    border: 1px solid var(--Dgrey);
    display: flex;
    align-items: center;
    justify-content: center;
}
.aboutCont, .workcont{
    width:91%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-items: flex-start;
    padding-top: 1vw;
    padding-bottom: 2vw;
}
.aboutme, .myworks{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.aboutme{
    padding: 2.222vw 4.444vw;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: row;
    gap: 9.722vw;
}
:is(.aboutme, .litdescec) p{
    text-transform: none !important;
    color: #4B4B4B;
    line-height: 160%;
    font-size: 1.111vw;
}
.aboutme p a{
    font-weight: 600;
    text-transform: none;
    font-size: 1.111vw;
}
.page{
    width: 100%;
    display: flex;
    align-items: center;
    justify-items: flex-start;
}
p{
    font-family: 'Helvetica', sans-serif;
    font-weight: 400;
    font-size: 1.111vw;
    text-transform: uppercase;
}
.aboutCont h4{
    font-size: 6vw;
    font-weight: 100;
    margin-top: 4vw;
    width: 100%;
    text-align: center;
    font-family: 'TheoryOfSignature', cursive;
}

.aboutCont .desc{
    width: 50%;
    margin-top: 2vw;
    line-height: 150%;
}
.line{
    border-top: 1px solid var(--Dgrey);
}
.workcont{
    height: fit-content;
}
.myworks{
    justify-content: flex-start;
    height: fit-content;
}
.pol img{
    width: 100%;
}
.info{
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
}
.workName{
    font-size: 1.111vw;
    font-weight: 600;
}
.workPrice{
    font-size: 12px;
}
.workInfo{
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.pol{
    padding: 15px 15px 20px 15px;
    background-color: white;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 6px 6px 30px 1px rgba(128, 128, 128, 0.267);
}
.works{ 
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 40px;
    grid-row-gap: 50px;
}
.worksCont{
    width: 91%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    padding-bottom: 40px;
}
.more{
    border: 1px solid var(--Dgrey);
    padding: 10px 20px;
    border-radius: 100px;
    width: fit-content;
}
.mob{
    display: none;
    flex-direction: column;
}
.upp{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}
.low{
    display: flex;
}
.sec{
    width: 50% !important;
}
.nameIntro0{
    gap: 100px;
}
.aboutme .litdesc{
    display: none !important;
}
.pA{
    font-weight: 800;
    text-transform: uppercase !important;
    font-family: sans-serif;
    font-weight: 800 !important;
}
.shop{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 2.222vw 4.444vw;
    justify-content: space-between;
    width: 100%;
    gap: 2vw;
    box-sizing: border-box;
}
.gallery img{
    width: 100%;
    height: 35vw;
}
.gallery{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5vw;
    cursor: pointer;
}
.point{
    cursor: pointer;
}
.prints{
    width: 100vw;
    height: 90vh;
    padding: 2.222vw 4.444vw;
    box-sizing: border-box;
}
.imgslider{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.imgslider img{
    height: 100%;
}
.details{
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
}
.Pname{
    font-weight: 800;
}
.size{
    font-size: .9vw;
}
.nameSize{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .2vw;
}
.details a{
    text-transform: lowercase;
}
.imgslide{
    display: flex;
    height: 100%;
}
.prints{
    display: none;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 1vw;
    gap: 1vh;
}
.nvig{
    position: relative;
}

.ma{
    display: none;
}
.mobNav{
    display: none;
}
.close{
    position: absolute;
    right: 5vw;
    top: 5vw;
    cursor: pointer;
}
.close p{
    font-size: 1vw;
    text-transform: capitalize;
}
.grid{
    display: grid;
}
.hide{
    display: none;
}
@media screen and (max-width:500px) {
.pA{
    font-weight: 100;
    text-transform: uppercase !important;
    font-size: 2.8vw !important; 
}
    
.mob{
    display: flex;
    flex-direction: column;
    padding: 4vw 4.8vw;
}
.upp{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}
:is(.aboutme p, .ddk, .ab){
    font-size: 3.2vw !important;
}
.aboutme p a{
    font-size: 3.8vw;
}
.litdesc{
    display: flex;
}
.nameIntro0{
    gap: 0;
    padding-bottom: 24px;
    flex-direction: column-reverse !important;
}
.upp img{
    width: 24px;
    transition: .4s ease-in-out;
}
.low{
    flex-direction: row;
    display: flex;
}
.desk{
    display: none;
}
.works{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.navFull{
    height: 100vh;
}
.low{
    height: 100%;
    gap: 40px;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    display: none;
    opacity: 0;
    transition: .4s ease-in-out;
}
.low :is(a,p){
    font-size: 5vw;
    font-weight: 500;
}
.low :is(a,p):not(.links a){
    opacity: .5;
    font-size: 4vw;
}
.links a{
    font-weight: 800;
}
.navDis{
    display: flex;
}
.nameIntro{
    height: 100%;
}
.aboutCont .desc{
    width: 100%;
}
h2:nth-of-type(1){
    font-size: 60vw;
}
h2:nth-of-type(2){
    font-size: 32vw;
    margin-top: -20vw;
    width: 100%;
    text-align: center;
}
.nameIntro img{
    width: 100%;
}
.litdesc{
    flex-direction: column;
    gap: 10px;
    width: 100%;
}
.aboutme{
    padding-top: 10px !important;
    padding-bottom: 24px !important;
    gap: 10px;
    height: fit-content;
        justify-content: flex-start;
}
.aboutme .litdesc{
    display: flex !important;
}
.desc .litdesc{
    display: none;
}
.desc{
    width: 100%;
    height: fit-content;
    gap: 0;
}
section h1{
    font-size: 13vw;
    width: 100%;
    text-align: center;
}
.Intro{height: fit-content;}
.ddk{
    width: 100%;
    line-height: 160%;
}
:is(.Intro, .aboutme){
    flex-direction: column;
    padding: 0 24px;
}
.nameIntro{
    flex-direction: column;
}
.aboutCont, .workcont{
    padding-bottom: 10vw;
}
.close p{
    font-size: 4vw;
    text-transform: capitalize;
}
.aboutCont h4{
    font-size: 20vw;
    text-align: left;
}
.menRot{
    transform: rotate(45deg);
}
.quo{
    width: 100%;
    padding: 0 1.111vw ;
    box-sizing: border-box;
}
.quo h4{
    font-size: 4vw !important;
}
.close{
    position: relative;
    right: auto;
    top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.contLinks{
    padding: 60px 1.111vw 30px 1.111vw !important;
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 20px !important;
}
.lnk a{
    font-size: 4vw !important;
}
.litdescec{
    display: flex !important;
    gap: 10px !important;
    padding-top: 10px;
}
.sec{
    width: 100% !important;
}
.shop{
    display: flex;
    flex-direction: column;
    gap: 3vw;
}
.gallery img{
    height: 100vw;
}
.gallery p{
    font-size: 5vw;
}
.imgslide{
    width: 100%;
}
.imgslider img {
    width: 100%;
    height: auto !important;
}
.imgslider{
    flex-direction: column;
    height: 75%;
}
.mobNav{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.point{
    display: none;
}
.mobNav .point{
    display: flex;
}
.details{
    flex-direction: column;
}
.details :is(p,a){
    font-size: 4.111vw;
}
.details{
    gap: 5vw;
}
.nameSize{
    align-items: center;
    gap: 2vw;
}
.details a{
    display: none;
}
.ma{
    display: block !important;
}
.grid{
    display: flex;
}
.hide{
    display: none;
}
.ddk{
    width: 100% !important;
}
}
.contact{
    width: 100vw;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.contact .line{
    width: 91%;
}
.contact h4{
    font-size: 1.4vw;
    font-family: 'Helvetica', sans-serif;
    font-weight: 600;
    line-height: 100%;
    opacity: .3;
    line-height: 140%;
}
.contLinks{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 80px 80px 10px 80px;
    box-sizing: border-box;
}
.lnk p{
    font-weight: 800;
    text-transform: none;
    font-size: 13px;
}
.lnk a{
    text-transform: none;
}

.focus{
    font-weight: 800;
    color: black !important;
    opacity: 1 !important;
}
.quo{
    text-align: center;
}
.desc section{
    flex-direction: column;
    padding: 0;
    gap: 0;
}
.litdescec{
    gap: 40px;
}