@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/oswald-v57-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* londrina-sketch-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Londrina Sketch';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/londrina-sketch-v27-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* chelsea-market-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Chelsea Market';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/chelsea-market-v14-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* marcellus-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/marcellus-v14-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



*{
    margin: 0;
    padding: 0;
}

html{
    scroll-behavior: smooth;
}

/*Navigationsleiste*/
.navbar{
    z-index: 999;
    background: linear-gradient(rgba(96, 96, 96, 0.78), rgba(0, 0, 0, 0));
    display: flex;
    width: 100%;
    justify-content: center;
    padding-bottom: 20px;
}

ul{
    height: 100%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    list-style: none;
}

li a{
    padding: 10px 70px;
    font-size: 30px;
    text-decoration: none;
    color: white; 
    height: 100%;
    display: flex;
    align-items: center;
}

a.klein{
    font-size: 50px;
    color: rgb(255, 255, 255);
}


li a:hover{
    color: rgb(151, 119, 179);
    font-size: 2.5em;
    transition: 400ms;
}

a.klein:hover{
    color: rgb(151, 119, 179);
        font-size: 3.5em;
        transition: 400ms;
}


        @media (max-width: 1400px){
            li a{
                font-size: 20px;
                padding: 5px 50px;
            }
        }

        @media (max-width: 1200px){
            li a{
                font-size: 20px;
                padding: 5px 20px;
            }
        }

        @media (max-width: 800px){
            li a{
                font-size: 20px;
                padding: 5px 10px;
            }
        }

        @media (max-width: 600px){
            ul{
                display:block;
                text-align: left;
            }

            li a{
                font-size: 15px;
                justify-content: left;
                padding: 5px 20px;
            }

            a.klein{
                font-size: 15px;
            }
        }
/*Navigationsleiste*/

body{
    font-family: Oswald;
    background-image: url(bilder/webBG_extended_wider.png);
    background-size: contain;   
    background-repeat: no-repeat; 
    background-position-x: right;
}



.text p{
    margin-left: 5vw;
    padding-top: 55vh;
    font-family: Chelsea Market;
    line-height: 1.5em;
    font-size: clamp(40px, 2vw, 80px);
    color: rgb(72, 63, 181);

    opacity: 0;
    transform: translateY(10px);
    animation: fadeInUp 3s ease forwards;
}
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

        @media (max-width: 600px){
            .text p{
            margin-left: 22px;
            padding-top: 20vh;
            font-size: 30px;
            }
        }





.container {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 50px;
    margin-top: 30vh;
    margin-bottom: 200px;
    margin-left: 10vw;
}


.introduction{
    font-family: marcellus;
    line-height: 25px;
    max-width: 350px;
    color: rgb(73, 73, 73);
}


.introduction h3{
    font-size: 20px;
    color: rgb(61, 61, 61);
}

.introduction p{
    margin-top: 20px;
    font-size: 15px;
}

.introduction p a{
    text-decoration: none;
    color: black;
    
    padding: 10px;
    margin-top: 20px;
    
    border-style: solid;
    border-width: 1px;
    border-color: black;
}
.introduction p a:hover{
    color: rgb(73, 73, 73);
    border-color: rgb(73, 73, 73);
}


img.me{
    width: 100%;
    max-width: 300px;
    height: auto;
}


        @media (max-width: 700px) {
            .container {
                flex-direction: column;
                gap: 30px;
                
                margin-top: 100px;
                margin-left: 10px;
                margin-right: 10px;
            }

            .introduction {                
                width: 90%;
                margin: 20px 0 0 0;
            }

            .me {
                max-width: 250px;
            }
        }





/*footer*/
.footer{
    /*
    border-block-start: solid;
    border-block-start-style: inset;
    border-block-start-color: rgb(117, 125, 229);
    border-block-start-width: 10px;
    */
    
    color: rgb(255, 255, 255);
    padding: 30px;
    display: flex; 
    flex-direction: column;
    align-items: center;
    background-color: rgb(54, 58, 106);
    min-height: 400px;
}

.footer h3{
    font-size: 35px;
    font-weight: 100;
    
    margin-top: 80px;
}

.footer p{
    margin: 20px 0 20px 0;
    max-width: 300px;
    font-family: marcellus;
    font-size: 13px;
    line-height: 1.5em;
    text-align: center;
}

.footer a{
    height: 20px;
    padding: 20px;
}


.footer ul{
    font-family: marcellus;
    font-size: 10px;
    display: flex;
    justify-content: center;
    height: fit-content;
    width: 100%;
    margin-top: auto;
    gap: 20px;
}

.footer li{
    text-align: center;
}

        @media (max-width:600px){
            .footer ul{
             gap: 10px;   
            }
        }

/*footer*/