@media all and (min-width : 0px) {
    *{margin: 0; padding:0; box-sizing: border-box;}
  
    .embed-message{
        background: #2F3136;
        color: #dcddde;
        border-radius: 10px;
        margin: 35px;
        border-left: solid 6px #4402D8;
        padding-bottom: 20px;
    }

    .embed-message-header {
        display: flex;
        align-items: center;
    }
    
    .col-01{
        display: flex;
        align-items: baseline;
    }
    
    .profile-pic {
        width: 60px; 
        height: 60px;
        border-radius: 100%;
        margin: 10px 0 0 10px;

    }

    .online{
        width: 15px;
        height: 15px;
        border-radius: 100%;
        background: #2ecc71;
        margin-left: -15px
    }

    .embed-message-username{
        color: white;
        font-weight: bold;
        margin-left: 10px;
    }

    #message-hour {
        font-weight: 100;
        color: rgb(158, 158, 158);
        font-size: 50%;

    }
    .container-principal{
        padding: 10px 20px;
        margin-bottom: 30px;
        color: white;
    }

    .container-principal h2{
        margin-bottom: 20px;
        
    }
    

    body{
        font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
        background-color: #36393F;
    }


    header h2{
        color: white;
        margin-bottom: 30px;
    }

    header p {
        font-size: 1.2em;
        width: 100%;
    }

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

    .cta-container a{
        width: 80%;
        
    }
  

    .button{
        background: #5865f2;
        border-radius: 5px;
        color: white;
        text-decoration: none;
        padding: 10px 25px;
    }

.cta-button{
    background:#01E266;
    color: white;
    padding: 10px 25px; 
    margin: 8px auto;
    width: 80%;
    border-radius: 5px  ;
}

footer{
    display: flex;
    align-items: baseline;
    font-size: 70%;
    padding: 10px 25px;
    margin-top: 30px;
}

a{
    color: #00aff4;
}

}
@media all and (min-width : 786px) {

   
    .embed-message{
        width: 50%

    }

    .embed-message-header{
        width: 100%;
        display: flex;
        align-items: left;
    }
    header {
        width: 50%;
        margin: 0 auto 50px;
    }
        header p {
            font-size: 1.2em;
            width: 70%;
        }

        .cta-container{
            display: flex; 
            align-items: left;
            flex-direction: row;
            justify-content: center;

        }

        
        .cta-container a{
            width: 30%;
            margin: 0 10px;
        }

}