:root{
  --background-color: rgba(225, 225, 225, 1);
  --background-color-alt: rgba(25, 25, 25, 1);
  --text-color: rgba(25, 25, 25, 1);
  --text-color-alt: rgba(225, 225, 225, 1);
  --border-color: lightgrey;
  --border-color-alt: darkgrey;
  
  --header-size: 2.5em;
  --subtext-size: 1.1em;
  --h1-size: 2.1em;
  --h2-size: 1.8em;
  --h3-size: 1.3em;
  --p-size: .9em;
}

*{
  margin: 0;
  padding: 0;
  list-style-type: none;
  box-shadow: none;
}

h1{
  font-size: var(--h1-size);
  padding-top: 20px;
}

h2{
  text-align: center;
  padding-bottom: 20px;
  font-size: var(--h2-size);
}

h3{
  font-size: var(--h3-size);
}

p{
  font-size: var(--p-size);
  margin-bottom: 20px;
}

/*Sticky Graphic*/
header, section{
  justify-content: center;
  align-items: center;
  top: 0;
  position: sticky;
}

/*Header Section*/
header{
  background: url("/N_LensMuse-Images/Landscape 2.jpg");
  height: 100vh;
  z-index: 1;
  color: var(--text-color-alt);
}

.main-header, .sub-header {
      display: block;
      width: 100%;
      text-align: center;
  /* Optional: defines a width for the image */
}

.main-header{
  font-size: var(--header-size);
  color: var(--text-color-alt);
}

.sub-header{
  font-size: var(--subtext-size);
  color: var(--text-color-alt);
  margin-top: 50px;
}

/*Navigation Section*/
nav{
  position: absolute;
  top: 0;
  padding-bottom: 50px;
}

/*Tab Nav Bar*/
.nav-bar-section:not(.photos){
  z-index: 4;
  background: var(--background-color-alt);
  color: var(--text-color-alt);
}
 
.nav-bar-subtext{
  margin-top: 30px;
}

/*Style the tab menu*/
.tab-menu{
  overflow: hidden;
}

/*Style the button inside the menu*/
.tab-menu button{
  background-color: inherit;
  float: left;
  margin-left: 10px;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 15px;
  transition: 0.3s;
  font-size: var(--p-size);
  color: var(--text-color-alt);
}

/*Change background color of a butons on hover*/
.tab-menu button:hover{
  background-color: var(--background-color-alt);
  border-radius: 20px;
}

/*Create an active/current tablink class*/
.tab-menu button.active{
  border-bottom: 2px solid var(--text-color-alt);
  font-weight: bold;
}

/*Style the tab content*/
.tab-content{
  padding: 20px;
  border-top: none;
  text-align: center;
  display: flex;
}

/*About Section*/
.about{
  background: var(--background-color-alt);
  z-index: 2;
  color: var(--text-color-alt);
  height: 100vh;
}

.about-grid{
  display: grid;
  grid-template-columns: 40% 10% 50%;
  padding: 20px;
}

.about-text{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--text-color-alt);
}

.about-img{
  width: 400px;
  height: 400px;
  overflow: hidden;
  border-radius: 0 20px 20px 20px;
}

/*Contact Section*/
.contact{
  z-index: 3;  
  background: var(--background-color);
  color: var(--text-color);
  height: 100vh;
}

.contact-me{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.contact-me li{
  display: inline-flex;
  padding: 10px 20px;
}

/*Poloriod Images and Images*/
img{
  width: 200px;
  height: 200px;
}

article{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 10px;
}

.photos{
  height: 100%;
}

.poloroid, .poloriod{
  background-color: white;
  padding: 15px 15px 40px 15px;
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

img.poloroid, img.poloriod{
  width: 200px;
  height: 200px;
  display: block;
}

.poloriod:hover, .poloroid:hover{
  transform: rotate(0deg) scale(1.05);
  cursor: pointer;
}

/*Footer section*/

/*Media Qeuries*/
@media only screen and (max-width: 600px){
  nav{
    padding-bottom: 50px;
  }
  
  .nav-bar-subtext{
    padding-top: 50px;
  }
  
  .about-grid {
    display: inline-block;
    padding: 20px;
  }
  
  .about-img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 100%;
  }
  
  article {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  
  .tab-menu{
    display: flex;
  }
  
  img.poloroid, img.poloriod{
    width: 150px;
    height: 150px;
    display: block;
}
}