@import url('./reset.css');
@import url('./variables.css');
@import url('./general.css');
@import url('./shared.css');
@import url('./nav.css');
@import url('./welcome.css');
@import url('./about.css');
@import url('./my-skills.css');
@import url('./contacts.css');

/* Media queries */
@media screen and (max-width: 499px) {
    .center {
        width: 75%;
    }

    .slide-in-el {
        opacity: 0;
        transform: translateX(40%);
    }

    .slide-in {
        transition: all 1.5s;
        opacity: 1;
        transform: translateX(60%);
    }

    h2 {
        font-size: 3rem;
    }

    .list,
    #contacts ul {
        width: 90%;
    }

    .list li {
        width: 80%;
    }

    #experience h2,
    #about-me-text{
        font-size: 2.8rem;
    }

    .list li {
        font-size: 1rem;
    }

    @keyframes move-code {
        0% {
            transform: scale(5) translateY(5%);
        }
        25% {
            transform: scale(5) translateY(10%);
        }
        50% {
            transform: scale(5) translateY(15%);
        }
        100% {
            transform: scale(5) translateY(20%);
        }
    }

    @keyframes move-html {
        0% {
            transform: scale(5) translateY(5%) rotate(-30deg);
        }
        25% {
            transform: scale(5) translateY(10%) rotate(-32deg);
        }
        50% {
            transform: scale(5) translateY(15%) rotate(-34deg);
        }
        100% {
            transform: scale(5) translateY(20%) rotate(-38deg);
        }
    }

    @keyframes move-javascript {
        0% {
            transform: scale(5) translateY(5%) rotate(90deg);
        }
        25% {
            transform: scale(5) translateY(10%) rotate(95deg);
        }
        50% {
            transform: scale(5) translateY(15%) rotate(100deg);
        }
        100% {
            transform: scale(5) translateY(20%) rotate(105deg);
        }
    }

    @keyframes move-css {
        0% {
            transform: scale(5) translateY(5%) rotate(240deg);
        }
        25% {
            transform: scale(5) translateY(10%) rotate(235deg);
        }
        50% {
            transform: scale(5) translateY(15%) rotate(230deg);
        }
        100% {
            transform: scale(5) translateY(20%) rotate(225deg);
        }
    }
}

@media screen and (max-width: 320px) {
    .slide-in {
        transition: all 1.5s;
        opacity: 1;
        transform: translateX(52%);
    }

    @keyframes move-code {
        0% {
            transform: scale(4) translateY(5%);
        }
        25% {
            transform: scale(4) translateY(10%);
        }
        50% {
            transform: scale(4) translateY(15%);
        }
        100% {
            transform: scale(4) translateY(20%);
        }   
    }

    @keyframes move-html {
        0% {
            transform: scale(4) translateY(5%) rotate(-30deg);
        }
        25% {
            transform: scale(4) translateY(10%) rotate(-32deg);
        }
        50% {
            transform: scale(4) translateY(15%) rotate(-34deg);
        }
        100% {
            transform: scale(4) translateY(20%) rotate(-38deg);
        }   
    }

    @keyframes move-javascript {
        0% {
            transform: scale(4) translateY(5%) rotate(90deg);
        }
        25% {
            transform: scale(4) translateY(10%) rotate(95deg);
        }
        50% {
            transform: scale(4) translateY(15%) rotate(100deg);
        }
        100% {
            transform: scale(4) translateY(20%) rotate(105deg);
        }
    }

    @keyframes move-css {
        0% {
            transform: scale(4) translateY(5%) rotate(240deg);
        }
        25% {
            transform: scale(4) translateY(10%) rotate(235deg);
        }
        50% {
            transform: scale(4) translateY(15%) rotate(230deg);
        }
        100% {
            transform: scale(4) translateY(20%) rotate(225deg);
        }   
    }
}

@media screen and (min-width: 375px) and (max-width: 399px){
    .slide-in-el {
            opacity: 0;
            transform: translateX(40%);
        }

    .slide-in {
        transition: all 1.5s;
        opacity: 1;
        transform: translateX(67%);
    }

    #experience h2,
    #about-me-text{
        font-size: 3rem;
    }

    .list li {
        font-size: 1.125rem;
    }
}

@media screen and (min-width: 400px) and (max-width: 499px) {
    h2,
    #experience h2,
    #about-me-text {
        font-size: 3.4rem;
    }

    .slide-in-el {
            opacity: 0;
            transform: translateX(45%);
        }
    
    .slide-in {
        transition: all 1.5s;
        opacity: 1;
        transform: translateX(68%);
    }
    
    .list li {
        font-size: 1.125rem;
    }
}

@media screen and (min-width: 526px){
    .slide-in-el {
            opacity: 0;
            transform: translateX(70%);
        }
    
    .slide-in {
        transition: all 1.5s;
        opacity: 1;
        transform: translateX(80%);
    }

    #about-me-text{
        font-size: 4rem;
    }
}

@media screen and (min-width: 610px) {
    #about-me-text {
        font-size: 4.5rem;
    }
}


@media screen and (min-width: 675px) {
    #about-me-text {
        font-size: 4.8rem;
    }
}

@media screen and (min-width: 720px) {
    .slide-in-el {
        opacity: 0;
        transform: translateX(65%);
    }

    .slide-in {
        transition: all 1.5s;
        opacity: 1;
        transform: translateX(70%);
    }

    #about-me-text {
        font-size: 5.5rem;
    }
}

@media screen and (min-width: 810px) {
    .slide-in-el {
        opacity: 0;
        transform: translateX(80%);
    }

    .slide-in {
        transition: all 1.5s;
        opacity: 1;
        transform: translateX(90%);
    }
}

@media screen and (min-width: 880px) {
    .slide-in-el {
            opacity: 0;
            transform: translateX(85%);
        }
    
    .slide-in {
        transition: all 1.5s;
        opacity: 1;
        transform: translateX(95%);
    }
}

@media screen and (min-width: 900px){
    main{
        margin: 0 auto;
    }

    #avatar,
    .welcome-buttons {
        margin-left: auto;
        margin-right: auto;
    }

    .welcome-buttons{
        width: 70%;
    }

    .about-info,
    .about-info-2,
    #projects div {
        background: none;
    }

    .list {
        width: 60%;
    }

    #navbar ul {
        position: relative;
        flex-direction: row;
        display: flex;
        justify-content: space-between;
        top: 0;
    }

    #navbar ul li {
        padding: 0;
    }

    
    #navbar ul li {
        width: 200px;
    }

    #navbar ul {
        width: 40%;
    }

    .hidden {
        display: block;
    }

    button{
        display: none;
    }
}

@media (orientation: landscape){
    #welcome-section {
        margin-top: var(--double-rem);
        width: 100%;
        height:auto;
    }

    .vertical-align {
        width: 100%;
        height: auto;
    }

    .center {
        width: 50%;
        height: auto;
        justify-content: center;
    }
}

@media(prefers-reduced-motion) {
    .slide-in {
        transition: none;
    }
}