html, body{
  margin: 0;
  padding: 0;
  background-color: #0d1216 !important;
}

/* main screen*/
.b1{
  width: 100%;
  height: 100vh;
  margin: auto;
  opacity: 1;
  background-image: url("home2.jpg");
  top: 0;
  display: table;
  background-size: cover;
  background-position:center;
}

.b2{
  width: 100%;
  height: 40vh;
  margin: auto;
  opacity: 1;
  background-image: url("privacy.jpg");
  top: 0;
  display: table;
  background-size: cover;
  background-position:center;
}

.in1{
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  max-width: none;
}


.btn-buy{
  font-size: 2.5vh !important;
  text-align: center;
}


#name {
  font-size: 450%;
}


a:visited{
  color:rgba(255, 255, 255, 0.712);
}

a:hover{
  color: #8c9b96 !important; /* Viridian green */
}

.row>*{
  padding-right: 0px !important;
  padding-left: 0px !important;
}

.light-gray{
  color: rgba(224, 222, 222, 0.979) !important;
}


img{
	width: 100%;
}

.gallery{
	padding: 0px 0;
}

.gallery img{
	padding: 10px;
	width: 100%;
	cursor: pointer;
}

#gallery-modal .modal-img{
	width: 100%;
}

.modal-content-custom{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: right;
  width: 100%;
  color: white;
  pointer-events: auto;
  background-color: white;
}

.modal{
  --bs-modal-width: 95% !important;
}

.modal-body-custom{
  position: relative;
  flex: 1 1 auto;
  border: 4px solid #0d1216;
}

.content{
  max-width: 32rem;
  margin: auto;
  text-align: center;
  width: 50%;
}
.content h1{
  font-family: 'Century Gothic',sans-serif;
  color: white;
  text-shadow: 2px 2px black;
}

.content h2{
  font-family: 'Century Gothic',sans-serif;
  color: white;
  text-shadow: 2px 2px black;
}

h5{
  color: rgb(219, 219, 219) !important;
}

.underline{
  padding-bottom: 1px; 
  border-bottom: 1px solid; 
  border-radius: 5%;
  color: rgba(255, 255, 255, 0.87);
}

.center{
  align-items: center;
  justify-content: center;
}

.pht{
  padding-top: 1.5vh;
  padding-bottom: 1.5vh;
}


.picture{
  width: 100%;
  border: 1px solid #313131;
}

.picture:hover {
  opacity: 0.7;
  transform: scale(1.01);
  transition: .3s;
}


.btn-primary{
  font-family: 'Century Gothic',sans-serif;
  background-color: #ffffff !important;
  color: black !important;
  border: 2px solid rgb(43, 43, 43) !important;
}

.embed-size-custom{
  height: 60vh !important; 
  width: 60rem !important;
}

/* If the screen size is 1200px wide or more*/
@media (min-width: 1200px){
  .modal-xl{
      --bs-modal-width: 70% !important;
  }
  
}

/* If the screen size is smaller than 1000px*/
@media (max-width: 1001px) {
  #name {
    font-size: 350%;
  }
  .btn-buy{
    margin: 1vh;
  }
}
/* If the screen size is smaller than 1000px*/
@media (max-width: 1000px) {
  .embed-size-custom{
    height: 47vh !important; 
    width: 47rem !important;
  }
  #name {
    font-size: 350%;
  }
}
/* If the screen size is smaller than 800px*/
@media (max-width: 800px) {
  .embed-size-custom{
    height: 33vh !important; 
    width: 35rem !important;
  }
  #name {
    font-size: 300%;
  }
}
/* If the screen size is smaller than 600px*/
@media (max-width: 600px) {
  .embed-size-custom{
    height: 27vh !important; 
    width: 28rem !important;
  }
  #name {
    font-size: 300%;
  }
}
/* If the screen size is smaller than 500px*/
@media (max-width: 500px) {
  .embed-size-custom{
    height: 25vh !important; 
    width: 26rem !important;
  }
  #name {
    font-size: 250%;
  }
}