*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

/* || Base */
/* font */
@font-face {
    font-family: "Open Sans";
    src: url("../font/OpenSans-Regular.ttf") format("truetype");
    font-weight: 400;
}

@font-face {
    font-family: "Open Sans";
    src: url("../font/OpenSans-SemiBold.ttf") format("truetype");
    font-weight: 500;
}

@font-face {
    font-family: "Open Sans";
    src: url("../font/OpenSans-Bold.ttf") format("truetype");
    font-weight: 600;
}

/* color */
:root {
    --gold: #A58F47;
    --rot: #C42C56;
    --blau:#346FB1;
    --fliesstext: #575759;
    --background: #F6F6F6;
}

/* general */
html {
    font-family: "Open Sans";
}

body {
    width: 90%;
    margin: auto;
    background-color: var(--background);
}

h1, h2, a {
    color: var(--gold);
}

h2, h3, a {
    font-weight: 500;
}

h2 {
    margin: 24px 0px;
}

h3 {
    color: var(--fliesstext);
    margin: 8px 0px;
}

.hover-red, .hover-blue {
    transition: .4s;
}

.hover-red:hover {
    color: var(--rot);
    transition: .4s;
}

.hover-blue:hover {
    color: var(--blau);
    transition: .4s;
}


/* || Header */
h1 {
    padding-top: 48px;
    font-weight: 600;
    text-align: center;
}

header hr {
    height: 8px;
    background: linear-gradient(90deg,rgba(196, 44, 86, 1) 0%, rgba(196, 44, 86, 1) 33%, rgba(52, 111, 177, 1) 33%, rgba(52, 111, 177, 1) 66%, rgba(165, 143, 71, 1) 66%);;
    border: 0px;
    margin: 48px 0px;
}

/* || Main */
main {
    width: 80%;
    margin: 0 auto;
    padding-bottom: 64px;
}

p {
    text-align: center;
    font-size: 18px;
    color: var(--fliesstext);
}

/* || Footer */
footer {
    margin: 0 auto;
    text-align: center;
}

footer hr {
    border: 1px solid #D8D8D8;
    margin-bottom: 40px;
    margin-left: 15%;
    margin-right: 15%;
}

ul {
    margin-top: 24px;
    display: flex;
    gap: 32px;
    justify-content: center;
    padding-left: 0px;
}

ul li {
    list-style: none;
    font-size: 16px;
}

ul li a {
    text-decoration: none;
}

.home-button a {
    background-image: url("../icons/home-button.svg");
    background-repeat: no-repeat;
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto;
    transition: .4s;
}

.home-button a:hover {
    background-image: url("../icons/home-button-hover.svg");
    transition: .4s;
}



/* || Desktop */

@media (min-width: 1100px) {
    body {
        width: 65%;
        max-width: 1180px;
    }

    footer hr {
        margin-bottom: 24px;
    }
}