@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&family=Open+Sans:wght@400;600;700&display=swap");

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('https://img.freepik.com/free-photo/vintage-old-rustic-cutlery-dark_1220-4886.jpg?size=626&ext=jpg&ga=GA1.1.2008272138.1712102400&semt=ais');
  background-size: cover;
  background-position: center;
}
.page-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100vh;
    /* Remove background-color */
    padding: 20px;
    box-sizing: border-box;
}


.social-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}


.social-media-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: white;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: 120px 20px; /* top and bottom padding of 210px, left and right padding of 20px */
  box-sizing: border-box;
}


.social-button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: none;
  width: 64px;
  height: 64px;
  text-decoration: none;
  border-radius: 100%;
  background: #fff;
  text-align: center;
}
.social-button::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  display: block;
  width: 0;
  height: 0;
  border-radius: 100%;
  transition: 0.3s;
}
.social-button:focus, .social-button:hover {
  color: #fff;
}
.social-button:focus::after, .social-button:hover::after {
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  margin-left: calc(-50% - 1px);
}
.social-button i,
.social-button svg {
  position: relative;
  z-index: 1;
  transition: 0.3s;
}
.social-button i {
  font-size: 25.6px;
}
.social-button svg {
  height: 40%;
  width: 40%;
}
.social-button--mail {
  color: #0072c6;
}
.social-button--mail::after {
  background: #0072c6;
}
.social-button--facebook {
  color: #3b5999;
}
.social-button--facebook::after {
  background: #3b5999;
}
.social-button--linkedin {
  color: black;
}
.social-button--linkedin::after {
  background: black;
}

.social-button--Website {
  color: #212121;
}
.social-button--Website::after {
  background: #212121;
}
.social-button--steam {
  color: #7da10e;
}
.social-button--steam::after {
  background: #7da10e;
}
.social-button--snapchat {
  color: #eec900;
}
.social-button--snapchat::after {
  background: #eec900;
}
.social-button--twitter {
  color: #55acee;
}
.social-button--twitter::after {
  background: #55acee;
}
.social-button--instagram {
  color: #e4405f;
}
.social-button--instagram::after {
  background: #e4405f;
}
.social-button--npmjs {
  color: #c12127;
}
.social-button--npmjs::after {
  background: #c12127;
}

.page-header {
  text-align: center;
  padding: 20px;
  background-color: #333;
  color: white;
}

.company-info {
  text-align: center;
  margin-bottom: 20px;
}

.company-logo {
  width: 30%; /* Adjust size as needed */
}

.company-name {
  font-weight: bold; /* Add bold font weight */
  font-size: 10vh;
  font-family: 'Dancing Script', cursive;
  color: orange;
  margin-top: 10px;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.follow-us {
  color: white;
  margin-top: 10px;
  position: relative;
}

#book{
	width:100%;
	height:100%;
}

#book .turn-page{
	background-color:#333;
}

#book .cover{
	background:#333;
}

#book .cover h1{
	color:white;
	text-align:center;
	font-size:50px;
	line-height:500px;
	margin:0px;
}

#book .loader{
	background-image:url(loader.gif);
	width:24px;
	height:24px;
	display:block;
	position:absolute;
	top:238px;
	left:188px;
}

#book .data{
	text-align:center;
	font-size:40px;
	color:#999;
	line-height:500px;
}

#controls{
	width:800px;
	text-align:center;
	margin:20px 0px;
	font:30px arial;
}

#controls input, #controls label{
	font:30px arial;
}

#book .odd{
	background-image:-webkit-linear-gradient(left, #333 99%, #333 100%);
	background-image:-moz-linear-gradient(left, #333 99%, #333 100%);
	background-image:-o-linear-gradient(left, #333 99%, #333 100%);
	background-image:-ms-linear-gradient(left, #333 99%, #333 100%);
}

#book .even{
	background-image:-webkit-linear-gradient(right, #333 99%, #333 100%);
	background-image:-moz-linear-gradient(right, #333 99%, #333 100%);
	background-image:-o-linear-gradient(right, #333 99%, #333 100%);
	background-image:-ms-linear-gradient(right, #333 99%, #333 100%);
}


#book {
  width: 800px;
  height: 600px;
  margin: 20px auto;
  position: relative;
  overflow: hidden;
}
.page {
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.odd {
  background-color: #f9f9f9;
}
.even {
  background-color: #e9e9e9;
}
#controls {
  text-align: center;
  margin-bottom: 20px;
}
.clsImg {
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: 0 auto;
}

@media (max-width: 768px) {
    .company-logo {
        width: 180px; /* Adjust size as needed */
    }

    .company-name {
        font-size: 3.5em;
    }

    .follow-us {
        font-size: 1.2em;
    }

    .social-button {
        width: 40px;
        height: 40px;
        font-size: 1em;
    }

    #book {
        width: 100%;
        height: 270px; /* Adjust height as needed */
    }
    .clsImg {
      max-width: 100%;
      max-height: 100%;
      margin: 0 auto;
    }
   
}

.menu {
  font-weight: bold; /* Add bold font weight */
  font-size: 3vh;
  font-family: 'Roboto', sans-serif; 
  color: whitesmoke;
  margin-top: 10px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Preloader container */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #221E1F; /* background color */
  z-index: 9999; /* ensure it's above other elements */
  display: flex;
  justify-content: center;
  align-items: center;
}

.preloader img {
  max-width: 100%; /* Adjust size as needed */
  max-height: 100%; /* Adjust size as needed */
}

@keyframes spin {
  0% { transform: rotate(0deg) scale(1); }
  100% { transform: rotate(360deg) scale(1); }
}

.spinning-image {
  animation: spin .7s linear infinite;
}

footer {
  color: white; /* Set text color */
  padding: 10px 0; /* Add padding */
  text-align: center; /* Center align text */
  opacity: 50%;
}

footer a {
  color: orange; /* Set link color */
  text-decoration: none;
}

@media (max-width: 768px) {
  footer {
      font-size: 14px; /* Decrease font size for smaller screens */
      text-align: center; /* Center align text */
      color: white; /* Set text color */
      opacity: 50%;
  }
 footer a {
  color: orange; /* Set link color */
  text-decoration: none;
 }
}