html {font-size: 100%;

}

@font-face {
  font-family: 'Brasika Display - Trial Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Brasika Display - Trial Regular'), url(stuff/brasika-display-trial.woff) format('woff');

}

.lego{
  text-align: center;
  margin-left: auto; 
  margin-right: auto;
  color: white;
  font-size: 50px;
}

.guide{
  color: white;
  display: flex;
  flex-direction: row;
  padding: 5px;
  position: sticky;

  font-size: xx-large;
  text-align: center;
  white-space: nowrap;
  justify-content: space-evenly;
  align-content: center;
  margin-left: auto;
  margin-right: auto;
  max-width: max-content;
  
}

.guidebo {
  color: white;
  display: flex;
  flex-direction: row;
  padding: 5px;
  position: fixed;

  font-size: xx-large;
  text-align: center;
  white-space: nowrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  bottom: 5px;
  max-width: 50%;
  right: 45%;
  left: 45%;
}

#guideb{
  background-image: url(/Pics/button.png);
  padding: 1px;
  color: rgb(43, 255, 0);
  background-size:contain;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  vertical-align: baseline;
  min-width: fit-content;
  min-height: fit-content;
  text-decoration: none;
  font-size: larger;
  display: inline-block;
  background: transparent;



}

.sspp{
  max-width: 10%; 
  max-height: 10%;  
  position: fixed;
  top: 15px;
  right:15px;
}

.lib{
  background-color:#c8ff00;
  color:  rgb(79, 255, 138);

}



.album{
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  text-align: center;
  justify-content: center;
  align-items: center;
  margin-left:auto;
  margin-right: auto;
  background-color: #00BF63;
  max-width: 60%;
  max-width: 100%;
  max-height: 100%;

}

.fresh { 
  border:15px solid yellowgreen;
  max-width: fit-content;
  margin:auto
  }


#albumb{ 

display: flex;
align-items: center;
align-content: center;
justify-content: center;
max-width: 100%;
max-height: 100%;


}


.container{

    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    align-content: center;
    flex: auto;
    
}


 img {
    max-width: auto ;
    max-height: auto;
 }  

.ssp{
    font-size: x-large
    
  }




.insta{

    display: flex;
    align-items: center;
    justify-content: center;
    
}



.ohsh{
    align-items: center;
}

.tour{
    text-align: center;
    color: #d9ff00;
    background-image: url(/Pics/scheduleb.png);
    background-repeat: no-repeat;
    background-size: round;   
}
table {
  width: auto;
  height: auto;
  overflow: auto;
}

table{

  color: #00BF63;
  background: #003316 ;
    table-layout: auto;
    border-collapse: collapse;
    border: 3px solid #2F6145;
    border-spacing: 20px;
    max-width: 75%;
    padding: 10%;
    position: absolute;
    bottom: 0px;
    right: 35%;
    font-size: 45px;
}
thead th,
tfoot th {
  font-family: "Rock Salt", cursive;
}
table, th, td{
  border: 1px, solid black;
}
th {
  letter-spacing: 2px;
}

td {
  letter-spacing: 1px;
}

tbody td {
  text-align: center;
}

tfoot th {
  text-align: right;
}
thead,
tfoot {
  background: url(leopardskin.jpg);
  color: #00BF63;
  text-shadow: 1px 1px 1px #02582e;
}

thead th,
tfoot th,
tfoot td {
  background: linear-gradient(to bottom, (#04b14f / 10%),(#003316 / 100%));
  border: 3px solid #2F6145;
}


@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@900&display=swap');

.storec {

    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    align-content: space-evenly;
    background-image: url(Pics/pods.jpg);
    font-family: 'Raleway', sans-serif;
}


.storef{
  max-width: 740px;
  max-height: 800px;
  color: wheat  ;
  background-color: dimgrey;
  padding: 10px;
  margin: 5%;
  input[type=text], select, textarea {
    width: 100%; /* Full width */
    padding: 12px; /* Some padding */ 
    border: 1px solid #000000; /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    background-color: #acd8a6;
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
  }
  
  /* Style the submit button with a specific background color etc */
  input[type=submit] {
    background-color: #04AA6D;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  /* When moving the mouse over the submit button, add a darker green color */
  input[type=submit]:hover {
    background-color: #45a049;
  }
  
  /* Add a background color and some padding around the form */
  .containers {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
  }
}

.containerb{
  color: #DB1ADD;
}

.marq{
  font-size: xx-large;
  color: white;
}


.gallery {
  /* (A1) GRID LAYOUT - 3 IMAGES PER ROW */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 20px;
 
  /* (A2) OPTIONAL WIDTH RESTRICT */
  max-width: 1000px;
  margin: 0 auto;
  overflow: hidden;
}
 
/* (B) GALLERY IMAGES */
.gallery img {
  /* (B1) DIMENSION */
  width: 100%;
  height: 180px; /* optional */
  padding: 10px;
}

#spinner {
  color: white;
  font-size: 100px;
  animation-name: spin, depth;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 3s;
  text-align: center;
  position: absolute;
  top: 10%;
  

}
@keyframes spin {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(-360deg); }
}
@keyframes depth {
  0% { text-shadow: 0 0 black; }
  25% { text-shadow: 1px 0 black, 2px 0 black, 3px 0 black, 4px 0 black, 5px 0 black; }
  50% { text-shadow: 0 0 black; }
  75% { text-shadow: -1px 0 black, -2px 0 black, -3px 0 black, -4px 0 black, -5px 0 black; }
  100% { text-shadow: 0 0 black; }
}

.fall{
  color: #00BF63;
      min-width: 100%;
    position: absolute;
}


.aboutus{
  font-size: xx-large;
  background-image: url(/Pics/ab.png);
  font-family: 'Times New Roman', Times, serif;
  color: #54C54B;
  background-repeat: no-repeat;
  max-width: 100%;
  max-height: 100%;
  background-size: contain;
  background-color: #F3F8D8;


}

.about{
  position: absolute;
  top: 55%;
  left: 20%;
}

.about2{
  position: absolute;
  top: 48%;
  left: 30%;
}
.about3{
  position: absolute;
  top: 40%;
  left: 40%;
}
.about4{
  position: absolute;
  top: 30%;
  left: 50%;
}
.about5{
  position: absolute;
  top: 65%;
  left: 35%;
}
.about6{
  position: absolute;
  top: 50%;
  left: 50%;
}

.contact{
  background-image: url(Pics/letter.png);
  background-repeat: no-repeat;
  background-size: cover;
 max-height:500px; 
}