/* (c) Scheffer.Design 2025 */

/* Color vars */
:root {
    /* Color vars */
    --primary-color: rgb(23,24,26);
    --hover-color: rgb(0, 136, 255);
    --link-color: rgb(110,110,110);
    --footer-color: rgb(156, 156, 156);
    --subtitle-color: rgb(190, 190, 190);
    --background-color: rgb(0,0,0);
    --inverse-background-color: rgb(255,255,255);
    --inline_menu_color: rgb(242, 199, 145);
    --inline_menu_height:34px;
    
}

/* Lay-out */
body {
    margin:0px auto 0px auto;
    max-width:2000px;
}

header {
  display:flex;
  margin-left:auto;
  margin-right:auto;
  padding-left:0px;
  padding-right:34px;
  min-height: 128px;
  gap: 20px 50px;
  justify-content: center;
  
  border-image: linear-gradient(to left, #000000 0%, #fefefe 100%) 1;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

footer {
    display:flex;
    margin-top:43px;
    margin-left:auto;
    margin-right:auto;
    padding-left:34px;
    padding-right:34px;
    min-height: 348px;
    gap: 20px 50px;
    flex-flow:column;
    justify-content: flex-end;
    
    background: var(--background-color);
    color: var(--inverse-background-color);
}

content {
  display:flex;
  margin-left:auto;
  margin-right:0px;
  justify-content: center;
}

.content {
    display:flex;
}

.content:has(row) {
    flex-direction:column;
}

.content img {
    max-width:100%;
    border-radius:30px;
}

.content ul {
    list-style: none;;
}

.content .left {
    font-size: 21px;
}

.identity {
  display:flex;
  margin-left:0px;
  margin-right:auto;
  margin-left:auto;
  gap: 20px 50px;
  justify-content: center;
    
}

.full {
  max-width:900px;
  display:flex;
  flex-direction:column;
  margin-left:auto;
  margin-right:auto;
  padding-left:34px;
  padding-right:34px;
  gap: 20px 50px;
  justify-content: center;
}

.full:has(img) {max-width:100%;
                margin:0px;
                padding:0px;}
.full img {
    width:100%;
} 

.full ul .img {
    display:flex;
}

row {
  display:flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items:left;
  align-content: stretch;
  flex-wrap: wrap;
}

column {
    margin: 10px 0px 10px 0px;
}

footer row {
    justify-content: left;
}

.left-side {
  flex:3;
  max-width:700px;
  padding-left:34px;
  padding-right:34px;
}

.right-side {
  flex:2;;
  padding:0px;
  margin-top:auto;
  margin-bottom:auto;
  border-radius: 30px 0px 0px 30px;
  text-align: center;
  overflow: hidden;
}

.left {
  flex:3;
  padding:0px;
  /*margin-top:2.5lh;*/
  margin-bottom:auto;
  border-radius: 0px 30px 30px 0px;
  text-align: center;
  overflow: hidden;
  font-size:6.9vw
}

.content .left {
    text-align: justify;
    padding-left:34px;
}

.content .left ul, .content .right ul {
        padding-left:0px;
    }

.right-side:has(.video), .right:has(.video) {
    border-radius: 0px;
}

.right-side p {
    display: contents;
}

.left p:has(img) {
    display:contents;
}

.right-side p img{
    position: relative; /* allows repositioning */
    left: 100%; /* move the whole width of the image to the right */
    margin-left: -200%; /* magic! */
}

.left p img {
    position: relative; /* allows repositioning */
    left: 100%; /* move the whole width of the image to the right */
    margin-left: -200%; /* magic! */
    object-fit: cover;
    /* you must set the sizes here or it won't work. e.g. */
    width: 100%;
    height: 100%;
}

.right {
        flex:3;
        padding-left:34px;
        padding-right:34px;
        flex-flow:column;
    }
    
.cliptotext, .left.cliptotext{
    font-size:6.9vw;
    margin-top:2.7lh;
    flex:2;
}

header .left-side, footer .left-side {
    display: flex;
    flex:1;
    justify-content: left;
    align-items: center;
}

header .right-side, footer .right-side {
    display: flex;
    flex:2;
    align-items: center;
    justify-content: right;
}


/* Styling for menu */
.menu {
    display: flex;
    gap:2vw;
    justify-content:flex-end;
    margin-top:auto;
    margin-bottom: auto;
}

.menu li {
    display: flex;
    justify-content: right;
    text-decoration: none;
}

.menu-icon {
    display:none;
    justify-content:flex-end;
    margin-top: auto;
    margin-bottom: auto;
}

/*change menu icon when menu is shown*/
.show .menu-icon a .fa.fa-bars:before {
    content: "\f00d";
}

.inlinemenu {
    background:white;
    position: sticky;
    top: 0;
    padding-top:10px;
    padding-bottom:10px;
    z-index: 1000;
}

.inlinemenu ul {
    display: flex;
    flex-wrap: wrap;
    flex-direction:row;
    list-style:none;
    gap: 10px 10px;
    padding-left:34px;
    padding-right:34px;
    justify-content:center;
}

.inlinemenu ul li {
    min-width:150px;
    width:15%;
    font-size:21px;
    text-align: center;
    background: var(--inline_menu_color);
    border-radius: 10px;
}

.inlinemenu ul li a {
    display:block;
    width:100%;
    font-size:36px;
}

/*Styling for hero */
.hero {
    display:block;
    max-height: 400px;
    overflow: hidden;
    position: relative;
}

.hero .title {
    position: absolute;
    left: 0px; 
    bottom: 0px;
    background: rgb(255, 255, 255, 0.6);
    border-radius:0px 30px 0px 0px;
    padding: 0px 34px 0px;
    min-width: 300px;
}

.hero .title h1 {
    text-align: left;
    margin-top: 10px;
    margin-bottom: 0px;
}

.hero .title p {
    margin-top: 0px;
}

.hero img {
    width:100%;
    height:100%;
    object-fit: cover;
    object-position: center; 
}

.attributes {
    padding-left:34px;
    padding-right:34px;
}

.video {
    display:flex;
    background-image: url('../img/movie.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 200px;
    height: 150px;
    position: relative;
}

a:hover .video {
    background-image: url('../img/movie_hover.png');
}

.video + p {
    margin-top: 0px;
    display:block;
    text-align:left;
}

.quote {
  display:flex;
  margin-left:32px;
  margin-right:32px;
  gap: 32px;
  justify-content: center;
  align-items: center;
  color: var(--link-color)
}

.quote column {
    justify-content: center;
}

.quote h1 {
    font-size: 4vw;
    margin-top: 10px;
    text-align: left;
}

.quote p {
    font-size: 18px;
    margin-bottom: 8px;
    text-align: left;;
}

/*Styling for projects on homepage */
.projects {
  display:flex;
  margin-left:auto;
  margin-right:auto;
  gap: 20px 50px;
  justify-content: center;
  width: calc(100% - 64px);
  max-width:1400px;
}

.projects .column {
  display: flex;
  flex-direction: column;
  flex-basis: 50%;
  flex: 1;
  gap:5vh;
  margin-bottom: 5vh;
}

.projects row {
    gap:50px;
}

.gallery {
    padding:32px;
    columns:2;
}

.gallery ul {
    display:flex;
    gap:10px 10px;
    padding-right:34px;
    padding-left:34px;
}

.gallery ul li {
    flex:2;
}

.gal-item {
    margin:10px 0px 10px 0px;
    width:100%;
    border-radius: 30px;
}

.gal-item img {
    width:100%;
    border-radius: 30px;
}

.container {
    flex:flex: 1;
    min-height:150px;
    width:100%;
}

.container.animated, .gal-item.animated {
    opacity:0;
}

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

.sample {
  position:relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.button {
    transform: rotate(-45deg);
    position: absolute;
    display: block;
    right:38px;
    bottom:38px;
    width:80px;
    height:80px;
    line-height: 80px;
    border-radius:60px;
    background:white;
    text-align: center;
    transition: transform 0.4s ease;
} 

a:hover .button{
    transform: rotate(-45deg) scale(1.5);
} 

/* Text styles*/
h1 {
  font-family: "Manrope", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 6.9vw;
  letter-spacing:-0.05em;
  text-align: center;
}

.spacer h1, footer h1 {
    text-align: left;  
}

.devider {
    line-height:29px;
    color:var(--link-color)
}

h2 {
  font-family: "Manrope", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 28px;
  max-width: 680px;
  text-align: left;
  margin-bottom:0px;
}

.content h1 {
    color:var(--inline_menu_color);
}

.content h2 {
    text-align:center;
    font-style:italic;
    max-width:100%;
}

p {
  font-family: "Manrope", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 21px;
  line-height: 40px;
  text-align: justify;
}

a {
  font-family: "Manrope", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size:21px;
  text-decoration: none;
  color:var(--link-color);
}

a:hover {
  color:var(--hover-color);
  text-decoration: underline;
}
label {
       font-family: "Manrope", sans-serif;
       font-optical-sizing: auto;
       font-weight: 600;
       font-style: normal;
       font-size:12px;
       text-decoration: none;
       color:var(--subtitle-color);
       
}

label span {
       display: block;
       font-family: "Manrope", sans-serif;
       font-optical-sizing: auto;
       font-weight: 400;
       font-style: normal;
       font-size:18px;
       text-decoration: none;
       color:var(--primary-color);
       width:250px;
}

blockquote ul {
       font-family: "Manrope", sans-serif;
       font-optical-sizing: auto;
       font-weight: 400;
       font-style: normal;
       font-size:18px;
       text-decoration: none;
       list-style:none;
       padding:0px;
       margin-top:0px;
       margin-bottom:20px;
}

blockquote ul li {
    margin-bottom: 10px;
}

blockquote ul li a {
        font-size:18px;
}

.hero .title h1 {
    font-size: 10vw;
}

.subtitle, .subtitle a {
  font-family: "Manrope", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size:18px;
  letter-spacing:1px;
  line-height:30px;
  color:var(--footer-color);
}

#logo {
    color:var(--primary-color)
}

.socials {
    text-align: center;
}

.socials ul {
    display: inline-block;
    list-style-type: none;
}

.socials ul li {
    display:flex;
    align-items:center;
    justify-content: center;
    float:left;
    width:60px;
    height:60px;
    border-radius: 30px;
    background:#eaeaea;
    margin:20px;
}

.socials ul li a {
    color:canvastext;
}

.socials ul li:hover {
    background:var( --background-color);
}

.socials ul li:hover a {
    color:var(--inverse-background-color);
}

.container h2, .container p {
   margin:0px;
}


/* Animations */
html {
    scroll-behavior:smooth;
    scroll-padding-block-start: var(--inline_menu_height);
}
.container.animated.swell, .gal-item.animated.swell {
    opacity:1;
    animation:growAnimation 1s forwards;
}

.fade-in {
  opacity: 0;
  translate:0px 30px;
  animation: fadeInAnimation 1.5s forwards;
}

@keyframes fadeInAnimation {
    from { opacity: 0; translate:0px 30px;}
    to { opacity: 1; translate:0px 0px;}
}

@keyframes growAnimation {
    from { transform: scale(0.5);}
    to {transform:scale(1);}
}

/* Responsive behaviour */
@media (max-width: 900px) {
    header {
        padding-right:0px;
    }
    
    content .right-side {
        display:none;
    }
    
    content.keep-visible {
        flex-flow:column;
    }
    
    content.keep-visible .right-side {
        display:flex;
        margin-top: revert;
    }
    
    content.keep-visible .right-side a, .content .right a {
        display:flex;
        flex-flow:row;
        align-items:center
    }
    
    content.keep-visible .right-side a p,  .content .right a p {
        margin-top:revert;
        margin-left:10px;
    }
    
    .video {
        width:150px;
    }
    
    .left, .right-side {
        padding-left:34px;
        padding-right:34px;
    }
    
    content .left.cliptotext {
        padding-right:0px;
    }
    
    .content, .content row {
        flex-direction:column-reverse;
    }
    
    .content:has(.right img){
        flex-direction:column;
    }
    
    ul li:has(img), .full.gallery ul li {
        display:none;
    }
    
    ul li:has(.highlight), .full.gallery ul li:has(.highlight)  {
        display:inline-block;
    }
    
    header.show .right-side .menu {
        display:flex;
    }
    
    header .right-side .menu {
        display:none;
        flex-flow:column;
        float:right;
        gap:6px;
    }
    
    /* Show menu-item */
    .menu-icon {
        display: flex;
    }
    
    .projects {
          display: block;
          max-width:700px;
    }
    
    .container.spacer {
        display: none;
    }
    
    /* Fixate H1 on small screens, normaly it fits the windows size */
    h1 {
        font-size:64px;
        word-break: break-word;
    }
    
    content:has(.left img), .full.gallery ul {
        display:flex;
        flex-direction: column-reverse;
    }
    
    .left p img {
        display:inline-block;
        width:100%;
        border-radius:0px;
    }
    
    .left {
        padding-left:0px;
        border-radius:0px;
    }
    
    .cliptotext {
        margin-top:0px;
    }
    
}

@media (min-width: 900px) {
    .hero .title h1 {
        font-size: 80px;
    }
    
}

@media (max-width: 600px) {

    footer .right-side, .right-side {
        display:none;
    }
    
    /* Hide logo when menu opens */
    header.show .left-side {
        display:none;
    }

    .quote column:first-child {
        display:none;
    }
    
    .quote column:last-child {
        border-left: 2px solid;
        padding-left:10px;
    }
    
    .quote column h1 {
        font-size:40px;
        margin:10px;
    }
    
    .quote column p {
        font-size: 18px;
        margin: 4px 4px 4px 10px;
    }
    
    .gallery {
        columns:1;
    }
    
    .projects row {
    gap:5px;
    }
    
    .inlinemenu {
        display:none;
    }
    
}