*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}

a{
    text-decoration: none;
    color:inherit;
    cursor:pointer;
}
footer{
    position:fixed;
    margin-top:10px;
    left:0;
    bottom:0;
    width:100%;
}

.banner{
    display: flex;
    justify-content: center;
    padding:10px;
    color:#FFFFFF;
    background-color: purple;
    background:linear-gradient(to right,#3c1053,purple);
    box-shadow: 0 0 8px 0 rgba(0,0,0,.6);
}
.align-center{
    text-align: center;
}
.btn{
    font-size: large;
    height:50px;
    width:20rem;
    color:#FFFFFF;
    border-radius: 20px;
    background:linear-gradient(to right,#3c1053,purple);
    border: none;
    cursor: pointer;
}
.btn:hover{
    background:linear-gradient(to right,purple,#3c1053);
}
.text-box{
    resize:vertical;
    padding:10px;
    border-radius: 5px;
    outline-color:purple;
    background-color: #fff;
    border: 2px solid purple;
    margin: 10px;
    height:10rem;
    width: 40rem;
}
.text-container{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
.text-display{
    margin-top:7px;
    margin-bottom:7px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor:pointer;
    height:50px;
    background-color: #ccc;
    box-shadow:0 2px 5px 0 rgba(0,0,0,.16),10px 2px 10px 10px rgba(0,0,0,.12);
    border: 1px solid black;
}
.text-display:hover{
    background-color: #FFFFFF;
}

@media (max-width: 450px){
    footer{
        position:unset;
        margin-top:10px;
    }
    .text-display{
        border-radius: 10px;
    }
    .text-box{
        width:18rem;
    }
    .btn{
        width:15rem;
    }
}