html {
    overflow-x: hidden;
}
body {
    width: 100%;
    min-height: 100vh;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: left;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
/*    transition: background-color 0.3s, color 0.3s, padding-left 0.5s ease, padding-right 0.5s ease;*/
    background-color: black;
    color: #CCCCCC;
    overflow-x: hidden;
}
.inter-text {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}
a {
  color: inherit; /* Default link color same as body text */
  text-decoration: none; /* Remove underline */
}
	
h1 {
    font-size: calc(4vw + 2rem); /* Responsive font size */
    color: #CCCCCC;
    font-family: "Inter", sans-serif;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0; /* Remove default margin */
}

h2 {
    font-size: calc(2vw + 1rem); /* Responsive font size */
    color: #CCCCCC;
    margin: 1em 0; /* Adjusted margins for spacing */
    font-family: "Inter", sans-serif;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

p {
    font-size: calc(1.3vw + 0.65rem); /* Responsive font size */
    color: #CCCCCC;
    line-height: 1.5;
    margin: 1em 0; /* Adjusted margins for spacing */
    font-family: "Inter", sans-serif;
    font-weight: 300;
}
.dropcap {
    font-size: calc(20 * (1.3vw + 0.65rem)); /* Responsive drop cap size */
display: inline-block; /* Display as an inline block */
    line-height: 1;
    margin-right: 3%; /* Space between drop cap and paragraph text */
    margin-bottom: 0;
    margin-left: 0; /* No left margin to align with the left edge of the paragraph */
    margin-top: 0; /* No top margin to align with the top edge of the paragraph */

    font-weight: 50; /* Set the weight to 100 */
    color: #CCCCCC; /* Ensure this matches the text color for consistency */
}
@media (min-width: 769px) and (max-width: 2000px) {
    h1 {
        font-size: calc(4vw + 2rem); /* Responsive font size up to 2000px */
    }
    h2 {
        font-size: calc(2vw + 1rem); /* Responsive font size up to 2000px */
    }
    p {
        font-size: calc(1.3vw + 0.65rem); /* Responsive font size up to 2000px */
    }
    .dropcap {
        font-size: calc(12 * (1.3vw + 0.65rem)); /* Responsive drop cap size */
    }
}
.inline-image {
	width: 100%;
	height: auto;
	background-size: cover;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    margin-top: 4%;
	margin-bottom: 8%;
    position: relative;
	justify-content: center;
    align-items: center;
}
.inline-image::before {
    content: "";
    display: block;
    padding-top: 100%; /* This maintains the square aspect ratio */
}
#logoleft {
    width: calc(2.5vw + 2.5rem);
    height: calc(4vh + 4rem);
    top: 8vh; /* Adjust this as needed */
    left: calc(16% - (2.5vw + 2.5rem));
    background-image: url("img/logo01.png");
    background-repeat: no-repeat;
    background-size: contain;

    position: fixed;
    z-index: 100;
}
.inline-logo {
    height: 1em; /* Sets the height of the image to match the font size */
    vertical-align: middle; /* Aligns the image vertically with the text */
}
#sloutchevsky {
    width: calc(9vw + 9rem);
    height: calc(9vh + 9rem);
    top: 8vh;
    left: 18%;
    background-image: url("img/sloutchevsky01.png");
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    z-index: 100;
}
#sloutchevsky-outro {
    width: calc(9vw + 9rem);
    height: calc(9vh + 9rem);
    top: 9vh;
    left: calc(0vw - 1vw);
    background-image: url("img/sloutchevsky01.png");
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    z-index: 100;
}
#vas_sloutchevsky {
    background-image: url(img/vas_sloutchevsky.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: auto; /* Allow the width to adjust dynamically */
    height: auto; /* Allow the height to adjust dynamically */
    min-width: 180px; /* Set minimum width */
    min-height: 180px; /* Set minimum height */
	max-width: 400px; /* Set minimum width */
    max-height: 400px; /* Set minimum height */
    position: absolute;
	bottom: -100%;
}

.lines-wrapper {
    position: fixed;
    top: 30%;
    left: 0;
    width: 18%;
    z-index: 99;
    display: flex;
    flex-direction: column;
    pointer-events: none; /* Disable pointer events for the wrapper */
}

.content {
    top: 0px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    position: relative;
}
.container {
    top: 0px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    position: relative;
	overflow-y: scroll;
	    background-color: red;
}
.line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #CCCCCC;
}

.paragraph {
    z-index: 2;
    position: relative;
    text-align: left;
	margin-bottom: 4%;
	margin-top: 4%;
}
.square-container {
	width: 100%;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    margin-top: 4%;
	margin-bottom: 8%;
    position: relative;
	justify-content: center;
    align-items: center;
	overflow: hidden;
}
.square-container::before {
    content: "";
    display: block;
    padding-top: 100%; /* This maintains the square aspect ratio */
}

.section-spacer {
	width: 100%;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    margin-top: 20%;
    position: relative;
}
#section-spacer-initial {
    margin-top: 50vh;
}
#section-spacer-outro {
    margin-top: 0;
	height: 100vh;
}