:root{
  --bg-color:black;
  --font-color:  white;
  --subsection-border: #e57563;
  --subsection-textsize:1.5rem;
  --menu-textsize:20px;
  --team-head-textsize: 48px;
  --name-fontsize:18px;
  --subheading-color:#58000a;
  --dynamicword:#58000a;
}
.proj-desc{
  margin-bottom: 30px;
}
#speak-button{
  background: none;
	color: var(--font-color);
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
  margin:25px;
  

}
.switch-control{
  margin-top:20px;
}
.text-control{
  color:var(--font-color)
}
h4{
  color: var(--font-color);
}
ul{
  font-size: 15px;
  color:var(--font-color)
}
li{
  color:var(--font-color)
}
.words{
  overflow: hidden;
}

#staticword{
  color:var(--font-color)
}

#word{
  color:var(--dynamicword);
  display: block;
  animation: spin_words 4s infinite;
}
#intro-container,
#intro-container::before,
#intro-container:after{
  display: flex;
  box-sizing: border-box;
  height: 150px;
  width:1500px;
  display: grid;
  grid-template-columns: 0.5fr 1fr;
  gap:15px;
  font-family: "Poppins", sans-serif;
  font-size:110px;
  font-weight: 500;
}
@keyframes spin_words {
  0%{
    transform:translateY(100%);
  }
  10%{
    transform:translateY(-112%);
  }
  25%{
    transform:translateY(-100%);
  }
  35%{
    transform:translateY(-212%);
  }
  50%{
    transform:translateY(-200%);
  }
  60%{
    transform:translateY(-312%);
  }
  75%{
    transform:translateY(-300%);
  }
  85%{
    transform:translateY(-412%);
  }
  100%{
    transform:translateY(-400%);
  }


}
#heading-attr{
  color:var(--subheading-color)
}
#subheading-attr{
  color:var(--subheading-color);
  margin: 10px;

}
.edu-heading{
  margin-top: 20px;
  margin-bottom: 20px;
}
#span-attr{
  color: var(--font-color);
  margin:5px;
  font-weight: bold;
}
#footer-container{
  display: flex;
  flex-direction: row;
justify-content: center;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 10px;
  margin-right: 10px;
  padding: 10px;
  border-radius: 10px;
  color: var(--font-color);
}
.footerlogo{
  height: 150px;
  width: 150px;

}
#address-container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 20px;
  margin-right: 20px;
  align-items: center;
}
p{
  color: var(--font-color);
}
.subfoot{
  color: var(--font-color);
}

a{
   color: var(--font-color);
    text-decoration: none;
}
a:hover{
  color: var(--font-color);
  text-decoration: underline;
}
small{
  color:var(--font-color)
}



#decrease-font{
  background: none;
  height:30px;
  width:30px;
	color: var(--font-color);
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
  margin:5px;
  border:2px solid var(--font-color);
}
#increase-font{
  background: none;
  height:30px;
  width:30px;
	color: var(--font-color);
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
  margin:5px;
  border:2px solid var(--font-color);
}
.font-control{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#Fontsizetext{
  color:var(--font-color);
  margin-top: 5px;
}
.spoken{
  float: left;
}

#vector{
  height: 150px;
  width: 150px;
  float: right;
}
#vector-left{
  height: 150px;
  width: 150px;
  float: right;
}

footer{
  color:var(--font-color);
}
.menu-button{
  background-color: transparent;
  border: solid var(--subsection-border);
  color:var(--font-color);
  padding:5px;
  cursor: pointer;
  border: 2px solid #58000b;
  justify-self: flex-start;
  

}

.access-dropdown{
  display:table;
  flex-direction: column-reverse;
  margin-left: auto;
  padding: 10px;

  
}
.dropdown-options{
  display:none;
  position: absolute;
  background-color: var(--bg-color);
  z-index: 1;
  min-width: 164px;
  border-left: 2px solid black;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
}

.access-dropdown:hover .dropdown-options{
  display: block;
  

}

.subsection{
  border: 2px solid var(--subsection-border); 
  border-radius: 10px;       
  padding: 10px;   
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 10px;
  margin-right: 10px;

  
}
.subsection:hover{
  border: 2px solid #58000b;
  cursor: pointer;
  
    
  

}
main{
  margin-right:5rem;
  padding: 1rem;
}



