* {
  scrollbar-color: #2a5c99 transparent; 
}
html, body { height: 100%;}

body > footer {
  position: sticky;
  top: 100vh;
}
 ::selection {
  background: #bbbbe5;
}

::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: white;
}
 ::-webkit-scrollbar-thumb {
  background: black;
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background: SlateBlue;
  transition: 0.2s;
} 
h3 {
color: #424242;
}
body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; background: #EEF2F7;
}
.start {
color: GhostWhite;
background-image:
  linear-gradient(to bottom, transparent, #EEF2F7),
  url('../sanoksim/lab.png');
background-size: cover;
padding-bottom:1px; 
}
h1, h2, h3, h4, h5, .desc, footer, address{
text-align: center;
}

.desc {
color: black;
font-size: 1.4em;
}
.box a {
color: #3b74ba;
}

.centered {
text-align:center;
justify-content:center;
}

.pc {
  margin: auto;
  max-width: 80%;
}


.column {
  text-align: center;
  max-width: 1200px;
  margin: auto;
  display: grid;
}

@media (min-width: 600px) {
  .column { grid-template-columns: repeat(2, 1fr); }
}


.box {
  box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 12.5px 10px rgba(0, 0, 0, 0.06),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072),
  0 41.8px 33.4px rgba(0, 0, 0, 0.086),
  0 100px 80px rgba(0, 0, 0, 0.12)
;
  padding: 13px;
  margin: 15px;
  background: white;
  border-radius: 5px;
}

.motto {
 color: black;
 font-size: 4em;
 text-shadow: 1px 1px 1px black;
}

a {
    color: black;
}
a:hover { 
color: gray;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.column a {
 text-decoration: none;
}

.left {
width: 50%;
float:left;
}

.right {
width: 50%;
float:right;
}

footer {
  text-align: center;
  margin: 0 auto;
  display: grid;
  background-color: Gainsboro;
  box-shadow: inset 0 -1px 5px 0 rgba(0,0,0,0.1);
  background-image: url('content/twiga.png');
  background-size: 60px, 60px;
  background-position: right bottom, right top;
  background-repeat: no-repeat;
  text-shadow: 0 1px 0 #e1e1e1;
}

.mission {
  text-align: center;
  margin: 0 auto;
  display: grid;
  box-shadow: inset 0 -1px 5px 0 rgba(0,0,0,0.1);
  background-color:#141414;
  color:GhostWhite;
}

@media (min-width: 600px) {
  footer { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 600px) {
  .mission { grid-template-columns: repeat(3, 1fr); }
}

@media only screen and (min-width: 1921px) {
.pc {
text-align: center;
}
    }
    
/* carousel */
.carousel {
	width: 40vw;
	height: 28vw;
}

.scroll {
	width: 100%;
}

.scroll-item {
	width: 40vw;
}

#navigate {
	width: 40vw;
}
/* IE POLYFILL END */

html {
	box-sizing: border-box;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

body {
	padding: 0;
	margin: 0;
}

:root {
	--carousel-width: 20em;
	--carousel-height: calc(calc(calc(9 / 16) * var(--carousel-width)));
}

.center {
	display: flex;
	justify-content: center;
}

.carousel {
	width: var(--carousel-width);
	height: var(--carousel-height);
	contain: strict;
	margin-top: 1vw;
	border-radius: 3vmin;
}

.scroll {
	display: flex;
	align-items: center;
	overflow-y: hidden;
	width: 100%;
	height: 100%;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-behavior: smooth;
	margin: 0;
	padding: 0;
	list-style: none;
}

.scroll::-webkit-scrollbar {
	display: none;
}

.scroll-item {
	width: var(--carousel-width);
}

.scroll-item>img {
	object-fit: contain;
	width: 100%;
	rgba(0, 0, 0, 0.2);
	border-radius: 1rem;
}

.scroll-item>img:active {
	cursor: grabbing;
	cursor: -webkit-grabbing;
}

.scroll-item-outer {
	margin: 1vw;
}

.scroll-item-outer:first-of-type {
	margin: 0;
}

@supports (scroll-snap-align: start) {
	.scroll {
		scroll-snap-type: x mandatory;
	}
	.scroll-item-outer {
		scroll-snap-align: center;
	}
}

@supports not (scroll-snap-align: start) {
	.scroll {
		-webkit-scroll-snap-type: mandatory;
		scroll-snap-type: mandatory;
		-webkit-scroll-snap-destination: 0 50%;
		scroll-snap-destination: 0 50%;
		-webkit-scroll-snap-points-x: repeat(100%);
		scroll-snap-points-x: repeat(100%);
	}
	.scroll-item-outer {
		scroll-snap-coordinate: 0 0;
	}
}

/* navbar */
ul {
 list-style-type: none;
 text-decoration: none;
 }
#navigate {
	display: flex;
	justify-content: space-around;
	margin: auto;
	width: var(--carousel-width);
	margin-top: 1vw;
	
}

#navigate a {
	text-decoration: none;
	color: #333;
	font-size: 1.2rem;
	background: #ddd;
	z-index: 1;
	line-height: 0.6rem;
	border-radius: 1rem;
	padding: 1rem;
	transition: box-shadow 0.5s;
}

#navigate a:hover {
	box-shadow: 0 0 2rem -6px;
}
.kullanimg {
max-width: 30%;
padding-bottom:5px;
}
.navbar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 20px;
 background-color: #151515;
 color: #fff;

}
.nav-links a {
 color: #fff;
}
.logo {
 font-size: 32px;
}
.menu {
 display: flex;
 gap: 1em;
 font-size: 18px;
}
.menu li:hover {
 background-color: #4c9e9e;
 border-radius: 5px;
 transition: 0.3s ease;
}
.menu li {
 padding: 5px 14px;
}


/* mobile navbar */

input[type=checkbox]{
 display: none;
} 

.hamburger {
 display: none;
 font-size: 24px;
 user-select: none;
}

@media (max-width: 768px) {
.kullanimg {
width: 100%;
padding-bottom:5px;
}
.menu { 
 display:none;
 position: absolute;
 background-color:teal;
 right: 0;
 left: 0;
 text-align: center;
 padding: 16px 0;
}
.menu li:hover {
 display: inline-block;
 background-color:#4c9e9e;
 transition: 0.3s ease;
}
.menu li + li {
 margin-top: 12px;
}
input[type=checkbox]:checked ~ .menu{
 display: block;
}
.hamburger {
 display: block;
}
  
}