/* Super Large Co. by Karim Dahou */

@font-face {
  font-family: InterVariable;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/InterVariable.woff2") format("woff2");
}
@font-face {
  font-family: InterVariable;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/InterVariable-Italic.woff2") format("woff2");
}

:root {
  --font-fallback: Helvetica, Arial, sans-serif;
}

html * {
    font-family: "InterVariable", var(--font-fallback);
    font-size: 18px;
    line-height: 28px;
}

body {
    background-color: #15181F;
    color: #FAFBFC;
}

h1 {
    font-size: 56px;
    line-height: 56px;
    font-weight: 800;
    margin: 0;
}

h2 {
    font-size: 24px;
    font-weight: 300;
}

.description h2 {
    margin: 12px 0 48px;
}

h3 {
    font-size: 16px;
    font-weight: 300;
}

p {
    font-weight: 300;
    color: #CBD9E7;
}

a {
    color: #9BB8F4;
}

a:hover {
    color: #B6CCFB;
}

a:visited {
    color: #9BB8F4;
}


/* Images styles */

figure img {
    border-radius: 24px;
    box-shadow: 0 2px 1px rgba(0, 0, 0, 0.08), 0 4px 2px rgba(0, 0, 0, 0.08), 0 8px 4px rgba(0, 0, 0, 0.08), 0 16px 8px rgba(0, 0, 0, 0.08), 0 32px 16px rgba(0, 0, 0, 0.08);
}

picture {
    line-height: 0;
}

figure {
    margin: inherit;
	transition: scale 0.40s ease;
}

figure a {
    text-decoration: none;
}

.projects figure:hover {
    scale: 101%;
	transition: scale 0.40s ease;
}


figcaption {
    position: relative;
    display: block;
    margin-top: -94px;
    z-index: 3;
    opacity: 0;
	background-color: rgb(0, 0, 0, 0.8);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    padding: 16px;
}

figcaption h1 {
    margin: 0;
    font-size: 18px;
    line-height: 36px;
    color: #FAFBFC;
	font-weight: 300;
}

figcaption p {
    margin: 0;
    font-size: 15px;
    line-height: 20px;
    color: #CBD9E7;
}

.project-imgs:hover figcaption {
    opacity: 1;
    transition: opacity 0.40s ease;
}


/* Header styles */

header {
    display: block;
	background-image: radial-gradient(80% 100% at 50% 0%, #1C2129 0%, #15181F 100%);
    height: 120px;
	/*
	background: radial-gradient(466.36% 466.36% at 52.99% -376.36%, #9BB8F4 0%, #15181F 100%);
    background-color: #15181F;
    background-image: linear-gradient(45deg, #f44141, #f4c842);
    animation: hue 15s infinite linear;
    */
}

.header-container {
    display: block;
    max-width: 1280px;
	padding: 24px 40px;
    margin: 0 auto;
}

.header-container-small {
    display: block;
    max-width: 1280px;
	padding: 24px;
    margin: 0 auto;
}
	
.small_header {
    display: block;
    height: 120px;
    background-color: #15181F;
    background: none;
    /*
    background-image: linear-gradient(45deg, #f44141, #f4c842);
    animation: hue 15s infinite linear;
    */
}

@keyframes hue {
    0% {
        filter: hue-rotate(0deg)
    }
    100% {
        filter: hue-rotate(-360deg);
    }
}

.logo img {
    max-width:100%;
}


/* Breadcrumbs */

.project_nav {
    display: flex;
    max-width: 1280px;
    padding: 20px 40px;
    margin: 0 auto;
}

.project_nav a {
    text-decoration: none;
}

.arrow-left {
    margin-right: 4px;
}

.project_previous {
    background-color: #EDF6FE;
    padding: 10px 24px 10px 20px;
    border-radius: 24px;
    color: #15181F;
    margin-right: 12px;
	transition: transform 0.2s ease-out;
}

.project_next {
    background-color: #EDF6FE;
    padding: 10px 20px 10px 24px;
    border-radius: 24px;
    color: #15181F;
	transition: transform 0.2s ease-out;
}

.project_previous:hover {
    background-color: #CBD9E7;
}

.project_next:hover {
    background-color: #CBD9E7;
}

.project_next:active {
    transform: scale(.96);
}

.project_previous:active {
    transform: scale(.96);
}

/* Home content styles */

.home-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    max-width: 1280px;
    padding: 40px 40px;
    margin: 0 auto;
}

