.web-banner
{
    width: 100%;
}

.content
{
    position: relative; 
    
}

footer
{
    position: relative;
}

.character-content
{
    background: rgb(255,255,255);
    background: linear-gradient(3deg,  rgba(167,99,191,1) 0%, rgba(23,30,49,1) 75%, rgba(23,30,49,0.577468487394958) 100%);
    width: 100%; 
    display: flex;
    padding-bottom: 25px;
}

.character-container
{
    display: inline-block;
}

.character-container-2
{
    display: inline-block;
}

.character-right-content
{
    margin-left: 25px; 
    margin-right: 25px;
}

.character-text-title
{
    font-weight: bold;
    font-size: 24px;
    color: white;
}

.character-text-content
{
    font-size: 20px;
    color: white;
    padding: 20px;
    margin-top: 5px;
    border: 5px solid #5AC1E3;
    background-color: #312C4B;
    
}

.character-content-glow
{
    -webkit-box-shadow: 0px 0px 15px 2px #62C7E9;
    -moz-box-shadow: 0px 0px 15px 2px #62C7E9;
    box-shadow: 0px 0px 15px 2px #62C7E9;
}

@media screen and (min-width: 0px)
{
    .character-content
    {
        width: 100%;
        text-align: center;
        display: block;
        padding: 5px;
    }

    .character-info
    {
        margin-left: auto; 
        margin-right: auto;
        display: inline-block;       
        margin-top: 10px;
    }

    .character-img
    {
        width: 100%;
        height: auto;
    }

    .character-cover
    {
        width: 128px;
        height: auto;
        margin-top: 10px;
        margin-left: 0px;
    }

    .order-banner
    {
        margin-bottom: 25px;
    }
}

@media screen and (min-width: 750px)
{
    .character-content
    {
        width: 100%;
        text-align: center;
        display: flex;
        padding: 5px;
    }

    .character-info
    {
        margin-left: auto; 
        margin-right: auto;
        display: inline-block;
        max-width: 500px;
        padding: 10px;
    }

    .character-img
    {
        width: 100%;
        height: auto;
         
        max-width: 500px;
    }

    .character-text-title
    {
        width: 100%;
        height: auto;
        text-align: left;
    }

    .character-text-content
    {
        text-align: left;
    }
}

@media screen and (min-width: 1150px)
  {
    .character-content
    {
        width: 100%;
        text-align: center;
        display: block;
    }

    .character-info
    {
        margin-left: auto; 
        margin-right: auto;
        display: inline-block;
        max-width: 500px;
    }

    .character-container
    {
        margin-right: 10px;
    }

    .character-container-2
    {
        margin-left: 10px;
    }

    .character-img
    {
        width: 100%;
        height: auto;
         
        max-width: 500px;
    }

    .character-text-title
    {
        width: 100%;
        height: auto;
        text-align: left;
    }

    .character-text-content
    {
        text-align: left;
    }

    footer
    {
        position: absolute;
    }

  }