.subs-heading{
  font-size: var(--subsection-textsize);
  font-weight: 500;
  color: var(--font-color);
  margin-top: 10px;
  margin-left: 30px;
  display: flexbox;
}
[data-theme="dark"] {

  --font-color: #fefefe;
  --bg-color: #121212;
  --subsection-border:#e57563;	
  --subheading-color:white;
  --dynamicword:#7E0C14;
}

[data-theme="light"] {

  --font-color: #000;
  --bg-color:  #ffeee6;
  --subsection-border: #FF5733;
  --subheading-color:#58000a;
  --dynamicword:#58000a
}

.subs-content{
  margin-bottom: 1rem;
  margin-left: 1rem;
  margin-right: 1rem;
  padding: 1rem;
  border-radius: 10px;
  color: var(--font-color);
  display: flex;
}

.switch {
  margin-left:41px;
  margin-top: 20px;
  margin-bottom: 10px;
  justify-content: flex-end;
  
}
  
.theme-switch {
display: inline-block;
height: 34px;
position: relative;
width: 60px;
}

.theme-switch input {
display:none;
}

.slider {
background-color: #ccc;
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: .4s;
}

.slider:before {
background-color: #fff;
bottom: 4px;
content: "";
height: 26px;
left: 4px;
position: absolute;
transition: .4s;
width: 26px;
}

input:checked + .slider {
background-color: #2b2b2b;
}

input:checked + .slider:before {
transform: translateX(26px);
}

.slider.round {
border-radius: 34px;
}

.slider.round:before {
border-radius: 50%;
}

table.GeneratedTable {
  width: 100%;
  background-color: #7f3d3d;
  border-collapse: collapse;
  border-width: 1px;
  border-color: #d9534f;
  border-style: solid;
  color: #ffffff;
}

table.GeneratedTable td, table.GeneratedTable th {
  border-width: 1px;
  border-color: #d9534f;
  border-style: solid;
  padding: 3px;
}

table.GeneratedTable thead {
  background-color: #55000a;
}

.carkinos-logo:hover{
  cursor: pointer;

}

.text-img .img-center{
  display: flex;
}
.text-img .para-text{
  margin: 10px 0; /* Add spacing between paragraphs */
  background-color: #121212;
}

/* Apply styling to the image */
.text-img img {
  max-width: 100%; /* Ensure the image doesn't exceed its container's width */
  display: block; /* Remove default image spacing */
  margin-left: 10px; /* Add spacing to the left of the image */
  border: 1px solid #000; /* Add a border for illustration purposes */
}
.add-font-header{
  font-family: 'moiser';
  font-weight: 500;
  color: var(--font-color);
}
.add-font-header:hover{
  text-shadow: red -2px 0, cyan 2px 0;
}
.img-center{
  align-items: center;
}
header{
  margin-left: 20px;
  display: grid;
  grid-template-columns: repeat(3, 33vw);
  align-items: space-between;
  justify-content: center;
  background-color: var(--bg-color);
  position:sticky;
  top: 0;
  z-index:2;
  padding: .25rem .5rem;
  margin-bottom: 1rem;
}
.carkinos-logo{
  display: flex;
  align-items: center;
}
.menu-btn{
  display: flex;
  align-items: center;
  border: none;
  
  background-color: var(--bg-color);
}
.menu-icon{
  width: 25px;
  height: 25px;
  cursor: pointer;
}

.menu-list{
  color:var(--font-color);
  
  
}

.menu-content{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
  
}

.scroll-control{
  -ms-overflow-style: none; /* for Internet Explorer, Edge */
  scrollbar-width: none; /* for Firefox */
  overflow-y: scroll; 
}
.scroll-control::-webkit-scrollbar {
  display: none; /* for Chrome, Safari, and Opera */
}
#menu-container{
  position: fixed;
  top: 0;
  left: -100%; /* Initial position, off-screen */
  transition: left .4s ease-in-out; /* Transition for the left property */
  width: 300px;
  height: 100%;
 background-color: var(--bg-color);
  color: var(--font-color);
  padding: 20px;
  box-sizing: border-box;
  font-weight: 500;
  font-size: var(--menu-textsize);
  z-index: 1000;
  overflow-y: auto;
}
#menu-content {
  padding: 20px;
}

.menu-close-btn{
  
  margin: 9px;
  width:25px;
  height: 25px;
  display: flex;
  align-items: center;
  border: none;
  background-color: var(--bg-color);
}

#menu-container.menu-open {
  left: 0; /* Change to 0 to bring the menu into view */
}

