html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}

html {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 300;
  margin: 0;
  height: 100%;
  display: flex;
  color: var(--text-color);
  background-color: var(--background-color);
  cursor: url('https://www.dawidroszczka.com/img/crosshair.png') 12 12, auto;

  /* CSS Variables */
  --menu-color: #542f28;
  --background-color: #fafafa;
  --sidebar-color: #fafafa;
  --topmenu-color: #fafafa;
  --text-color: #542f28;
}

textarea,input {font: inherit;  color: inherit;margin: 0;height: 100%;}

img {width: 100%;}
h1 {margin: -8px 0;font: 500 4.2rem 'Roboto', sans-serif;color: var(--text-color);}
h2 {margin: 0;}
ol, ul {list-style: none;}
li {display: block;padding: 0 0 2%;}
b {font-weight: 500;}
a {text-decoration: none;}
p {margin: 0;color: var(--text-color);text-align: justify;}

/* Text selection */
::-moz-selection { background-color: #542f28; color: #fff; }
::selection { background-color: #542f28; color: #fff; }

/* Custom Font */
@font-face {font-family: 'Title';
  src: url('https://www.dawidroszczka.com/assets/palladiourw_bol.woff2') format('woff2'),
       url('https://www.dawidroszczka.com/assets/palladiourw_bol.woff') format('woff');
}
@font-face {font-family: 'Roboto';font-style: normal;font-weight: 300;font-display: swap;src: url('https://www.dawidroszczka.com/assets/Roboto-Light.woff2') format('woff2');}

@font-face {font-family: 'Roboto';font-style: normal;font-weight: 400;font-display: swap;src: url('https://www.dawidroszczka.com/assets/Roboto-Regular.woff2') format('woff2');}

@font-face {font-family: 'Roboto';font-style: normal;font-weight: 500;font-display: swap;src: url('https://www.dawidroszczka.com/assets/Roboto-Medium.woff2') format('woff2');}

/* Scrollbar (hidden but styled for WebKit) */
::-webkit-scrollbar { width: 0; }
::-webkit-scrollbar-track { background: #fff; }
::-webkit-scrollbar-thumb { background: #542f28; }
::-webkit-scrollbar-thumb:hover { background: #542f28; }

/* Navigation */
.sidebar{display: flex;flex-direction: column;position: fixed;width: 17.5%;height:100%;top:0;left: 0;background-color: var(--sidebar-color);padding: 4.8rem;z-index:3;}
@media only screen and (max-width: 1920px){.sidebar{width: 20%;}}
@media only screen and (min-width: 1281px){.sidebar{display: flex !important;}}
@media only screen and (max-width: 1280px){.sidebar{display: none;padding: 2.4rem 4.8rem;}}
@media only screen and (max-width: 840px){.sidebar{width: 100%;padding: 2.4rem;}}
.logo-container{display: flex;width: 14.8rem;margin-bottom: 14.8rem;}
@media only screen and (max-width: 1280px){.logo-container{width: 12.4rem;margin-bottom: 0rem;}}
@media only screen and (max-width: 840px){.logo-container{width: 10.8rem;margin-bottom: 0rem;}}
@media only screen and (max-width: 480px){.logo-container{width: 9.6rem;margin-bottom: 0rem;}}
.logo{width: 14.8rem;cursor: url('https://www.dawidroszczka.com/img/crosshair-bold.png') 12 12, auto;}
@media only screen and (max-width: 1280px){.logo{width: 12.4rem;}}
@media only screen and (max-width: 840px){.logo{width: 10.8rem;}}
@media only screen and (max-width: 480px){.logo{width: 9.6rem;}}
.navigator{display: flex;flex-direction: column;}
.menu-item{display:flex;color: var(--text-color);text-decoration: none;text-align:left;align-items: center;cursor:url('https://www.dawidroszczka.com/img/crosshair-bold.png') 12 12, auto;;white-space:nowrap;height: 2.4rem;font-size: 16px;font-weight:300;letter-spacing: 0.05rem;}
.menu-item:hover{font-weight:400;color: var(--text-color);}
.menu-item:active{font-weight:400;color: var(--text-color);}
.menu-item#highlight{font-weight:500;color: var(--text-color);}
.menu-item#highlight:hover{font-weight:500;color: var(--text-color);}
.sidebar-bottom{display: flex;flex-direction: column;position: fixed;bottom: 0;left: 0;padding: 4.8rem;}
@media only screen and (max-width: 1280px){.sidebar-bottom{width: 100%;padding: 2.4rem 4.8rem;}}
@media only screen and (max-width: 840px){.sidebar-bottom{width: 100%;padding: 2.4rem;}}
.text-small {display:flex;color: var(--text-color);font-size: 11px;text-align: justify;text-justify: inter-word;text-decoration:none;line-height: 1.5;padding-top: 0.8rem;}

.show{display: block;}
.visually-hidden {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0,0,0,0);white-space: nowrap;border: 0;}
.size_18{font-size: 18px;}


.small-menu{display: none;flex-direction: column;width: 100%;height:100%;z-index:5;background-color: var(--sidebar-color);position: fixed;padding: 2.4rem;rem;}
@media only screen and (min-width: 1281px){.small-menu{display: none !important;}}
@media only screen and (max-width: 1280px){.small-menu{padding: 2.4rem 4.8rem;}}
@media only screen and (max-width: 840px){.small-menu{padding: 2.4rem;}}
@media only screen and (max-width: 480px){.small-menu{padding:1.6rem 2.4rem;display: none;}}
.top-menu-overlay{display: none;flex-direction: row;}
@media only screen and (max-width: 1280px){.top-menu-overlay{display: flex;padding-bottom: 4.8rem;}}


.overlay{display: none;position: fixed;width: 100%;height: 100%;z-index: 2;top: 0;bottom: 0;left: 0;right: 0; background-color: rgba(0,0,0,0.5);animation: opac 0.75s}@keyframes opac{from{opacity:0}to{opacity: 1}}
@media only screen and (min-width: 1281px){.overlay{display: none !important;}}
@media only screen and (max-width: 1280px){.overlay{display: none;}}


.top-menu:after, .top-menu:before{content: "";clear: both;}
.top-menu{display: none;position: fixed;width: 100%;top: 0;left: 0;z-index: 1; background-color: var(--topmenu-color);padding: 4.8rem;}
@media only screen and (max-width: 1280px){.top-menu{display: flex;padding: 2.4rem 4.8rem;}}
@media only screen and (max-width: 840px){.top-menu{padding: 2.4rem;}}
@media only screen and (max-width: 480px){.top-menu{padding: 1.6rem 2.4rem;}}
.hamburger{display: flex;margin-left: auto; margin-top: -4px;cursor: url('https://www.dawidroszczka.com/img/crosshair-bold.png') 12 12, auto;}
.exit-icon{display: flex;margin-left: auto; margin-top: 4px;color: var(--text-color);cursor: url('https://www.dawidroszczka.com/img/crosshair-bold.png') 12 12, auto;}

.main{display: flex;width: 100%;flex-direction: column;margin-left: 17.5%;background-color: var(--background-color);flex-grow: 1;justify-content: flex-start;align-items:flex-end; scroll-snap-type: y mandatory;}
@media only screen and (max-width: 1920px){.main{margin-left: 20%;}}
@media only screen and (max-width: 1280px){.main{padding-top: 9.6rem;margin-left: 0;align-items:center;}}
@media only screen and (max-width: 840px){.main{padding-top: 9.0rem;}}
@media only screen and (max-width: 480px){.main{padding-top: 6.8rem;}}

.title{color: var(--text-color);font-size: 24px;text-decoration:none;font-weight:500;padding-bottom: 1.8rem; font-family:'Title';text-align: left;}

.main-container{display:flex;width: 100%;flex-wrap: wrap-reverse;justify-content: center;flex-grow: 1;align-items:center;flex-direction: column;padding: 4.8rem;}
@media only screen and (max-width: 1280px){.main-container{padding: 2.4rem 4.8rem;flex-direction: row;}}
@media only screen and (max-width: 480px){.main-container{padding: 2.4rem;}}
.text-container{display:flex;max-width: 640px;margin-left: -17.5%;color: var(--text-color);flex-direction: column;font-size: 16px;line-height: 1.6;z-index: 3;padding-bottom: 2.4rem;padding-top: 2.4rem;align-items: center;text-align: justify;}
@media only screen and (max-width: 1920px){.text-container{margin-left: -20%;}}
@media only screen and (max-width: 1280px){.text-container{margin-left: 0rem;z-index: 0}}
@media only screen and (max-width: 840px){.text-container{font-size: 14px;}}
.photo-container{display:flex;max-width: 640px;margin-left: -17.5%;padding-bottom: 2.4rem;padding-top: 2.4rem;z-index: 3;}
@media only screen and (max-width: 1920px){.photo-container{margin-left: -20%;}}
@media only screen and (max-width: 1280px){.photo-container{margin-left: 0rem;z-index: 0}}
.mail{display:flex;color: var(--text-color);text-decoration: none;align-items: center;cursor:url('https://www.dawidroszczka.com/img/crosshair-bold.png') 12 12, auto;;white-space:nowrap;font-size: 16px;font-weight:300;letter-spacing: 0.05rem;padding-bottom: 2.4rem;}

/* Works */
.works{display: flex;width: 100%;flex-direction: row;flex-wrap: wrap;}
.work-container{display: flex;flex-direction: column;width: calc(100% / 3);align-items: center;}
@media only screen and (max-width: 1280px){.work-container{width: calc(100% / 2);}}
@media only screen and (max-width: 840px){.work-container{width:100%;}}
.project-post{display: flex;flex-direction: column;justify-content: center;margin: 4.8rem;align-items: flex-start;cursor: url('https://www.dawidroszczka.com/img/crosshair-bold.png') 12 12, auto;}
@media only screen and (max-width: 840px){.project-post{margin: 4.2rem;}}
.works .project-post a{cursor: url('https://www.dawidroszczka.com/img/crosshair-bold.png') 12 12, auto;}
.works .project-post img{width: auto;max-height: 16vw;object-fit: contain;padding:0;}
@media only screen and (max-width: 1280px){.works .project-post img{max-height: 27.5vw;}}
@media only screen and (max-width: 840px){.works .project-post img{max-height: 62vw;}}
.project-name {display:flex;flex-direction: column;height: 4.8rem;justify-content: flex-end;width: fit-content;}
@media only screen and (max-width: 840px){.project-name{height: 4.2rem;}}
.project-name .name{color: var(--text-color);text-decoration: none;text-align:left;cursor: url('https://www.dawidroszczka.com/img/crosshair-bold.png') 12 12, auto;white-space:nowrap;font-size: 16px;font-weight:300;letter-spacing: 0.05rem;opacity: 0;visibility: hidden;transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;}
@media only screen and (max-width: 1280px){.project-name .name{opacity: 1;visibility: visible;font-size: 14px;}}
.project-post:hover .name{opacity: 1;visibility: visible;}

/*Product*/
.product-container{display: flex;width: calc(100vw - 17.5vw - 9.6rem);flex-direction: row;flex-grow: 1;flex-wrap: wrap-reverse;margin: 0rem 4.8rem;padding: 4.8rem 0rem;scroll-behavior: smooth;}
@media only screen and (max-width: 1920px){.product-container{width: calc(100vw - 20vw - 9.6rem);}}
@media only screen and (max-width: 1280px){.product-container{width: 100%; padding-top: 0; padding-bottom: 0;}}
.product-text{display: flex;flex-direction: column;align-self: flex-start;padding: 4.8rem;max-width: 560px;width: 100%;}
@media only screen and (max-width: 480px){.product-text{padding: 2.4rem;}}
.product-img{display: flex;align-items: flex-end;padding:4.8rem;}
@media only screen and (max-width: 480px){.product-img{padding: 2.4rem;}}
.product-img img{display: flex;max-height: calc(100vh - 9.6rem - 9.6rem);object-fit: contain;}
.product-description{display: flex;flex-direction: column;align-self: flex-start;}
.product-name {display:flex;flex-direction: column;justify-content: flex-start;width: fit-content;padding-bottom: 1.8rem;}
.product-name .name{color: var(--text-color);text-decoration: none;text-align:left;font-size: 16px;font-weight:300;letter-spacing: 0.05rem;cursor: url('https://www.dawidroszczka.com/img/crosshair.png') 12 12, auto;}
@media only screen and (max-width: 840px){.product-name .name{font-size: 14px;}}
.product-description p{color: var(--text-color);text-decoration: none;font-size: 16px;font-weight:300;letter-spacing: 0.05rem;line-height: 1.6;}
@media only screen and (max-width: 840px){.product-description p{font-size: 14px;}}

.wrapped .product-text{flex-direction: row;flex-wrap: wrap;margin: auto;margin-bottom: 0;}
.wrapped .product-text .product-description{min-width: 300;max-width: 420px;}
.wrapped .product-img{margin: auto;}
.product-button{display: flex;padding-top: 4.8rem;flex-grow: 1;justify-content: flex-start;}
.wrapped .product-button{justify-content: flex-end;padding-left: 4.8rem;}
.button{display: block;width: fit-content;font-size: 16px;font-weight: 400;transition: 300ms cubic-bezier(.455,.03,.515,.955);color: var(--text-color);border: var(--text-color) solid 1px;vertical-align: middle;cursor: pointer;background-color: var(--background-color);border-radius: 0px;text-align: center;padding: 1.2rem 3.6rem;outline: none;align-self: flex-end;cursor: url('https://www.dawidroszczka.com/img/crosshair-bold.png') 12 12, auto;}
.button:hover{background-color: var(--text-color);color: var(--background-color);cursor: url('https://www.dawidroszczka.com/img/crosshair-bold.png') 12 12, auto;}

/* Justify Content */
.space-between{justify-content: space-between;}
.flex-start{justify-content: flex-start;}
.flex-end{justify-content: flex-end;}

/* Contact */
.copy_button{color: var(--text-color);cursor: url('https://www.dawidroszczka.com/img/crosshair-bold.png') 12 12,auto; padding-bottom:2.4rem; padding-left:2.4rem;}

/* Journal */
.journal{display: flex;width: 100%;flex-direction: row;flex-wrap: wrap;}
.journal-post{display: flex; width: calc(100% / 4);justify-content: center;padding: 4.8rem;}
@media only screen and (max-width: 1920px){.journal-post{width: calc(100% / 3);}}
@media only screen and (max-width: 1280px){.journal-post{width: calc(100% / 2);}}
@media only screen and (max-width: 840px){.journal-post{width:100%;}}
.journal .journal-post img{width: auto;max-height: 12.5vw;object-fit: contain;margin-bottom: 2.4rem;cursor: url('https://www.dawidroszczka.com/img/crosshair.png') 12 12, auto;}
@media only screen and (max-width: 1920px){.journal .journal-post img{max-height: 16vw;}}
@media only screen and (max-width: 1280px){.journal .journal-post img{max-height: 27.5vw;}}
@media only screen and (max-width: 840px){.journal .journal-post img{max-height: 60vw;}}

/* Newsletter */
.input-field {-webkit-align-items: center;align-items: center;background: var(--background-color);border-bottom: var(--text-color) 1px solid;display: -webkit-inline-flex;display: inline-flex;margin: .25rem 0;width: 100%;}
.input{background-color: var(--background-color);border: none;outline: none;}
.input:focus{outline: none;}
.input::placeholder {
  color: var(--text-color); /* Change this to your desired color */
  opacity: 0.4; /* Ensures full visibility */
}

/* Button */
button{background-color: inherit;border: 0; padding: 0;}
.newsletter-button-padding{padding-top: 2.4rem;}
.newsletter-button{display: block;width: fit-content;font-size: 16px;font-weight: 400;transition: 300ms cubic-bezier(.455,.03,.515,.955);color: var(--text-color);border: var(--text-color) solid 1px;vertical-align: middle;cursor: pointer;background-color: var(--background-color);border-radius: 0px;text-align: center;padding: 1.2rem 3.6rem;outline: none;align-self: flex-end;cursor: url('https://www.dawidroszczka.com/img/crosshair-bold.png') 12 12, auto;}
.newsletter-button:hover{background-color: var(--text-color);color: var(--background-color);cursor: url('https://www.dawidroszczka.com/img/crosshair-bold.png') 12 12, auto;}
.hide-loader{display: none;}