* {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Roboto Slab','Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    background-color: #f8f6e9;
}

.nav>ul {
    display: flex;
    list-style-type:none;
}

.story{
    background-color:  rgb(255, 210, 63);
    width: 100px;
    height: 40px;
    text-align: center;
    margin: 5px;
    padding-top:5px;
    border-radius: 5px;
    box-shadow: 2px 5px 12px 1px rgba(0,0,0,0.3);
 }

 .story:hover{
     background-color: rgba(255, 210, 63, 0.685);
     cursor: pointer;
 }

main {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.container {
    margin-top: 10px;
    width: 1000px;
    height: 600px;
    /* background-color: rgba(52, 51, 53, 0.164); */
    display: flex;
}

.imgPanel {
    width: 50%;
    height: 100%;
    /* background-color: rgba(55, 43, 226, 0.356); */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#img {
    min-width: 300px;
    max-width: 500px;
    animation: showUp 1.2s ease-in 1;
  
}

@keyframes showUp{
    0% {opacity: 0}
    100% {opacity: 1};
}

.textPanel {
    width: 50%;
    height: 100%;
    /* background-color: rgba(43, 226, 202, 0.301); */
    box-shadow: 1px 5px 15px 2px rgba(0,0,0,0.3);
    border-radius: 10px;;
}

.textDest {
    width: 100%;
    height: 70%;
    /* border: 1px solid grey; */
    display: flex;
    flex-direction: flex-start;
    flex-wrap: wrap;
    align-items: center;
    
}

.word {
    display: inline-block;
    font-size: 3rem;
    padding: 10px 10px;
    z-index: 5;
    animation-name: showWord;
    animation-duration: 1.5s;
    animation-timing-function: ease-in;
    animation-iteration-count: 1;
    /* animation-fill-mode: forwards; */
 
}

@keyframes showWord{
    0% {opacity: 0}
    100% {opacity: 1}
}

.word:hover,
.word:active {
    background-color: grey;
    color: white;
    border-radius: 10px;
    cursor: pointer;
    animation-name: zoom;
    animation-duration: 2s;
    animation-timing-function: ease-in;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes zoom {
    0% {
        transform:  scale(1);
        
    }
    100%
    {
        transform:  scale(2.5);}
    
}


.speedSound {
    width: 100%;
    height: 30%;
    /* border: 1px solid grey; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: rgba(155, 226, 149, 0.705);
    border-bottom-right-radius: 10px;
    border-bottom-right-radius: 10px;
    
}

p.letter {
    text-align: center;
    font-size: 3rem;
    background-color: rgb(14, 173, 105);
    /* padding: 10px 20px; */
    color: white;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    margin: 0px 10px;
    display: inline-block;
    z-index: 2;
    /* animation: jump 1s ease 1; */
    }

.letter:hover, .letter:active{
    background-color: rgb(84, 13, 110);
    cursor: pointer;
    animation: jump 1.5s ease 1;
}

@keyframes jump {
    0%{
        transform: translate(0, 0px) rotate(odeg);
    }
    60%{
        transform: translate(0, -20px) rotate(360deg);
    }
    100%{
        transform: translate(0, 0px) rotate(0deg);;
    }
  
}

.pageStatus {
    margin-top: 15px;
}

.btn {
    margin-left: auto;
    margin-right: auto;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position:absolute;
    opacity: 0.8;
    border: none;
    background-color:rgb(59, 206, 172);
    font-size: 1.2rem;
    
}



.btn:hover{
    background-color: rgb(14, 173, 105);
    cursor: pointer;
    /* transition: border-raduius 2s ease-out;
    border-radius: 20px; */
}

.next{
    right: 2%;
}
.pre{
    left: 2%;
}
.starDiv{
    position: relative;
    align-self: flex-end;
    z-index: 1;
}
.credit{
    display: inline-block;
    width: 80px;
    height: 80px;
    background-color: rgba(255,255,0,0.3);
    border-radius: 10px;
    overflow: hidden;
}

.credit > img{
    width: 85px;
}
.creditStar {
    cursor: pointer;
    animation: moveIn 2s ease-in 1 forwards;
}
@keyframes moveIn {
    0%
    {transform: translate(-100px, 0px)}
    100%{
        transform: translate(0px, 0px);
    }
}



/*
purple: rgb(84, 13, 110);
red: rgb(238, 66, 102);
yello: rgb(255, 210, 63);
cyanBlue: rgb(59, 206, 172);
green: rgb(14, 173, 105);
*/