/*
 * animated nav bar 
 */

.navbar {
  display: flex; 
  justify-content: center;
  width: 100%;
}


.nav-image {
  width: 80%;
}

.nav-item {
      transition: transform 0.3s ease;
}

.nav-item:hover {
    transform: scale(1.1);
    opacity: 0.9;
}

footer {
    text-align: center;
    background-color: #d3d3d3;
    box-sizing: border-box;
    width: 100%;
    padding: 1%;
}

.main {
    display: grid;
    place-items: center;
}


.items{
    width: 70%;
}

.items-content{
    display: flex;
    align-items: flex-start;
}

.items-content-image {
    width: 15%;
}

.items-content-text {
    width: 75%;
    padding: 10px;
}

/* 
 * fonts
 */

body {
    font-size: 1em;
    color: #555;
    line-height: 1.2;
    font-family:ComicSansMS;
}

strong{
    font-family:Christopherhand;
    font-size:1.2em;
    color: #000;
}

strong>em{
    font-size:1.3em;
    font-style:normal
}

h1:first-letter,h3:first-letter,strong>em{
    color:#c3044c
}

h1,h3,h4{
    font-family:Freestyle Script
}

h1{
    font-size:2em;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

h3{
    font-size:2em;
}

@font-face {
    font-family:Christopherhand;
    src: url('./fonts/comesinhandy.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


@font-face{
    font-family:Freestyle Script;
    src: url('./fonts/freescpt.ttf') format('truetype');

}

@font-face{
    font-family:ComicSansMS;
    src: url('./fonts/ComicSansMS.ttf') format('truetype');

}


/* Responsive adjustments for smaller screens */
@media only screen and (max-width: 800px) {
    body {
        font-size: 0.5em;
    }
    h3{
        font-size:1em;
    }

    .items{
        width: 85%;
    }


}


/* 
 * decoration 
 */

.title {
    text-align: left;
    margin-bottom: 20px;
    color: #000
}



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

a:hover {
    color: red;
}

table {
    margin: 0 auto;
    border-collapse: collapse;
    /* width: 80%; /1* Optional: adjust width *1/ */
}

thead {
    font-weight: bold;
    text-align: left;
    padding: 8px;
}

td {
    text-align: left;
    padding: 8px;
}

tr.underlineTitle {
    border-bottom: 2px solid black; /* Adds a line under this row */
}
tr.underline {
    border-bottom: 2px solid grey; /* Adds a line under this row */
}

table td thead { 
    padding: 0px; 
} 
tr{ 
    font-size:  1em; 
} 


.toptitle {
    padding-left: 1em;
    padding-top: 1em;
}

.toptitle strong{
    font-size:2em;
}

.toptitle strong>em{
    font-size:2.2em;
}

.tab {
    padding-left: 10%;
}

span{
    padding-bottom: 10px;
}