/************* Font Stylesheet *************/

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ephesis&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Twinkle+Star&display=swap');

h1,
span {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 1.6rem;
}

h2 {
    font-family: 'Ephesis', cursive;
    font-size: 2.3rem;
    font-weight: 300;
}

h3 {
    font-size: 1.3rem;
}

h4 {
    font-size: 0.9rem;
}

h5 {
    font-size: 0.8rem;
}

p {
    font-size: 1.1rem;
}

a {
    text-decoration: none;
    color: inherit;
}

/************************ GLOBAL STYLES ************************/

body {
    margin: 0;
    background-image: url('../img/background-image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
    font-family: 'Source Sans Pro', sans-serif;
    text-wrap: balance;
}

body.weg {
    background-image: url('../img/profil_energie.jpeg');
}

.topbar {
    background: #b7b7a4;
    padding: 5px 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.topbar img {    
    width: 25px;
    height: 25px;
    margin: 0.5rem;
    cursor: pointer;
    opacity: 1;
    transition: all 0.2s ease-in-out;
}

.topbar img:hover {
    opacity: 0.8;
}

/************************ HEADER STYLES ************************/

.index-one {
    padding: 5rem 1rem;
    width: 100%;
    background-color: #d2c7b7;
    background-image: url('../img/star.svg'), url('../img/star2.svg');
    background-repeat: no-repeat, no-repeat;
    background-position: 2% 5%, 95% 95% ;
    background-size: 100px, 75px;
}

.background-strip,
.background-strip2 {
    height: 200px;
    background-color: transparent;
}

.index-two {
    width: 100%;
    background-color: #eee3cb;
}

/************************ FOOTER STYLES ************************/

.index-footer {
    flex-direction: column;
    background-color: #d2c7b7;
    min-height: 500px;
    text-align: center;
    background-image: url('../img/star2.svg'), url('../img/star.svg');
    background-repeat: no-repeat, no-repeat;
    background-position: 7% 15%, 95% 95% ;
    background-size: 65px, 90px;
}

.container-f-img {
    padding: 25px;
    justify-content: center;
    align-items: center;
    padding-top: 75px;
    display: flex;
}

.container-f-img img {
    height: 80px;
    width: auto;
}

.bottom-bar {
    padding: 10px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bottom-bar img {    
    width: 30px;
    height: 30px;
    margin: 0.5rem;
    cursor: pointer;
    opacity: 1;
    transition: all 0.2s ease-in-out;
}

.bottom-bar img:hover {
    opacity: 0.8;
}

.foot p,
.foot h3,
.foot h4 {
    font-weight: 300;
    line-height: 1.2rem;
}

.foot h1,
.foot h4 {
    font-size: 0.8rem;
}

.foot h3 {
    font-size: 1.1rem;
}

.foot p {
    font-size: 1.0rem;
}

.foot2 {
    margin-top: 15px;
}

.foot2 h6 {
    font-size: 0.8rem;
    font-weight: 400;
    text-decoration: underline;
}

.foot hr {
    max-width: 40rem;
    margin: 1rem auto 2rem auto;
}