@font-face {
  font-family:Tacoma;
}
body{
  background-image:url("bathroom/background.jpg");
  /*background-color:#8eb3ed;*/
  background-repeat:no-repeat;
  background-size: cover;
  background-position:center;
  font-family:Tacoma;
  font-size:1vw;
  color:#000f55;

}
header{
  background-color:#cdf7cf;
  text-align:center;
  perspective:70vw;

}
h1{
  perspective: 70vw;
  font-size:5vw;
  text-transform: none;
  color:#0033cc;
  text-shadow:0.3vw 0.3vw #000000;
  /*transform-style:preserve-3d;*/
}
h1:hover{
  /*transition:transform 2s;
  transform:rotateY(360deg);*/
  font-size:6vw;
  color:red;
  text-shadow:0.6vw 0.6vw green;
}

h2{
  width: 40vw;
  perspective:70vw;
  /*transform-style:preserve-3d;*/
  font-size:3.5vw;
  font-style: italic;
  color:#0033cc;
  text-shadow:0.2vw 0.2vw #000000;
  /*transition-timing-function:ease;*/
}
h2:hover{
  /*transition: transform 3s;*/
  font-size:3.5vw;
  color:red;
  text-shadow:0.4vw 0.4vw green;
  /*transform:rotateX(360deg);*/
}
h3{
  perspective:70vw;
  /*transform-style:preserve-3d;*/
  font-size:2.5vw;
  text-shadow:0.2vw 0.2vw lightblue;
}
h3:hover{
  /*transition:transform 2s;
  transform:rotateY(360deg);*/
  font-size:3.5vw;
  text-shadow:0.2vw 0.2vw coral;
}

.text_nav{
  margin-top:50px;
}
#home_text{
  width:9.5vw;
}
nav{
  width:23vw;
  font-weight:bold;
  text-align:justify;
  font-size:2vw;
  float: right;
  border-style:double;
  border-width:0.3em;
  border-radius:2vw;
  border-color:#000099;
  padding:2vw;
  margin-top: 2vw;
  margin-left:2vw;
  margin-right:2vw;
  overflow-x: scroll;
}

#picture img{
  width:60vw;
  height: 30vw;
  padding-left:1.5vw;

}
figcaption{
  text-indent:15%;
}
p{
  display: inline-block;
  width:50vw;
  border-style:double;
  border-width:0.8vw;
  border-radius:2vw;
  border-color:#000099;
  text-align: justify;
  line-height: 1.4em;
  text-indent:1.5em;
  font-style:oblique;
  font-size:2.5vw;
  color:black;
  padding:2vw;
  margin-left:4%;

}
#button{
  float:right;
  background-color:Transparent;
  font-size:5vw;
  font-weight:900;
  color:#000099;
  border-color:#000099;
  width:8vw;
  border-radius:2vw;

}


.simple{
  float: right;
}


.complex{
  float: left;
}


#inside{
  width: 12vw;
  display: inline;
  float:left;
  border-style:double;
  font-size: 1.2vw;
  padding:2vw;
  margin-left:4vw;
  border-width:0.3vw;
  border-radius:2vw;
  text-align: left;
  clear: both;
  display: inline;

}
#outside{
  width: 12vw;
  display: inline;
  float:right;
  border-style:double;
  font-size: 1.2vw;
  padding:2vw;
  margin-left:0vw;
  border-width:0.3vw;
  border-radius:2vw;
  text-align: left;
  clear: none;
  display: inline;

}
.text{
  margin-top:50vw;
}
#cicle{
  margin-left:15%;
  display:block;
}
figcaption{
  text-indent:2%;
  font-size: 1.5vw;
}

#cicle img{
  width:20vw;
  height:15vw;
}
img{
  width: 20vw;
  height: 15vw;
  margin-left: 2vw;
  border-radius: 3vw;
}
img:hover{
  transform: scale(1.3, 1.2);
  transition:2s;
  transition-timing-function: ease;
}
audio{
  width: 30vw;
}


#an_table{
  text-indent:2%;
}
footer{
  background-color:#2ac8e8;
  text-align:center;
}