@font-face {
    font-family: 'essay1743';
    src: url('font/Essays1743.ttf') format("truetype");
    font-weight: normal;
    font-style: normal;
}
html {
    scroll-behavior: smooth;
  }
body {
    margin:0;
    background-color: #111;
    color: #eee;
    overflow-x: clip;
    display: grid;
    place-items: center;
    width: 100vw;
    font-family: "essay1743";

    position: relative;

   
}

.title{
    font-size: 4.5rem;
    max-width: 100%;
    height:auto;
}

.title img {
    max-width: 100%;
    height:auto;
}

.subtitle {
    font-size: 2rem;
}


.egg {
    clip-path: ellipse(40% 40%);
    background-color: transparent;
    height: 400px;
    width: 	250px;
    position: relative;
}

.egg img {
    position: absolute;
    object-fit: cover;
    height: 100%;
    width: 120%;
    left:-10%;
}


.egg.slanted {
    --rotation: 18deg;
    rotate:var(--rotation)

}

p {
    max-width: 74ch;
}


.egg.slanted img {
    rotate: calc(-1 * var(--rotation));
}

.link{
    position: relative;
    right:0;
    bottom:20%;
   
    padding: 5px;
    border-radius: 5px;
    white-space: nowrap;
    
}

.linkbox {

    width: fit-content;
    margin:auto;


}

.grid {
    display: grid;
    justify-items: center;
    align-items:center;
}

 .link::before {
    position: absolute;
    left:0;

    content:"";
    height:50px;
    width:50px;
    background-image: url("images/pfeil.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    filter:brightness(20);
    transform: translate(-110%, -50%) rotate(65deg);
    
    bottom:0;
 }

 a {
    color: white;
 }

 a:hover span {
   
    background-color: #eee;
    color: #111;
 }

 .sticky{
    position: sticky;
    top:20px;
 }

.container {

    position: relative;
}

section {
    width:80%;
    max-width: 800px;
    min-height: 500px;
}


.row {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.row-60-40 {
    display: grid;
    grid-template-columns: 2fr 1fr;
}

.row3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:1rem;
    position: relative;
}

.egg.smaller {
    scale: .6;
}
.egg.bigger {
    scale: 1.3;
    translate: 50% 25%;
    transform-origin: 150% 150%;
}

.page-title{
    font-size: 2.5rem;
    width:100%;
    display: block;
}
.t-left {
    text-align: left;

}

.card {
    width:28vw;
    max-width: calc(800px / 3);
}


.gate {
    border-radius: 50% 50% 0 0 / 25% 25% 0 0;
    overflow: hidden;
    
    width:80%;
    bottom:0
}

.gate img {
    width: 100%;
    height:auto;
    object-fit: contain;
}

ul.glitter {
    list-style: none;
}

ul.glitter li {
    position:relative;
    padding-bottom: 3rem;
}
ul.glitter li::before {
    content:"✨";
    position:absolute;

    left:-32px;
}




footer {
    display: flex;
    justify-content: center;
    gap:2rem;
    padding:2rem;
    width:100%
}

header {
    position: sticky;
    position: -webkit-sticky;
    top:0;
    padding: 2rem;
    background-color: inherit;
    width: 100%;
    z-index: 99;
    
}
 nav {
    margin:auto;
    width:fit-content;
 }


img {
    z-index:20;
}



* {
    outline: 2px solid noneS;
}

*:not(body) {
   
}


.paddle {
 background-image: url("images/Paddel\ \(1\).png");
 background-repeat: no-repeat;
 background-size: 200px;
 background-position: 100%;
}


/*mobile----------------------------------------------------------------------*/

@media (max-width: 600px) {
    .title {
        font-size: 2rem;
    }

    .subtitle {
        font-size: 1rem;
    }

    .flex {
        flex-direction: column;
    }
    .container {
        display: grid;
        justify-items: center;
        
    }


    .egg {
        clip-path: ellipse(15vmin 30vmin);
        background-color: transparent;
        background: none;
        height: 60vmin;
        width: 	30vmin;
        position: relative;
    }
    
    .egg img {
        position: absolute;
        object-fit: cover;
        height: 100%;
        width: 120%;
        left:-10%;
    }

    .row3 {
        grid-template-columns: 1fr 1fr;
    }

    .card {
        width:20wv;
    }

    .card:nth-child(3){
        display:none;
    }
}