/*
Theme Name: A Bespoke Theme
*/

:root {
    --measure: 650px;
}

* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
    font-weight: 100;
    font-size: 18px;
    line-height: 1.4;
}

body {
    background-color: #FCFAF5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 100;
    text-transform: uppercase;
}


body {
    background-color: #FCFAF5;
}

.with-sidebar {
    display: flex;
}

.sidebar {
    position: fixed;
    z-index: 10;
    width: 200px;
    height: 100%;
}

.not-sidebar {
    padding-left: 00px;
    position: relative;
    width: 100vw;
    height: 100vh;
}

.center {
    box-sizing: content-box;
    margin-inline: auto;
    max-inline-size: var(--measure);
}

.stack {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  
  .stack * {
    margin-block: 0;
  } 
  
  .stack * + * {
    margin-block-start: var(--space, 1.5rem);
  }
  

section {
    position: relative;
    min-height: 100vh;
}

section>div {
    padding: 150px 25px;
}


/* hamburger */

.bar-container {
    display: none;
    cursor: pointer;
    z-index: 999;
}

.bar1, .bar2, .bar3 {
    width: 30px;
    height: 1px;
    background-color: #949494;
    margin: 8px 0;
    transition: 0.4s;
}

/* Rotate first bar */
.change .bar1 {
    transform: translate(0, 9px) rotate(-45deg);
}

/* Fade out the second bar */
.change .bar2 {
    opacity: 0;
}

/* Rotate last bar */
.change .bar3 {
    transform: translate(0, -9px) rotate(45deg);
}

/* end hamburger */

nav {
    margin: 0 25px;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

/* START STUDIO BESPOKE LOGO ANIMATION */

.logo-wrapper {
    box-sizing: content-box;
    margin-inline: auto;
    max-inline-size: var(--measure);
    width: 100%;
    height: 110vh;
    justify-content: center;
    position: relative;
    z-index: 1;
}

#logo {
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 999;
}


#studio-logo {
    position: absolute;
    top: 25px;
    left: 25px;  
    height: 17px;
    width: 114px; 
    background-image: url('assets/studio.png');
    background-repeat: no-repeat;   
}

.bespoke {
    position: absolute;
    top: 0px;
    left: 0px;
    animation-fill-mode: forwards;
    animation-duration: 2s;
}

#t2 {
    animation-name: movet2;
    transform: translate(0, 3%);
    z-index: 1;
}
#t3 {
    animation-name: movet3;
    transform: translate(0, 6%);
    z-index: 2;
}
#t4 {
    animation-name: movet4;
    transform: translate(0, 9%);
    z-index: 3;
}
#t5 {
    animation-name: movet5;
    transform: translate(0, 12%);
    z-index: 4;
}
#t6 {
    animation-name: movet6;
    transform: translate(0, 15%);
    z-index: 5;
}
#t7 {
    animation-name: movet7;
    transform: translate(0, 18%); 
    z-index: 6;
}

@keyframes movet2 {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(0, 3%);
    }
}
@keyframes movet3 {
    from {
        transform: translate(0, 0px);
    }

    to {
        transform: translate(0, 6%);
    }
}
@keyframes movet4 {
    from {
        transform: translate(0, 0px);
    }

    to {
        transform: translate(0, 9%);
    }
}
@keyframes movet5 {
    from {
        transform: translate(0, 0px);
    }

    to {
        transform: translate(0, 12%);
    }
}
@keyframes movet6 {
    from {
        transform: translate(0, 0px);
    }

    to {
        transform: translate(0, 15%);
    }
}
@keyframes movet7 {
    from {
        transform: translate(0, 0px);
    }

    to {
        transform: translate(0, 18%);
    }
}

/* END STUDIO BESPOKE LOGO ANIMATION */

/* SIDEBAR ANIMATION */

#fig.fadefig {
    animation-name: fadein;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}


#fig {
    opacity: 0;
}

.animation {
    animation-name: example;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

#nav-menu {
    position: relative;
    top: -100px;
}

input, textarea {
    width: 100%;
}

input {
    line-height: 2rem;
    border: 1px solid #949494;
    padding-left: 10px;
}

input[type="file"]{
    border: none;
}

@keyframes example {
    from {
        top: -100px;
    }

    to {
        top: 0;
    }
}

/* END SIDEBAR ANIMATION */


@media screen and (max-width: 850px) {

    .bar-container {
        display: block;
        position: fixed;
        top: 25px;
        right: 25px;
        left: revert;
        border: 1px solid #949494;
        padding: 2px 4px;

    }

    .sidebar {
        position: fixed;
        left: -100%;
        width: 100%;
        transition: left 0.5s;
        background-color: #FCFAF5;

    }

    .sidebar.open {
        left: 0px;
        transition: left 0.5s;
    }

    .not-sidebar {
        padding-left: 0;
    }

    #fig {
        opacity: 1;
    }

    #nav-menu {
        top: 0;
    }

}