/*----------INITIALIZE STYLES----------*/

* {
    margin:0;
    padding:0;
    box-sizing: border-box;
}
body {
    position:relative;
}
body,html {
    width: 100%;
    height: 100vh;
}
li{
    list-style: none;
    margin:0;
    padding:0;
}
a,nav a,li span,td a {
    text-decoration: none;
    transition: 0.3s ease;
}
input:focus,
select:focus,
textarea:focus,
input.form-control:focus,
select.form-control:focus,
a:focus {
    outline:none !important;
    outline-width: 0 !important;
    box-shadow: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/*------------------------------------*/

.main {
    padding: 3% 5%;
    min-height: 77.6vh;
}

@media (max-width: 550px){
    .main {
        padding: 2%;
    }
}

/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/

/*---------------Menu-----------------*/

header {
    padding: 30px 4%;
}

header .logo img {
    width: 150px;
}
header .menu-user .img-user{
    width: 60px;
    height: 60px;
    border-radius: 50px;
    border: 3px solid var(--pink);
    cursor: pointer;
}
header .menu-user img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50px;
}

@media (max-width: 550px){
    header .logo img {
        width: 100px;
    }
    header .menu-user .img-user{
        width: 45px;
        height: 45px;
    }
}

/*------------------------------------*/
/*--------------Footer----------------*/

footer {
    width: 100%;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--fontPink);
    margin-top: 100px;
    color: var(--pink);
    text-align: center;
}
footer span {
    display: flex;
    gap: 10px;
}
footer span a i{
    color: var(--green);
    font-size: 15pt;
    transition: 0.2s ease;
}
footer span a:hover i {
    color: var(--pink);
    font-size: 18pt;
}