/*kas žalia tą reikia aprtarti su Gabrieliumi*/
@import url('https://fonts.googleapis.com/css2?family=Recursive:wght@300..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');

@media (max-width: 1200px) {
    .first-article-img img, .fourth-article-img img, .fifth-article-img img {
        display: flex;
        max-width: 36rem;
        width: 100%;
        height: auto;
    }
}

@media (max-width: 1200px) {
    .second-article-img img, .third-article-img img {
        max-width : 36rem;
        width: 100%;
        height: auto;
    }

}
@media (max-width: 608px) {
    #first-page .second-article-text-H4, #first-page .third-article-text-H4 {
        width: auto;
    }
}

@media (min-width: 1380px) {
    div[class$='article'] {
        width: 46.25rem;
        height: 30rem;
        
    }
}

@media (max-width: 1380px) {
    div[class$='article'] {
        height: 55rem;
        width: 46.25rem;
    }

    .intro-text {
        top: 15%;        
        left: 50%;       
        transform: translate(-50%, 0%);
    }
}

@media (min-width: 740px) {
    div[class$='article'] {
        justify-self: center;
        align-self: center;
        width: 38rem;
    }
}

body {
    display: flex;
    flex-direction: column;
    background-color: #000;
    color: #fff;
    margin: 0rem;
    border: 0rem;
    font-family: EB Garamond;
}

.articles-container {
    display: flex;
    flex-direction: column;
    margin: 0 ;
    /* border: white 1px solid; */
}

div[class$='-article'] {
    display: flex;
    flex-direction: row;
    width: 100%;
    /* border: white 1px solid; */
}

.first-article, .third-article, .fifth-article, .second-article, .fourth-article  {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap; 
    height: 30rem;
    margin: 0;
    border: white 1px solid;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    margin-bottom: 80px;
}



.back-article {
    display: flex;
    height: 30rem;
    align-items: center;
    justify-content: center;
    margin: 0;
    /* border: white 1px solid; */
    width: 100%;
}

.back-article-text-and-button {
    height: 17rem;
    margin-bottom: 7rem;
}

div[class$='article-img'] {
    display: flex;
    width: 36rem;
    /* border: white 1px solid; */
}

.first-article-img img, .fourth-article-img img, .fifth-article-img img {
    max-width: 36rem;
    width: 100%;
    height: auto;
    transition: all 0.6s ease-in-out; 
}

.second-article-img img, .third-article-img img  {
    max-width: 36rem;
    width: 100%;
    height: auto;
    transition: all 0.6s ease-in-out; 
    
}

.first-article-img img:hover,.second-article-img img:hover,.third-article-img img:hover,.fourth-article-img img:hover,.fifth-article-img img:hover  {
    transform: scale(1.1);
}

.first-article-img {
    margin-top: 1rem;
}


div[class$="article-text-H4"],
div[class$="article-text-H1"],
div[class$='article-list'],
div[class$="article-button-div"] {
    justify-self: center;
    text-align: center;
}

div[class$='article-text']  {
    font-size: 1.5625rem;
    /* border: white 1px solid; */
    max-width: 36rem;
    width: 100%
}
div[class$='article-list'] {
    font-size: 1.5625rem;
}
div[class$='article-text-and-button']  {
    font-size: 1.5625rem;
}
/* div[class$="-img"] > img {
    max-width: 38rem;
    width: 100%;
    height: auto;
    } */
    
    
a[class$="-button"] {
    padding: 1rem 2rem;
    background-color: #fff;
    text-decoration: none;
    border-radius: 2rem;
    font-size: 1.2rem;
    font-weight: bold;
    color: #000;
    transition: all 0.8s; /*pirma dydis paskui spalva SP */
    /* border: 0.2rem, solid, #FFFFFF; APTSS */
}

a[class$="-button"]:hover {
    background-color: #808080;
    color: white; 
    /* APTSS */
}

/* div[class$='-button-div'] {
    transition: transform 0.8s;  viskas is karto
    } */
    
div[class$='-button-div']:hover {
    transform: scale(1.05);
    transition: all 0.8s;
}
/*.a[class$="-button"]:active {
    background-color: #bba8ff;
    color: #bba8ff;
    
}*/

.top {
    display: flex;
    
    justify-content: flex-start;
    align-items: center;
    padding: 2rem;
    text-align: center;
    
    background: #111111;
    font-size: 1.875rem;
    
    position: sticky;
    top: 0rem;
    z-index: 2;
}

.top a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    margin-left: 20%;
    font-size: 1.75rem;
}

.intro {
    display: flex;
    flex-direction: column;
    height: 43.75rem;
}

