@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    width:100vw;
    height:100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #1b384a;
}
.container{
    width:50vw;
    height:80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color:#3dc1ff;
    border-radius:9rem 0;
    box-shadow:0 0 4px 0.2px white;
}
.inner{
    width:80%;
    height:80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color:white;
    position: relative;
    border-radius:9rem 0;
    box-shadow:0 0 10px 0.2px #1b384a;
}
.number{
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
pointer-events: none;
}
.number img{
    position: absolute;
    top: 0;
    right: 0;
    width: 3rem;
    height:3rem;
    z-index: 999;
    pointer-events:all;
}
.number img:hover{
    animation: rotate 2s ease-in-out alternate;
}
@keyframes rotate {
    from{
transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);   
    }
}
.txt{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    top:30%;
    left:0;
    width: 100%;
    max-height:40%;
   word-break: none;
}
.fa-quote-left
{
    z-index: 999;
    position: absolute;
    top:20%;
    left:10%;
    color:grey;
    font-size:2rem;
}
.btn{
    position: absolute;
    bottom: 5%;
    left:50%;
    transform: translate(-50%,-5%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top:auto;
    height: 15%;
    width:40%;
    border-radius:2rem 0rem;
    background-color:#2073e6;
}
#btn{
   text-align: center;
   margin:auto;
   color:white;
   font-size: 2.3ch;
   font-family: 'DM Serif Display', serif;
    z-index: 999;
    text-transform:capitalize;
    font-weight:600;
    cursor:pointer;
}
#quotes{
    font-family: 'Shadows Into Light', cursive;
    text-align: center;
    width:100%;
    max-height:40%;
    font-size:3ch; 
    margin-top: 1rem;
}
#author{
    font-family: 'Shadows Into Light', cursive;
    font-size:2.5ch; 
    font-weight: 600;
}
@media screen and (max-width:500px)
{
    #quotes{
        font-size:2ch;
    }
    #author{
        font-size: 1.57ch;
    }
    #btn{
        font-size: 1.5ch;
    }
    .container{
        border-radius:1rem;
        width:80vw;
    }
    .inner{
        border-radius:1rem;
        width:90%;
    }
    .btn{
        border-radius:0.5rem;
    }
}