﻿html {
width: 100% ;
height: 100% ; 
min-width: 1000px ;
min-height: 1000px ;
font-size-adjust: auto ;
margin: auto ;
}

body {
    background-color:SkyBlue ;
    filter: ;
    font-size-adjust: auto ;
}


.header {
  width: 100% ;
  height: 100% ;
  background-size: cover ;
  background-color: #f1f1f1 ;
  display: flex ;
  justify-content: center ;
  align-items: center ;
  text-align: center ;
  position: relative ;
}

#navbar {
  position: sticky ;
  overflow: hidden ;
  background-color: slateblue ;
  display: flex ;
  z-index: 2 ;
}

#navbar a {
  float: left ;
  display: block ;
  color: #f2f2f2 ;
  text-align: center ;
  padding: 14px 16px ;
  text-decoration: none ;
  font-size: 17px ;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  background-color: gray ;
  color: white ;
}

.content {
  padding: 0 ;
  margin: 0 ;
}

.sticky {
  position: fixed ;
  top: 0 ;
  width: 100% ;
}

.stic + .content {
  padding-top: 55px ;
}

.centered {
  position: absolute ;
  top: 50% ;
  left: 50% ;
  transform: translate(-50%, -50%) ;
}

img.sticky {
  position: -webkit-sticky ;
  position: sticky ;           none
  top: 0 ;
  width: 100px ;
}

.stic {
  position: -web-sticky ;
  position: sticky ;
  top: 0 ;								none
  width: 50px ;
  z-index: 1 ;
}

.stick {
  font-size: 10vw ;
  font-width: 600 ;
  position: static ;
  top: 55px ;
  text-align: left ;
  height: calc(10vw + 20px) ;
  transition: all 0.2s ease-in ;
  display: grid ;
  
}