@import url(variables.css);
@import url(animations.css);

@media only screen and (max-width: 1100px) {

    #all-content {
        font-size: var(--font-size-mobile);
    }

    #img-perfil {
        width: 25vw;
    }

    .main-menu {
        display: none;
        height: auto;
    }

    .more-info {
        box-shadow: none;
        height: auto;
        max-width: none;
        min-height: none;
        max-height: none;
        vertical-align: middle;
        width: auto;
        position: initial;
        border-radius: none;
        margin: auto;
        overflow-y: none;
        top: auto;
        left: auto;
        z-index: 0;
    }

    .main-info {
        position: relative;
        width: auto;
    }

    .more-info-close {
        display: none;
    }

    .more-info-link:hover {
        cursor: pointer;
    }

    .section {
        margin: auto;
        margin-top: 100px;
    }
    
    .info-section {
        margin: 3% 40px;
        margin-top: 15%;
    }

    .skill-group:last-child {
        margin-bottom: 5vh;
    }

    .section-title {
        position: -webkit-sticky;
        position: sticky;
        padding-top: 4%;
        padding-bottom: 3%;
        height: 6vh;
        top: 0;
        background-image: linear-gradient(var(--color-section-title-mobile), var(--color-section-title-gradient-mobile));
        border-radius: 0 0 30% 30%;
        box-shadow: 0px 15px 15px var(--color-dot-active);
        z-index: 30;
    }
    
    .contacts-icons {
        top: auto;
        left: 10px;
        bottom: 10px;
    }

    .icon-list-show {
        display: inherit;
    }

    .icon-list-hide {
        display: none;
    }

    .contacts-button {
        display: inline-block;
        width: var(--font-size-icons-mobile);
        /* background-color: var(--color-section-title-mobile); */
    }

    .contacts-icons a {
        font-size: var(--font-size-icons-mobile);
    }

    .contacts-icons a:hover {
        font-size: var(--font-size-icons-mobile);
    }

    .contacts-icons a:first-child {
        font-size: var(--font-size-icons-git-linkedin-mobile);
    }
    
    .contacts-icons a:nth-child(3) {
        font-size: var(--font-size-icons-git-linkedin-mobile);
    }

    .contacts-icons a:first-child:hover {
        font-size: var(--font-size-icons-git-linkedin-mobile);
    }
    
    .contacts-icons a:nth-child(3):hover {
        font-size: var(--font-size-icons-git-linkedin-mobile);
    }


    #github-link {
        animation: fadeIn 2.5s linear 0s 1;
        animation-play-state: initial;
        animation-fill-mode: forwards;
    }

    #mail-link {
        animation: fadeIn 2s linear 0s 1;
        animation-play-state: initial;
        animation-fill-mode: forwards;
    }

    #linkedin-link {
        animation: fadeIn 1.5s linear 0s 1;
        animation-play-state: initial;
        animation-fill-mode: forwards;
    }

    #pdf-link {
        animation: fadeIn 1s linear 0s 1;
        animation-play-state: initial;
        animation-fill-mode: forwards;
    }

    .prev, .next {
        position: initial;
        display: none;
    }

    .proj-detail-mobile {
        display: initial;
    }

    .mobile-info {
        /* visibility: hidden; */
        display: none;
    }  
}

@media only screen and (max-width: 800px) {
    #img-perfil {
        width: 35vw;
    }
}

@media only screen and (max-width: 500px) {
    #img-perfil {
        width: 50vw;
    }
}

@media only screen and (max-width: 300px) {
    .prev, .next,.text {font-size: 11px}
  }