.intro-img {
    position: relative;
    height: 43.75rem;
    width: auto;      
    display: flex;   
    max-width: 100%;   
    object-fit: cover;
}

.intro-text {
    position: absolute;
    top: 25%;        
    left: 50%;       
    transform: translate(-50%, 0%);
    color: #fff;    
    text-align: center;
    font-size: clamp(2rem, 5vw, 3rem);
    z-index: 1;
}

#first-page .first-article {
    margin-top: 3rem;
}

#first-page .intro, #second-page .intro, #third-page .intro-img {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 80rem;
    margin: 0 auto; 
    max-height: 100rem;
    height: 100%;
}

#first-page .intro-img, #second-page .intro-img, #third-page .intro-img {
    position: relative;
    display: flex;
    justify-content: center;
    align-items:center ;
}

#first-page .intro-text, #second-page .intro-text, #third-page .intro-text {
    position: absolute;
    top: 22rem;
    font-size: clamp(2rem, 5vw, 3rem);
}

#first-page .second-article-text-H4 {
    /* width: 38rem; */
    line-height: 2.15rem;
    text-align: center;
}

#first-page .third-article-text-H4 {
    line-height: 2.15rem;
    text-align: center;
}


#second-page div[class$='article-text-H4'] {
    width: 38rem;
    /* border: 1px white solid; */
}
#second-page .second-article-text-H4 {
    font-size: 1.3rem;
}

#second-page .third-article-text-H4 {
    font-size: 1.2rem;
}

#third-page .first-article-list {
    display: flex;
    /* border: 1px white solid; */
    width: 38rem;
    justify-self: center;
    text-align: start;
    font-size: 1.2rem;
    list-style-position: inside;
    height: 20rem;
}

#third-page .first-article li {
    margin-bottom: 1rem;
}

#third-page li::marker {
    font-weight: 900;
}

#third-page .first-article {
    height: 30rem;
}

#third-page .first-article-img img {
    max-width: 38rem;
    width: 100%;
    height: 100%;
    max-height: 25rem;
    object-fit: contain;
}

#third-page .second-article-text-H4 {
    /* border: 1px white solid; */
    width: 38rem;


}

#third-page .third-article-list {
    display: flex;
    /* border: 1px white solid; */
    width: 38rem;
    justify-self: center;
    text-align: start;
    font-size: 1.2rem;
    list-style-position: inside;
    height: 18rem;
}
#third-page .third-article li {
    margin-bottom: 0.5rem;
}
#fourth-page .first-article-img {
    display: flex;
    max-height: 28rem;
    max-width: 28rem;
    object-fit: contain;
}
#fourth-page .first-article-img img {
    display: flex;
    max-height: 28rem;
    max-width: 28rem;
    object-fit: contain;
}

#fourth-page div[class$="article-text"] {
    font-size: 1.3rem;
}
#fifth-page .intro-img {
    object-position: top;
}
#fifth-page .intro-text {
    color: #000;
}


.sun {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap; 
    height: 25vw;
    margin: 0;
    /* border: white 1px solid; */
}

.sun-img {
    height: 100%;
    width: 100%;
}

.sun-img img {
    height: 100%;
    width: 100%;    
    object-fit: cover;
    object-position: top;
}

.Mercury-img img {
    height: 0.31vw;
    justify-content: center;
    align-items: center;
    /* border: white 1px solid; */
    margin-left: 86.45px;
    margin-right: 86.45px;
}

.Venus-img img {
    height: 0.77vw;
    justify-content: center;
    align-items: center;
    /* border: white 1px solid; */
    margin-left: 81.95px;
    margin-right: 81.95px;
}

.Earth-img img {
    height: 0.81vw;
    justify-content: center;
    align-items: center;
    /* border: white 1px solid; */
    margin-left: 81.5px;
    margin-right: 81.5px;
}

.Mars-img img {
    height: 0.43vw;
    justify-content: center;
    align-items: center;
    /* border: white 1px solid; */
    margin-left: 85.25px;
    margin-right: 85.25px
}

.Jupiter-img img {
    height: 8.9vw;
    /* border: white 1px solid; */
    justify-content: center;
    align-items: center;
}

@media (max-width: 1323px) {
    div[class$='article'] {
        max-width: 748px;
        width: 100%;
        height: 55rem;
        
    }
}

/*.BackGroundAnimation {
    background-image: url('https://images.pexels.com/photos/998641/pexels-photo-998641.jpeg?_gl=1*fdda96*_ga*MTU2OTQ1OTQwMy4xNzU0MTU1NzQx*_ga_8JE65Q40S6*czE3NTQxNTU3NDEkbzEkZzEkdDE3NTQxNTU4OTQkajU3JGwwJGgw');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    height: 100vh;
}*/