@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

body {
	background: url(/photos/background.jpg);
	background-attachment: fixed;
	width: 100%;
	height: 100%;
	margin: 0;
	font-family: Roboto;
	font-size: large;
}

main {
	display: block;
	background:#ccb988;
	margin: 10vh 20vw 10vh;
	padding: 20px;
}

#tabs {
	font-size: 1em;
}
main img{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;          /* keeps them from overflowing */
  max-width: 100%;     /* makes sure they shrink on small screens */
  height: auto;  /* keeps aspect ratio for images */
}
main div{
	max-width: 100%;
}
main embed{
	width:80%;
    text-align: center;
	margin-left: auto;
    margin-right: auto;
}
main iframe{
	max-width: 100%;
}
#tabs {
  display: flex;
  gap: 24px; /* Adjust spacing between tabs */
  justify-content: center; /* Optional: center the tabs */
  margin: 20px 0; /* Optional: add vertical spacing */
}

#tabs a {
  font-size: 1.2rem; /* Increase font size */
  font-weight: bold;
  text-decoration: none;
  color: #333; /* Customize tab color */
  padding: 8px 12px; /* Add padding for clickable area */
  transition: all 0.3s ease; /* Smooth hover effect */
}

#tabs a:hover {
  color: #0077cc; /* Change color on hover */
  text-decoration: underline;
}
@media(max-width:500px){main{margin:0!important;}}