.intro {
    grid-area: 1 / 1 / 2 / 3;
    padding: 0;
}

.projects {
    grid-area: 2 / 1 / 3 / 4;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    padding: 40px 0;
}

.projects > .project1 {
    grid-area: 1 / 1 / 3 / 3;
}

.projects > .project2 {
    grid-area: 1 / 3 / 2 / 4;
}

.projects > .project3 {
    grid-area: 2 / 3 / 3 / 4;
}


/* Project page main content*/

.project {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto auto auto auto auto auto;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    max-width: 1280px;
    padding: 40px 40px;
    margin: 0 auto;
}

.description {
    grid-area: 1 / 1 / 2 / 3;
    padding: 0 0 40px 0;
}

.imageset1 {
    grid-area: 2 / 1 / 3 / 4;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    padding: 40px 0;
}

.imageset1 > .picture1 {
    grid-area: 1 / 1 / 3 / 3;
}

.imageset1 > .picture2 {
    grid-area: 1 / 3 / 2 / 4;
}

.imageset1 > .picture3 {
    grid-area: 2 / 3 / 3 / 4;
}

.process {
    grid-area: 3 / 1 / 4 / 3;
    padding: 40px 0;
}

.imageset2 {
    grid-area: 4 / 1 / 5 / 4;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    padding: 40px 0;
}

.imageset2 > .picture1 {
    grid-area: 1 / 1 / 2 / 4;
}

.conclusion {
    grid-area: 5 / 1 / 6 / 3;
    padding: 40px 0;
}

.imageset3 {
    grid-area: 6 / 1 / 7 / 4;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    padding: 40px 0;
}

.imageset3 > .picture1 {
    grid-area: 1 / 1;
}

.imageset3 > .picture2 {
    grid-area: 1 / 2;
}

.extra-info {
    grid-area: 7 / 1 / 8 / 3;
    padding: 40px 0;
}


/* Footer styles */

footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    max-width: 1280px;
    padding: 80px 40px 0;
    margin: 0 auto;
}

footer h1 {
    font-size: 16px;
    font-weight: 300;
}

footer a {
    text-decoration: none;
}

footer ul {
    list-style: none;
    margin-left: -40px;
}

footer li {
    margin: 12px 0;
}

footer > .contacts {
    grid-area: 1 / 3 / 2 / 4;
}

footer > .side-projects {
    grid-area: 1 / 1 / 2 / 3;
}

.side-projects-card {
    display: flex;
    max-width: 320px;
    padding: 20px;
    align-items: center;
    gap: 12px;
    border-radius: 20px;
	border: solid 1px #3A4151;
    background-color: #292F3C;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s ease-out;
}

.side-projects-card:hover {
    background-color: #3A4151;
	transition: background-color 0.40s ease;
}

.side-projects-card:active {
    transform: scale(.98);
}

footer > .copyright {
    grid-area: 2 / 1 / 3 / 4;
    padding: 24px 0;
}

.copyright p {
    font-size: 16px;
}



/* Media queries for mobile devices*/

