/* GENERAL */
html{
    scroll-behavior: smooth;
}

body{
    color: #1E2022;
    font-family: 'Alpino', sans-serif;
    background-color: #d8dce2;
    line-height: 1.6;
    font-size: 20px;
    margin: 0;
}

main{
    margin: 0 25%;
}

/* NAV */
nav{
    width: fit-content;
    position: fixed;
    background-color: #1E2022;
    font-size: 16px;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 50;
}

.nav__el a {
    color: #F5F5F5;
    text-decoration: none;
    margin: 0 40px;
}

.nav__el{
    display: inline-block;
}

.nav__logo{
    color: #F5F5F5;
    text-decoration: none;
    font-family: 'Chillax', sans-serif;
    font-size: 33px;
    margin: 0 40px;
    
}

.nav__display .nav__list .nav__el--active > a {
  color: #4687FF;
  text-decoration: none;
}


.nav__search{
    display: inline-flex;
    align-items: center;
    color: #656565;
    background-color: #FFFFFF;
    padding: 10px 20px;
    border-radius: 8px;
    width: 180px;
}

.nav__icon{
    width: 14px;
    height: 14px;
    margin: 0 8px 0 0;
}

.nav__display{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: 20px 40px 20px 0;
}

/* HEADER */
header{
    position: relative;
    min-height: 500px;
}

.header__title{
    position: absolute;
    top: 0;
    z-index: 40;
    margin: 0 10%;
}

.header__link{
    position: absolute;
    font-family: 'Chillax', sans-serif;
    font-size: 33px;
    color: #4687FF;
    padding-top: 450px;
    margin: 0 10%;
    z-index: 40;
}

.header__title--black{
    color: #1E2022;
}

.header__txt{
    position: absolute;
    z-index: 40;
    padding-top: 350px;
    color: #F5F5F5;
    margin: 0 10%;
}

/* ABOUT */
.about{
    margin-left: 15%;
    margin-right: 15%;
}

/* IMAGE */
.img__small{
    width: 300px;
    height: 300px;
    border-radius: 16px;
}

.img__mid{
    width: 450px;
    height: 300px;
    border-radius: 16px;
}

.img__large{
    width: 100%;
    border-radius: 16px;
}

.header__img{
    width: 100%;
    left: 0;
    z-index: 10;

}

/* TEXT */
h1{
    font-family: 'Chillax', sans-serif;
    font-size: 93px;
    color: #F5F5F5;
    margin: 0 0 80px 0;
    padding: 200px 0 0 0;
}

h2{
    font-family: 'Chillax', sans-serif;
    font-size: 56px;
    margin-bottom: 20px;
}

.h2--margin{
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-left: 15%;
    margin-right: 15%;
}

h3{
    font-family: 'Chillax', sans-serif;
    font-size: 33px;
}

p{
    font-size: 24px;
}

.p--margin{
    margin-left: 15%;
    margin-right: 15%;
}

.credit{
    display: block;
    font-size: 16px;
    color: #656565;
}

.link{
    font-family: 'Alpino', sans-serif;
    color: #4687FF;
}

/* INFO */
.info{
    background-color: #ABABAB;
    border-radius: 8px;
    min-width: 150px;
    max-width: 150px;
    height: 65px;
    padding: 10px 20px 40px;
    font-size: 16px;
    color: #1E2022;
    margin: 0 40px 0 0;
}

.info__date{
    font-weight: bold;
}

.info__txt{
    line-height: 0.4;
    font-size: 20px;
}

.info--none{
    background-color: #d8dce2;
    color: #d8dce2;
}

/* JSP */
.article__news{
    margin: 0 20px 280px 20px;
}

.article{
    margin: 0 15%;
    display: flex;
    justify-self: flex-end;
}

.publication__title{
    margin: 0;
}

.publication__link{
    font-family: 'Chillax', sans-serif;
    font-size: 20px;
    color: #4687FF;
    margin: 0 0 40px 0;
}


/* INTRO */
.content{
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin: 0 15%;
}

.intro__txt{
    max-width: 760px;
}

/* FORM */
.form{
    background-color: #1E2022;
    border-radius: 16px;
    padding: 0 40px 20px 40px;
    margin: 0 25%;
    color: #F5F5F5;
}

.form__title{
    display: flex;
    justify-content: center;
    padding-top: 10px;
}

.form__name{
    background-color: #FFFFFF;
    border-radius: 8px;
    padding: 10px 20px 10px 20px;
    color: #656565;
}

.form__msg{
    background-color: #FFFFFF;
    border-radius: 8px;
    padding: 10px 20px 80px 20px;
    color: #656565;
}

/* ELEMENTS */
.btn{
    display: block;
    text-decoration: none;
    color: #F5F5F5;
    background-color: #656565;
    font-size: 20px;
    border-radius: 8px;
    border-style: none;
    padding: 10px 20px 10px 20px;
}

.btn--more{
    background-color: #656565;
    color: #F5F5F5;
    display: block;
}

.btn--share{
    background-color: #4687FF;
    color: #F5F5F5;
    font-size: 14px;
}

.btn--follow{
    background-color: #4687FF;
}

.btn--send{
    font-size: 16px;
    background-color: #4687FF;
    color: #F5F5F5;
    display: block;
}

/* BACK TO TOP */
.backToTop{
    width: 20px;
    height: 20px;
    position: fixed;
    right: 200px;
    bottom: 100px;
    display: none;
    white-space: nowrap;
    overflow: hidden;
    padding: 8px;
    border-radius: 100px;
    z-index: 50;
}

.backToTop--show{
    display: inline-block;
}

/* FOOTER */
footer{
    position: absolute;
    font-size: 14px;
    background-color: #1E2022;
    display: flex;
    padding: 40px 0 40px 0;
    margin: 296px 0;
    flex-direction: row;
    justify-content: center;
    left: 0;
    width: 100%;
}

.footer__el{
    display: flex;
    color: #ABABAB;
    text-decoration: none;
    margin: 4px 0 4px 0;
}

.footer__el a{
    color: #ABABAB;
    text-decoration: none;
}

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

    /* 1.6 */
    
    main{
        font-size: 16px;
        margin: 0 20%;
    }

    .header__txt{
        padding-top: 250px;
        font-size: 31px;
    }
    
    .header__link{
        padding-top: 300px;
        font-size: 20px;
    }
    
    h1{
        font-size: 82px;
        padding: 120px 0 0 0;
    }
    
    h2{
        font-size: 51px;
    }
    
    h3{
        font-size: 32px;
    }

    .content{
        display: block;
        margin: 0 20%;
    }
    
}

@media screen and (max-width: 1150px) {
    
    /* 1.154 */
    
    main{
        font-size: 16px;
        margin: 15%;
    }

    .header__img{
        max-height: 450px;
    }
    
    .header__txt{
        padding-top: 200px;
        font-size: 27px;
    }

    .header__link{
        padding-top: 250px;
        font-size: 20px;
    }

    .img__mid{
    width: 350px;
    height: 200px;
    }

    
    h1{
        font-size: 31px;
        padding: 150px 0 0 0;
    }

    h2{
        font-size: 27px;
    }
    
    h3{
        font-size: 23px;
    }

    .content{
        margin: 0 20%;
    }
}