*{
    margin:0;
    padding:0;
}
main .alert-success{
    margin:10px;
    text-align: center;
}
section .alert-info{
    margin: 10px;
}

header{
    margin:10px;
    padding:20px;
    border :2px solid #000;

}
header p,
footer p,
footer h3,
header h1{
    text-align: center;
}
aside code{
    margin:0 10px; 
}
aside,
nav{
    margin:10px; 
}
aside{
    padding:20px 0;
    border :2px solid #000;
}
section{
    min-height:360px;
    margin:10px;
    padding:20px;
    border :2px solid #0401a5;  
}

.card {
    border: none;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer
}

.card:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background-color: #E1BEE7;
    transform: scaleY(1);
    transition: all 0.5s;
    transform-origin: bottom
}

.card:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background-color: #8E24AA;
    transform: scaleY(0);
    transition: all 0.5s;
    transform-origin: bottom
}

.card:hover::after {
    transform: scaleY(1)
}

.fonts {
    font-size: 11px
}

.social-list {
    display: flex;
    list-style: none;
    justify-content: center;
    padding: 0
}

.social-list li {
    padding: 10px;
    color: #8E24AA;
    font-size: 19px
}


footer{
    margin:10px;
    padding:20px;
    border :2px solid #000;
}