/* Global Styles */
body {
    font-family: '18th_century_kurrent_textRg', sans-serif;
    font-size: 48pt;
    color: black;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-image: url('Hintergrund.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 100vh;
}

.text {
    background-color: white; /* White backdrop */
    padding: 5px; /* Adds some spacing around the text */
    display: inline-block; /* Ensures the background only covers the text */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Optional: Adds a subtle shadow */
}

#word, #trigram, #sentence {
    display: none;
    background-color: white; /* White backdrop */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Optional: Adds a subtle shadow */ 
    padding-left: 20px;
    padding-right: 20px;
    margin: 5px
}

@font-face {
    font-family: '18th_century_kurrent_textRg';
    src: url('18thctrkurtxt-webfont.woff2') format('woff2'),
         url('18thctrkurtxt-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.container {
    width: 80%;
    margin: 0 auto;
    display: grid;
    height: 100vh;
    grid-template-columns: 1fr;
    grid-template-rows: 0.2fr 3fr;
    grid-template-areas:
        "nav"
        "content";
    grid-gap: 0.4rem;
}

.container_index {
    width: 80%;
    margin: 0 auto;
    display: grid;
    height: auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 0.1fr 1fr 0.2fr;
    grid-template-areas:
        "nav nav nav"
        "content content content"
        "content1 content2 content3";
    grid-gap: 0.2rem;
}

.container_about {
    width: 80%;
    margin: 0 auto;
    display: grid;
    height: auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 0.1fr 1fr 0.2fr;
    grid-template-areas:
        "nav nav nav"
        "about about about"
        "about1 about2 about3";
    grid-gap: 0.2rem;
}

.container_index a:visited {
    color: #333; /* Change this to any color you prefer for visited links */
}

.container_index a:hover {
    color: #ababab;
}

#content {
    padding: 50px; /* Add margin inside the #content div */
    font-size: 14pt;
    font-family: "Open Sans", sans-serif;
    font-weight: 300;
    grid-area: content;
}

#content1, #content2, #content3 {
    padding: 50px; /* You can reduce padding if it feels too large */
    font-size: 14pt;
    font-family: "Open Sans", sans-serif;
    font-weight: 300;
    display: flex;
    justify-content: center; /* Optional: centers the content horizontally */
    align-items: center; /* Optional: centers the content vertically */
    height: auto; /* Ensure content blocks don't take up too much height */
    margin-top: -80px;
    text-decoration: none;
}

#content1 {
    grid-area: content1;
}

#content2 {
    grid-area: content2;
}

#content3 {
    grid-area: content3;
}

#about1, #about2, #about3 {
    padding: 5px; /* You can reduce padding if it feels too large */
    font-size: 14pt;
    font-family: "Open Sans", sans-serif;
    font-weight: 300;
    display: flex;
    justify-content: center; /* Optional: centers the content horizontally */
    align-items: center; /* Optional: centers the content vertically */
    height: auto; /* Ensure content blocks don't take up too much height */
    width: auto;
    text-decoration: none;
}

#about {
    font-size: 14pt;
    font-family: "Open Sans", sans-serif;
    font-weight: 300;
    grid-area: about;
}

#about1 {
    grid-area: about1;
}

#about2 {
    grid-area: about2;
}

#about3 {
    grid-area: about3;
}

/* Navbar Styles */
nav {
    grid-area: nav;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 14pt;
    font-family: "Open Sans", sans-serif;
    font-weight: 300;
    width: 100%;
    border-bottom: 4px solid #930707;
    background-color: white;
}

.navbar {
    font-size: 13pt;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    width: 100vw;
    border-bottom: 4px solid #930707;
    box-sizing: border-box;
    margin: 0;
}
.navbar li {
    margin: 0 10px; /* Space between items */
}

.navbar a {
    text-decoration: none;
    font-size: 12pt;
    padding: 8px 16px;
    color: black;
    display: block;
    text-align: center;
    transition: color 0.3s ease;
}

.navbar a:hover {
    color: #ababab;
}

/* Hover Underline Animation */
.hover-underline-animation {
    display: inline-block;
    position: relative;
}

.hover-underline-animation::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: #930707;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* Styles for devices with a max-width of 480px (small smartphones) */
@media (max-width: 480px) {
    body {
        font-size: 10pt;
    }

    h1 {
        font-size: 18pt;
    }

    h2 {
        font-size: 14pt;
    }

    p {
        font-size: 12pt;
    }

    nav {
        font-size: 10pt;
    }

    .navbar a {
        padding: 6px 12px;
        font-size: 11pt;
    }
    .container {
        width: 95%;
    }
    .logo img {
        height: 40px; /* Adjust for smaller screens */
    }
}

#load-sentence, #load-word, #load-trigram, #solution, #next-sentence, #next-word, #next-trigram, #next-sentence{
    background-color: #930707;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-family: "Open Sans", sans-serif;
}

#load-sentence:hover, #load-word:hover, #load-trigram:hover, #solution:hover, #next-sentence-hover, #next-word:hover, #next-trigram:hover{
    background-color: #930707;
}

#sentence {
    margin-top: 10px;
    font-size: 32pt;
    color: #333;
}

#user-answer {
    padding: 10px;
    width: 80%;
    font-size: 14px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: "Open Sans", sans-serif;
}

#submit-answer-word, #submit-answer-trigram, #submit-answer-sentence {
    background-color: #930707;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-family: "Open Sans", sans-serif;
}

#submit-answer:hover {
    background-color: #930707;
}

#feedback {
    font-size: 16px;
    color: black; /* Default color */
    margin-top: 3px;
    font-family: "Open Sans", sans-serif;
}

#solution-section {
    font-size: 16px;
    color: black; /* Default color */
    font-family: "Open Sans", sans-serif;
}
.logo {
    display: flex;
    align-items: center;
    margin-right: 10px; /* Space between the logo and nav items */
}
.logo img {
    height: 90px; /* Adjust size as needed */
    width: auto;
    cursor: pointer; /* Makes it clear that it's clickable */
}

img {
    background-size: cover;
    background-repeat: no-repeat;
    border: none;
    width: 200px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

#virtuos.png {
    width: 20px;
}

/* Styles for devices with a max-width of 480px (small smartphones) */
@media (max-width: 480px) {
    .container {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
            "nav"
            "content";
    }
    .container_index {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
            "nav"
            "content"
            "content1"
            "content2"
            "content3";
    }
    body {
        font-size: 10pt;
    }

    h1 {
        font-size: 18pt;
    }

    h2 {
        font-size: 14pt;
    }

    p {
        font-size: 12pt;
    }

    nav {
        font-size: 10pt;
    }

    .navbar a {
        padding: 6px 12px;
        font-size: 11pt;
    }
    .container, .container_unterseiten {
        width: 95%;
    }
}



@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
            "nav"
            "content";
    }
    .container_index {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
            "nav"
            "content"
            "content1"
            "content2"
            "content3";
    }
    .container, .container_index {
        width: 90%;
    }

    img {
        width: 100%;
        height: auto;
    }

    nav {
        font-size: 12pt;
    }

    .navbar {
        flex-direction: column;
        font-size: 11pt;
    }

    .navbar li {
        margin: 5px 0;
    }
}