html, body{
	width:100%; 
	height:100%; 
	padding:0px; 
	margin:0px;
    font-family: 'Segoe Script', cursive;
    color: #cbd039;
    scroll-behavior: smooth; /* Smooth scrolling for better user experience */
    overflow-y: auto;
    scroll-snap-type: y mandatory; /* Enable vertical scroll-snapping */
    background: #191d1e; /* Old browsers */
	background: -moz-linear-gradient(0deg,  #191d1e 50%, #283139 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(50%,#191d1e), color-stop(100%,#283139)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(0deg,  #191d1e 50%,#283139 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(0deg,  #191d1e 50%,#283139 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(0deg,  #191d1e 50%,#283139 100%); /* IE10+ */
	background: linear-gradient(0deg,  #191d1e 50%,#283139 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#191d1e', endColorstr='#283139',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	background-attachment: fixed
}
section {
    scroll-snap-align: start; /* Each section snaps to the top when scrolling */
    min-height: 100vh; /* Full viewport height for each section */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}



#projector {
  position: absolute; 
  top: 0px;
  left: 0px;
  width:100%;
  height:100%;
  overflow:hidden;
  
} 

.center-div {
	width:580px;
    height:374px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left: -290px;
    margin-top:  -187px;
}

#preloaderDiv
{
	position:absolute;
	left:50%;
    top:50%;
    margin-left: -27px;
    margin-top:  -27px;
}

#logo{
	opacity:0;
    filter: alpha(opacity=0);
}

#date2014
{
	position:absolute;
	padding-left: 210px;
	padding-top:15px;
	opacity:0;
	top:303px;
	left:0;
    filter: alpha(opacity=0);
}

#top {
    width: 100vw; /* Full viewport width */
    min-height: 100vh; /* Full viewport height */
    padding: 100px;
}

#head {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Fullscreen height */
}

#left, #center, #right {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

#title_section {
    font-size: 3em;
    padding: 20px;
}


.supported {
    display: flex;
    justify-content: center; /* Center the images horizontally */
    gap: 20px; /* Add space between the images */
}

.small-logo {
    width: 40%; /* Adjust the size of the images as needed */
    height: auto;
}

.text-center {
    text-align: center; /* Ensure text is centered without affecting flexbox layout */
}

.profile-img {
    width: 100%; /* Adjust the size of the images as needed */
    height: auto;
    padding : 20px;
}

.contact-bar {
    display: flex;
    justify-content: center; /* Center the contact bar horizontally */
    align-items: center; /* Center the contact bar vertically */
    gap: 20px; /* Add space between the images */
    margin-top: 20px; /* Add some margin to separate from the content above */
}

.contact-img {
    width: 50px; /* Adjust the size of the images as needed */
    height: auto;
    padding: 10px; /* Add padding around the images */
}

.kelsea-img {
    width: 110%; /* Adjust the size of the images as needed */
    height: auto;
    padding : 20px;
}

.linkedin-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.founder {
    font-size: 1.5em;
}

.flip-picture {
    position: relative;
    display: inline-block;
    perspective: 1000px;
    width: 100%; /* Set explicit width */
    height: 100%; /* Set explicit height */
    cursor: pointer; /* Change cursor on hover */
}

.flip-wrapper {
    position: relative;
    width: auto;
    height: auto;
}

.flip-wrapper img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    backface-visibility: hidden;
    transition: transform 0.6s ease-in-out;
}

.flip-wrapper img:first-child {
    transform: rotateY(0deg);
}

.flip-wrapper img:last-child {
    transform: rotateY(180deg);
}

.flip-picture.flipped .flip-wrapper img:first-child {
    transform: rotateY(-180deg);
}

.flip-picture.flipped .flip-wrapper img:last-child {
    transform: rotateY(0deg);
}