body{
    font-family: sans-serif;
}
@keyframes colorfulContainer {
    0% { border: 2px dashed green; }
    25% { border: 2px dashed rgb(254, 254, 1); }
    50% { border: 2px dashed rgb(247, 57, 57); }
    75% { border: 2px dashed rgb(128, 0, 79); }
    100% { border: 2px dashed rgb(0, 76, 241); }
}
.big-container{
    margin-left:10vw ;
    margin-right:10vw ;
    border: 2px dashed green;
    padding: 10px;
    background-color: rgba(248, 253, 207, 0.5);
    border-radius: 10px;
    text-align: center;
    animation: colorfulContainer 8s infinite;
}

.title-input{
    border-radius: 10px;
    width: 96%;
    height: 6vh;
    background-color: white;
    border: 2px solid black;
    font-size: 25px;
    transition: border 0.5s;
}
.title-input:hover{
    border: 2px dashed orange;
}
.title-input:focus{
    border: 2px solid red;
}


.upload-image-BTN{
    border-radius: 10px;
    width:100%;
    height:6vh;
    background-color:tomato;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    color: black;
    font-size: 25px;
    transition: color 1s,background-color 1s;
}
.upload-image-BTN:hover{
    color: white;
    background-color: red;
}

.upload-BTN{
    border-radius: 10px;
    width:30vw;
    height:6vh;
    background-color:blueviolet;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size: 25px;
    color: white;
    margin-bottom: 20px;
    transition: color 1s,background-color 1s;
}
.upload-BTN:hover{
    color: rgb(216, 248, 184);
    background-color: purple;
}

.upload-video{
    width:100%;
    height:6vh;
    background-color:orange;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    border-radius: 10px;
    font-size: 25px;
    transition: color 1s,background-color 1s;
}
.upload-video:hover{
    color: white;
    background-color: rgb(88, 245, 26);
}

.textarea-info{
    width:96%;
    height:18vh;
    background-color: white;
    border: 2px solid black;
    border-radius: 10px;
    padding: 5px;
    font-size: 20px;
    transition: border 0.5s;
}
.textarea-info:hover{
    border: 2px dashed orange;
}
.textarea-info:focus{
    border: 2px solid red;
}


@keyframes changeColor {
    0% {
        background-color: #ff0000; 
        color: #ffffff;
    }
    25% {
        background-color: #00ff00; 
        color: #000000;
    }
    50% {
        background-color: #0000ff;
        color: #ffffff; 
    }
    75% {
        background-color: #ffff00;
        color: #000000;
    }
    100% {
        background-color: #ff00ff;
        color: #ffffff;
    }
}

.publish-BTN{
    border-radius: 10px;
    width:100%;
    height:7vh;
    background-color: blueviolet;
    color: white;
    font-size: 30px;
    animation:changeColor 15s infinite ;
}

::placeholder{
    color: blueviolet;
}
::selection{
  background-color: tomato;
  color: white;
}