/* Core Stuff */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


body {
    
    
    overflow: hidden; /* Prevent body from having its own scrollbar */
    font-size: clamp(1.2rem, 2.7vw, 2.1rem);
    line-height: 1.15;
    text-align: left;
    /*font-family: "Karla", sans-serif;*/
    font-family: "Poltawski Nowy", serif;
    /*font-family: "Amaranth", sans-serif;*/
    font-weight: 700;
}

h1,
h2,
h3 {text-align: center;
}

/*klein in dmenu*/
.cat {font-size: clamp(0.7em, 1vw, 1.6rem);

    color: aquamarine;
}

/*dmenu titel*/
.list-title{
    font-size: clamp(1.7rem, 2.2vw, 3.5rem);
}


/*
.amaranth-regular {
  font-family: "Amaranth", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.amaranth-bold {
  font-family: "Amaranth", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.amaranth-regular-italic {
  font-family: "Amaranth", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.amaranth-bold-italic {
  font-family: "Amaranth", sans-serif;
  font-weight: 700;
  font-style: italic;
}



// <weight>: Use a value from 400 to 700
// <uniquifier>: Use a unique and descriptive class name

.poltawski-nowy-cool {
  font-family: "Poltawski Nowy", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
*/

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

a:hover {
    color: rgb(230, 56, 166);
}

pre {
    background: #F0F0F0;
    margin: 1rem 0;
    border-radius: 2px;
}

blockquote {
    border-left: 10px solid #eee;
    margin: 0;
    padding: 0rem 2rem;
}


.text {
    margin-top: 150px;
    margin-left: 15%;
    width: 70%;
    
}

.wrapper {
    margin: 0 0em;
    height: 100vh; /* Use full viewport height */
    overflow-y: scroll; /* Enable vertical scrolling */

}

.image-container {
    /*background-color: rgb(230, 7, 81);*/
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.image-container img {
    max-width: 95%; /* Set maximum width to container width */
    max-height: fit-content;
    object-fit: contain; /* Maintain aspect ratio while fitting within container */
    margin-bottom: 30px; /* Optional: Adds spacing between images */
}


.left {
    float: left;
}

.right {
    float: right
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

/* Content Styling */

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    /*background-color: #ffffff;  Example background color 
    padding: 100px; Example padding */
    text-align: center;
    }

    .page-up {
        padding: 1rem 1rem;
        position:fixed;
        font-size: 2rem;
    }  

.sibling-right {
    position:fixed;
    right:150px;
    top:50%;
    font-size: 3rem;
}    

.sibling-left {
    position:fixed;
    left:150px;
    top:50%;
    font-size: 3rem;
}  



.header /*.padding*/ {
    padding: 1rem 1rem;
    position: fixed;
    right:0;
    font-size: 2rem;
}

.header a {
    color: black;
}

/* Menu Settings */
.main-nav ul {
    text-align: right;
    letter-spacing: 0em;
    margin: 0;
    padding: 0;

}
/* macht die items nebeneinander*/
.main-nav ul li {
    display: inline-block;
    letter-spacing: normal;
}

.main-nav ul li a {
    position: relative;
    display: block;
    line-height: 45px;
    color: black;
    padding: 0 20px;
   
}

/*Active dropdown nav item */
.main-nav ul li:hover > a {
    color: palegoldenrod;
}

/* Selected Dropdown nav item */
.main-nav ul li.selected > a {
    color: rgb(114, 179, 114);
}

/* Center the dmenu (Diary Menu) text */
ul.dmenu {
    list-style-type: none; /* Remove bullet points */
    padding: 0; /* Remove default padding */
    text-align: center; /* Center the text within the list items */
}

ul.dmenu > li {
    display: block; /* Make list items stack vertically */
    margin: 0 10px; /* Add some spacing between items */
}

ul.dmenu li a {
    text-decoration: none; /* Remove underline from links */
    color: inherit; /* Inherit the text color */
}