* { 
    margin:0;
    box-sizing: border-box;
    outline: none !important;
}

html{
    scroll-behavior: smooth;
}

body{
    font-size: 15px;
    font-family: 'Poppins';

}
/* Estilos para la sección */
section {
    display: flex;
    flex-direction: column;
}

/*Seccion Home*/
.home{
    background-color: var(--color2);
    background: url('../../img/home/health4a.webp');
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100vh;
}



/* Estilos para el primer div */
.search {
    
    flex: 0.7;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 350px;

    flex-direction: column;
}

.searchbox{
   
    width: 85%;
    text-align: center;

}
.searchboxlogo{
    margin-bottom: 20px;
    display: block;
}

.searchboxinput{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 25px;
}

.searchinputcontainer{
    flex: 0.80;
    padding: 5px;
}

.searchbuttoncontainer{
    flex: 0.2;
    padding: 5px;
}
.icon{
    color: var(--color1);
}



/* Estilos para el segundo div */
.footerbox {
    background-color: var(--color4);
    flex: 0.33;
    display: flex;
    justify-content: space-between;
    flex-direction: column;

}

.lastvolume{
    display: flex;
    justify-content: center;
    flex:0.5;
    padding-left: 25px;
}

.lastvolumeimg {
    
    padding-top: 25px;
    padding-bottom: 25px;
}
.lastvolumelinks {
    
    padding-left: 15px;
    padding-right: 25px;
    padding-top: 25px;
    padding-bottom: 25px;
}

.lastvolumelinks .title {
    font-weight: bold;
    padding-bottom: 10px;
}

.lastvolumeimg img{
    max-width: 135px;
}

.article{
    display: flex;
    gap: 10px;
    margin-bottom: 5px;
}

.articlelink{
    text-align: start;
}

.footerlinks{
    flex:0.5;
    display: flex;
    background-color: var(--color3);
}

.columnlinks{
    flex: 0.5;
    padding: 25px;
}


.previousjournals {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}




a {
    color: var(--color1);
    text-decoration: none;
}

a:hover {
    color: var(--color1);
    text-decoration: underline;
}

.columnlinks div{
    padding-bottom: 5px;
}

.columntitle{
    padding-bottom: 5px;
}

.columntitle{
    font-weight: bold;
}


.hide-on-mobile{
    display: none;
}

header{
    left:0px;
    top:0px;
    position: fixed;
    width: 100%;
}

nav{
    background-color: var(--color1);
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: var(--color4);
}

nav div {
    padding-right: 20px;
}
nav a {
    color: var(--color3);
}

nav a:hover {
    color: var(--color4);
    text-decoration: none;
}

.container {
    margin-top: var(--navh);
    padding: 25px;
   /* background-color: var(--color3);*/
    min-height: calc(100vh - var(--navh));
}

.bg{
    background: url('../../img/revista/back1.webp');
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    background-position-x: -500px ;
}

.bgvisor{
    background-color: rgb(81, 85, 88);
    padding: 0px;
}

.container .title{
    background-color: var(--color1);
    color: var(--color4);
    padding: 15px;
    border-radius: var(--br);
}

.container .subtitle{
    
    color: var(--color1);
    font-size: 18px;
    font-weight: bold;
   
}

.mt-25{
    margin-top: 25px;
}

.pl-0{
    padding-left: 0px;
}

.container .body{
    text-align: justify;
}

.download{
    padding-bottom: 5px;
}


.row{
    display: flex;
    flex-direction: column;
}

.justify-center{
    justify-content: center;
}

.justify-between{
    justify-content: space-between;
}


.justify-evenly{
    justify-content: space-evenly;
}

.gap-25{
    gap: 25px
}
.shadow{
    box-shadow: 0 0 20px 1px rgb(0 0 0 / 15%)
}

.articles{
    padding-top: 25px;
}

.articles a{
    font-size: 13px;
}

.figures{
    display: flex;
    justify-content: center;
}

.figure{
    display: flex;
    justify-content: center;
}

.figure img{
    width: 90%;
}


/* Estilos para cuando el ancho de la pantalla es menor a 600px */
@media (max-width: 600px) {
    section {
    flex-direction: column;
    }
    .search, .links {
    width: 100%;
    }
}