.left-aligned { margin-left: auto; }
.bg-dark { background-color: var(--bg-color)!important; }
.bg-hero { background-color: #643843; }

body::-webkit-scrollbar {
    width: 0.25rem;
  }
body::-webkit-scrollbar-track {
    background:var(--bg-color);
    max-height: 20%; 
    height: 20%;
  }
body::-webkit-scrollbar-thumb {
    background: #58000a;
  }

footer{
  margin-bottom: 0;
  padding: 0;
}
  body {
    margin:0;
    padding:0;
    min-height: 200vh;
    background-color:var(--bg-color);
    overflow-x: hidden; 
   
    color: white; ; text-decoration: none;
  }

  .scroll-progress {
    position: fixed;
    top: 0;
    width: 0%;
    height: 4px;
    background: #7983ff;
    z-index: 10000;
  }
/* CALLOUT */
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #e9ecef; border-left-width:.25rem; border-radius:.25rem }
.bd-callout h4 { margin-bottom:.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info { border-left-color:#5bc0de }
.bd-callout-warning { border-left-color:#f0ad4e }
.bd-callout-danger { border-left-color:#d9534f }

/* footer */
footer a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; }


.text-blk {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  line-height: 25px;
}

.responsive-container-block {
  min-height: 75px;
  height: fit-content;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  justify-content: flex-start;
}

.container-block {
  min-height: 75px;
  height: fit-content;
  width: 100%;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  display: block;
}

.responsive-cell-block {
  min-height: 75px;
}

.container {
  max-width: 1380px;
  margin-top: 5px;
  margin-right: auto;
  margin-bottom: 5px;
  margin-left: auto;
  padding-top: 0px;
  padding-right: 30px;
  padding-bottom: 0px;
  padding-left: 30px;
}

.team-head-text {
  font-size: var(--team-head-textsize);
  line-height: 50px;
  font-weight: 900;
  text-align: center;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 70px;
  margin-left: 0px;
}

.name {
  font-size: var(--name-fontsize);
  margin-top: 11px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  font-weight: 700;
}

.position {
  margin-top: 5px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
}

.team-card-container {
  width: 263px;
  margin-top: 0px;
  margin-right: 15px;
  margin-bottom: 30px;
  margin-left: 15px;
}

.teamcard-container {
  justify-content: space-evenly;
}

.team-img-wrapper {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}

.team-img {
  max-width: 100%;
  height:250px;
  
}

u{
  color: var(--font-color);
}
h2{
  color:var(--font-color)
}
@media (max-width: 500px) {
  .team-card-container {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 30px;
    margin-left: 0px;
    width: 100%;
  }

  .team-img {
    width: 100%;

  }
}

.logo {
  text-align: center;
}

.carousel-control{
  box-sizing: border-box;
  margin-left:250px;

}
.slideshow-container {

  max-width: 600px;
  position: relative;
  
}

.mySlides {
  display: none;
}

.slide-img{
  width: 600px;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  user-select: none;
  background-color: rgba(0,0,0,0.1);
  
  
}

.next {
  right: 0;
  
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}
.dot {
  
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
#dot-control{
  text-align: center;
  margin-right:250px;
}
.active, .dot:hover {
  background-color: #717171;
}

.hp-container{
  display: grid;
  grid-template-columns: 5.5fr 1fr;
}
.edu-container{
  display: grid;
  grid-template-columns: 5.5fr 1fr;
}
.mod-container{
  display: grid;
  grid-template-columns: 5.5fr 1fr;
}

.subs-list-container > ul{
  list-style: none;
  font-weight: 200;
}

.subsections-list{
  margin-top:20px;
  margin-left:70px;
  position: fixed;
}

.subsections-list-marker{
  margin-top:20px;
  margin-left:70px;
  position: static;
}


a>li{
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 200;
  color: var(--font-color);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
}

@media screen and (max-width:600px) {
  :root{
  -subsection-textsize:1rem;
  --menu-textsize:15px;
  --team-head-textsize:32px;
  --name-fontsize:10px;
  }
  #staticword{
    display: none;

  }
  #word{
    display: none;
  }

  #vector, #vector-left{
    display: none;
  }

 .subsection{
  width: 100vw;
 }

 .carkinos-logo-img{
  display: none;
 }

 .add-font-header{
  display: none;
 }
 .row{
  width:fit-content
 }
 .spoken{
  width:fit-content
 }
 }


 @media screen and (max-height: 1280px) {
  a>li{
    margin-top: 5px;
    font-size: 20px;
    font-weight: 200;
    color: var(--font-color);
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
  }
  
}