html {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    height: auto;
    width: 100vw;
    overflow-x: hidden;
    left: 0;
}

body {
    margin: 0;
    font-family: 'Rubik';
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.screen {
    height: 100vh;
    width: 100vw;
    background-repeat: no-repeat;
    background-size: cover;
    scroll-snap-align: start;
    display: flex;
    flex-direction: row;
}

.halfScreen {
    height: 100vh;
    width: 50vw;
    /* background-color: white; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

#entry_screen {
    scroll-snap-align: start; 
    /* background-image: url(static/main_page/05.jpg); 
    overflow: hidden; 
    filter: grayscale();  */
    background-color: gray;
    display: flex; 
    justify-content: center; 
    align-items: center; 
    flex-direction: row;
}

#logo {
    display: flex;
    flex-direction: row;
    height: 100px;
    width: 500px;
}

.header {
    top: 0;
    position: sticky;
    width: 100vw;
    height: 30px;
    display: flex;
    justify-content: right;
    align-items: center;
    z-index: 2;
}

#mainPageHeader {
    animation: changeColor linear;
    animation-timeline: scroll(root);
}

@keyframes changeColor {
  /* Начало: первый цвет */
  0% {
    filter: invert(100%);
  }
  /* После первой секции меняем на второй */
  25.36% {
    filter: none;
  }
  49.44% {
    filter: invert(100%);
  }
  /* После второй секции меняем на третий */
  73.51% {
    filter: none;
  }
  97.59% {
    filter: none;
  }
}

.header_link {
    color: black;
    text-decoration: none;
    margin: 20px;
    font-size: 24;
    font-weight: 300;
}

#footer {
    position: relative;
    left: 0;
    width: 100vw;
    height: 10vh;
    background-color: gray;
    display: flex;
    justify-content: left;
    align-items: center;
    flex-direction: row;
    gap: 25px;
    /* scroll-snap-align: start; */
}

h1 {
    font-size: 46;
    font-weight: 500;
}

p {
    font-size: 24;
    font-weight: 300;
    margin-top: 5px;
    margin-bottom: 0;
}

/* Animations */
:root {
  --animate-duration: 2000ms;
  --animate-delay: 0.9s;
}

#sketch {
    background-image: url(static/about/08_scetch.jpg);
    width: 50vw;
    height: 50vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    filter: contrast(2);
}

.gridWrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* column-gap: 10vw; */
    row-gap: 5vh; 
}

.photoWrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.project {
    position: relative;
    width: 20vw;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center;
    filter: grayscale();
}

.project_link {
    margin-top: 5px;
    margin-bottom: 0;
}

.imagecarousel {
    width: 45vw;
    overflow-x: hidden;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    height: 70vh;
    display: flex;
    /* justify-content: center;
    align-items: center; */
    flex-direction: row;
    gap: 5px;
    anchor-name: --carousel;
}

.imagecarousel::scroll-button(*) {
    position: absolute;
    position-anchor: --carousel;
}
.imagecarousel::scroll-button(left) {
    right: calc(anchor(left));
    top: calc(anchor(top) + 35vh);
    background-image: none;
    border: 0;
}

.imagecarousel::scroll-button(right)::before {
    left: calc(anchor(right));
    top: calc(anchor(top) + 35vh);
    content: '\f105';
    background-color: white;
    border: 0;
    font-weight: 900;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font: var(--fa-font-solid);
    
}

.carouselImage {
    position: relative;
    height: 70vh;
    width: 45vw;
    object-fit: contain;
    filter: none;
    scroll-snap-align: center;
}