@charset "utf-8";
/* CSS Document */

.font01{
    margin-top: 0px;
}

body{
    background-color: #9cdb43;
}

#outside01{
    margin: auto;
    padding-left: 5%;
    align: center;
    width: 1160px;
    height: 700px;
    background-color: none;
}

#nature{
    position: absolute;
    top: 20%;
    left: 38%;
    width: 500px;
    height: 500px;
    background-color: none;
    background-image: url('./image/1.gif');
    background-size:101%;
    border-style: inset;
    border-color: #1a7a3e;
}
#home{
    position: absolute;
    top: 17%;
    left: 43%;
    width: 135px;
    height: 200px;
    background-color: none;
}

#face01{
    float: left;
    width: 1020px;
    height: auto;
    color: white;
    text-align: center;
    border-style: inset;
    border-color: #1a7a3e;
    padding-top: 0px;
    background-color: white;
}

#head01{
margin-top: 0px;
padding-top: 20px;
width: 100%;
height: 70px;
color: #d6f264;
text-align: center;
background-color: #14a02e;
}

nav{
    width: 1020px;
    height: 55px;
    background-color: #1a7a3e;

}
.navig01{
    margin: 2px;
    float: left;
    height: 50px;
    width: 200px;
    background-color: #d6f264;
    transition-duration: 0.4s;
    cursor: pointer;
    color: rgba(0,0,0,1);
}
.navig01 p{
    padding-top: 0px;
}
.navig01:hover{
    background-color: white;
    color: blue;
}
#contentBox{
padding-top: 10px;
width: 1020px;
height: 550px;
background-color: #d6f264;
}

#settings{
text-align: center;
margin-left: 10px;
padding: 5px;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 90%, 0% 100%);
float: left;
width: 100px;
height: 580px;
transition: 2s;
background-color: #14a02e;

}

.theme{
    margin-bottom: 6px;
    width: 100px;
    height:30px;
    padding-top: 10px;
    background-color: #59c135;
    color: black;
    size: 5px;
}

a{
    text-decoration: none;
}

.theme p{
    margin:0px;
    color: black;
    align: center;
    text-decoration: none;
}

#room{
    margin: auto;
    width: 95%;
    height: 400px;
    background: red;
    background-image: url('bg.png');
    background-position-x: -300px;
    background-position-y: center;
}

.Discus{
    position: absolute;
    background-image: url('./image/green_discus.gif');
    height:100px;
    width:100px;
}
.Paedocyprisa{
    position: absolute;
    background-image: url('./image/green_paedocyprisas.gif');
    height:30px;
    width:90px;

}
.moveL{
    left: -5%;
    animation-name: fishMoveAnimationL;
    animation-duration: 40s;
    animation-iteration-count: infinite;
}
.moveR{
    right: -5%;
    animation-name: fishMoveAnimationR;
    animation-duration: 40s;
    animation-iteration-count: infinite;
}
#f01{
    top: 7px;
    animation-delay: 20s;
}

#f02{
    top: 56px;
    animation-delay: 12s;
}

#f03{
    top: 159px;
    animation-delay: 9s;
}

#f04{
    top: 310px;
    animation-delay: 10s;
}

#f05{
    top: 610px;
    animation-delay: 14s;
}

#f06{
    top: 719px;
    animation-delay: 1s;

}
#f07{
    top: 56px;
    animation-delay: 13s;
}
#f08{
    top: 80px;
    animation-delay: 11s;
}
#f09{
    top: 108px;
    animation-delay: 12s;
}
#f10{
    top: 236px;
    animation-delay: 7s;
}
#f11{
    top: 268px;
    animation-delay: 6.5s;
}
#f12{
    top: 272px;
    animation-delay: 8s;
}
#f13{
    top: 308px;
    animation-delay: 7.5s;
}


@keyframes fishMoveAnimationL{
    0% {left: -5%; transform: rotateY(0deg);}
    49% {left: 100%; transform: rotateY(0deg);}
    50% {left: 100%; transform: rotateY(180deg);}
    99% {left: -5%; transform: rotateY(180deg);}
    100% {left: -5%; transform: rotateY(360deg);}
}

@keyframes fishMoveAnimationR{
    0% {right: -5%; transform: rotateY(180deg);}
    49% {right: 100%; transform: rotateY(180deg);}
    50% {right: 100%; transform: rotateY(0deg);}
    99% {right: -5%; transform: rotateY(0deg);}
    100% {right: -5%; transform: rotateY(3600deg);}
}