@media only screen and (max-width: 480px) {
    /* Main content media queries */
	
	header {
	    height: 120px;
	}
	.header-container {
		padding: 24px; 
	}
    .home-content {
        padding: 40px 24px;
    }
    .intro {
        grid-area: 1 / 1 / 2 / 4;
    }
	.project {
	    
	    padding: 40px 24px;
	    
	}
    .projects {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
    }
    .projects > .project1 {
        grid-area: 1 / 1 / 2 / 2;
    }
    .projects > .project2 {
        grid-area: 2 / 1 / 3 / 2;
    }
    .projects > .project3 {
        grid-area: 3 / 1 / 4 / 2;
    }
    /* Project page main content*/
    .imageset1 {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
    }
    .imageset1 > .picture1 {
        grid-area: 1 / 1 / 2 / 2;
    }
    .imageset1 > .picture2 {
        grid-area: 2 / 1 / 3 / 2;
    }
    .imageset1 > .picture3 {
        grid-area: 3 / 1 / 4 / 2;
    }
    .imageset2 {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }
    .imageset2 > .picture1 {
        grid-area: 1 / 1 / 2 / 4;
    }
    .imageset3 {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
    }
    .imageset3 > .picture1 {
        grid-area: 1 / 1 / 2 / 4;
    }
    .imageset3 > .picture2 {
        grid-area: 2 / 1 / 3 / 4;
    }
    .description {
        grid-area: 1 / 1 / 2 / 4;
    }
    .process {
        grid-area: 3 / 1 / 4 / 4;
    }
    .conclusion {
        grid-area: 5 / 1 / 6 / 4;
    }
    .extra-info {
        grid-area: 7 / 1 / 8 / 4;
    }
    /* Captions */
    figcaption {
        opacity: 1;
        background-color: transparent;
        margin-top: 4px;
        padding: 0 0 8px 0;
    }
    figcaption h1 {
		font-weight: 300;
        font-size: 16px;
        line-height: 24px;
        color: #FAFBFC;
        ;
    }
    figcaption p {
        font-size: 14px;
        color: #CBD9E7;
    }
    /* Footer media queries*/
	.project_nav {
	    padding: 20px 24px;   
	}
    footer {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        padding: 80px 24px 0;
    }
    footer > .contacts {
        grid-area: 2 / 1 / 3 / 2;
    }
    footer > .side-projects {
        grid-area: 1 / 1 / 2 / 2;
    }
    footer > .copyright {
        grid-area: 3 / 1 / 4 / 2;
    }
}


/*Menu stylin*/

nav {
    display: contents;
}

nav input[type="checkbox"] {
    display: none;
}


/*CHECKBURGER*/

.checkburger {
	background-color: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    display: block;
    position: fixed;
    right: 20px;
    top: 12px;
    width: 24px;
    height: 24px;
    z-index: 15;
    padding: 14px 16px 18px 16px;
    border-radius: 20px;
}

.checkburger:hover {
    background-color: rgba(0, 0, 0, 0.8);
    transition: all 0.12s ease-out;
}

.checkburger span {
    background: #FAFBFC;
    border-radius: 4px;
    display: block;
    height: 2px;
    margin: 8px 0 0 0;
    transition: 0.12s ease-out all;
    width: 24px;
}

.checkburger .meat {
    position: relative;
    left: 4px;
    width: 20px;
}


/*CHECKBURGER:CHECKED*/

#hamburger:checked + label.checkburger .top-bun {
    background: #FAFBFC;
    transform: rotate(45deg) translate(4px, 3px);
}

#hamburger:checked + label.checkburger .bottom-bun {
    background: #FAFBFC;
    transform: rotate(-45deg) translate(4px, -3px);
}


/*MENU*/

.menu {
	color: #FAFBFC;
	background-color: rgb(0, 0, 0, 0.8);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	opacity: 0;
	overflow: hidden;
	position: fixed;
	right: 0;
	top: -100vh;
	transition: opacity 0.12s ease-out;
	width: 100vw;
	height: 100vh;
	display: grid;
	z-index: 4;
}

.menu-items {
    align-self: center;
    justify-self: center;
    margin: 0 auto;
    padding: 0;
}

.main-menu {
    margin-bottom: 40px;
}

.main-menu li,
.menu-contact li {
    margin: 0;
    list-style: none;
}

.main-menu li a {
    color: #FAFBFC;
    display: none;
    font-size: 24px;
    font-weight: 700;
    padding: 16px 0;
    margin-left: -40px;
    text-align: left;
    text-decoration: none;
    transition: all 0.12s ease-out;
	
}

.menu li a:hover {
    color: #EF9CCA;
    transition: all 0.12s ease-out;
	
}


.menu .current {
    color: #EF9CCA;
    font-size: 24px;
    font-weight: 700;
    padding: 16px 0;
    margin-left: -40px;
}

.menu h2 {
    font-size: 18px;
}

.menu-contact li a {
    color: #FAFBFC;
    display: none;
    font-size: 18px;
    font-weight: 700;
    padding: 8px 0;
    margin-left: -40px;
    text-align: left;
    text-decoration: none;
    transition: all 0.12s ease-out;
}

#hamburger:checked ~ .menu {
    opacity: 1;
    top: 0;
    position: fixed;
}

#hamburger:checked ~ .menu ul li a {
    display: block;
}


/*Menu stylin end*/