body{

height: 100%;
font-family: 'Itim', cursive;
background-color:rgb(100,100,100);
color: white;
z-index: -2;
}

::-webkit-scrollbar{

width:1vw;


}

audio::-webkit-media-controls-panel {
  background-color: rgba(100, 100, 100, 10.0);
}

/* Style the navigation menu */
.navbar {
  width: 100%;
  background-color: rgba(110, 110, 110, 10.0);
  overflow: hidden;
}

/* Navigation links */
.navbar a {
  float: left;
  padding: 5px;
  color: white;
  text-decoration: none;
  font-size: 17px;
  width: 23%; /* Four equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */
  text-align: center; /* If you want the text to be centered */
}

/* Add a background color on mouse-over */
.navbar a:hover {
  background-color: rgba(120, 120, 120, 10.0);
  color: white;
}

/* Style the current/active link */
.navbar a.active {
  background-color: rgba(125, 125, 125, 10.0);
}

/* Add responsiveness - on screens less than 500px, make the navigation links appear on top of each other, instead of next to each other */
@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
    width: 100%;
    text-align: left; /* If you want the text to be left-aligned on small screens */
  }
}

@keyframes weeee {
   0%  {transform: translateX(0%)translateY(0%) rotate(-1deg);; }
  25% { transform: translateX(-4%)translateY(1%)rotate(1deg); }
  50% {transform: translateX(-1%)translateY(2%)rotate(0deg); }
  75% { transform: translateX(-3%)translateY(1%)rotate(-1deg);; }
 100% { transform: translateX(-2%translateY(2%)rotate(1deg);
   ); }
}


@keyframes weeee2 {
   0%  {transform: translateX(0%)translateY(0%) ; }
  25% { transform: translateX(0%)translateY(0%)rotate(0deg); }
  50% {transform: translateX(0%)translateY(0%)rotate(0deg); }
  75% { transform: translateX(0%)translateY(0%)rotate(0deg);; }
 100% { transform: translateX(0%translateY(0%)rotate(0deg);
   ); }
}


@keyframes weeee22 {
   0%  {transform: translateX(0%)translateY(0%) ; }
  25% { transform: translateX(-2%)translateY(1%)rotate(1deg); }
  50% {transform: translateX(-1%)translateY(2%)rotate(0deg); }
  75% { transform: translateX(-1.5%)translateY(1%)rotate(-1deg);; }
 100% { transform: translateX(-2%translateY(2%)rotate(1deg);
   ); }
}

@keyframes wiggle {
    0% { transform: rotate(0deg); }
   80% { transform: rotate(0deg); }
   85% { transform: rotate(5deg); }
   95% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}


#photos{
padding-top: 4vw;


margin-bottom: auto;

}




.title{
font-size: 2.5vw;
position: absolute;
text-indent: 2vw;
line-height: 1.2vw;
margin-top: 1vw;
}

.tooltiptext{
font-size: 1.0vw;
background-color: none;




}

#maindiv{
font-family: 'Itim', cursive;

text-indent: 1vw;

font-size: 4vw;
color: white;
height: 60vw;




}








#logo1{

float: left;

margin-top: 15vh ;
padding-bottom: auto;
border-width: thick;
border-color: white;
text-align: center;
color: white;
width: 100%;
height:100%;
display: block;
margin-left: auto;
margin-right: auto;

}

.logo1:hover{
animation: up 1s linear infinite alternate;


}

@keyframes up {
   0%  {transform:translateY(0%) ; }
  25% { }
  50% {}
  75% {  }
 100% { transform: translateY(2%)rotate(1deg);
   ); }
}


@media screen  and (orientation: portrait) {
  html {



  }
}


.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;

}

.flex-container {
  display: flex;
padding-left: 0vw;
  line-height: auto;
  flex-wrap: wrap;
}
#background{
width: auto;
 height:auto;
max-height: 68vh;
max-width: 50vw;
border-style:  none;

overflow-x: hidden;

float: left;
z-index: 1;
border-radius: 6vw;
color: rgb(255, 255, 255);

padding-top: 3vw;
margin: auto;
margin-top: 15vh ;
margin-left: 15vw ;

animation: weeee2 400s linear infinite alternate;

}
#side{
width:15vw;
height:35vw;
margin-right: 6vw;
margin-top: 12vw;
float: left;
border-style: solid;
border-width: .5vw;
border-color: white;
margin-left: 2vw;
  /* background-image: url("clouds.jpg"); */

border-radius: 20vw;
z-index: 3;
color: rgb(255, 255, 255);
font-size: 2vw;
animation: weeee2 40s linear infinite alternate;

}

#side2{
width:11vw;
height:4vw;

margin-top: 4vw;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width:.5vw;
border-color: white;
padding-top: 1vw;

border-radius: 50vw;
z-index: 3;line-height: 1.0;
color: rgba(250, 250, 250, 10.0);
 text-align: center;

color: rgb(255, 255, 255);
font-size: 2vw;


  background-image: url("clouds2.jpg");
  animation: weeee2 40s linear infinite alternate;
  animation: weeee2 40s linear infinite alternate;

}

#side3{
  width:13vw;
  height:4vw;
  margin-left: auto;
  margin-right: auto;
margin-top: 2vw;
 text-align: center;
border-style: solid;
border-width: .5vw;
border-color: white;
  background-image: url("skies.jpg");

border-radius: 50vw;
z-index: 3;line-height: 1.0;
color: rgb(255, 255, 255);
font-size: 3vw;word-spacing: .2vw;


}



#side4{
  width:13vw;
  height:4vw;
margin-top: 2vw;
  margin-left: auto;
  margin-right: auto;
 text-align: center;
border-style: solid;
border-width: .5vw;
border-color: white;
  background-image: url("stars.jpg");
line-height: 1.0;
border-radius: 50vw;
z-index: 3;
color: rgb(255, 255, 255);
font-size: 3vw;

animation: weeee2 40s linear infinite alternate;

}
#side5{
  width:13vw;
  height:4vw;
  margin-left: auto;
  margin-right: auto;
margin-top: 2vw;
 text-align: center;
border-style: solid;
border-width: .5vw;
border-color: white;
color: rgb(255, 255, 255);
font-size: 3vw;
  background-image: url("aurora.jpg");

  animation: weeee2 40s linear infinite alternate;


border-radius: 50vw;
z-index: 3;line-height: 1.0;
}



.side{


border-width: .5vw;

}