body
{
    background-image: url('images/Bernat_Andras_118-3.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    font-family: sans-serif;
    background-size: cover;
}




body a
{
    color: rgb(219, 139, 42);
    text-decoration: none;
}

body a:hover
{
    color: rgb(43, 43, 43);
}


.subject
{
    background-color: rgba(107, 85, 92, 0.7);
    color: rgb(219, 166, 42);
    margin-bottom: 10px;
    border-radius: 5px;
    animation: fadeIn 1s ease-out forwards;
    margin-left: 3%;
    margin-right: 3%;
    padding: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for 3D effect */

}



@keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }







.subject-dropdown {
    position: relative;
    display: inline-block;
}


/* Styles for the button that triggers the dropdown */
.subject-dropbtn {
    background-color: rgba(219, 139, 42, 0.7);
    color: rgb(0, 0, 0);
    border: none;
    padding: 0px, 0px;
    font-size: 16px;
    border-radius: 5px;
    margin: 0 2px;
    height: 30px;
    min-width: 165px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s;
}

/* Change button color on hover */
.subject-dropbtn:hover,  .subject-dropdown:hover .subject-dropbtn{
    background-color: rgba(219, 139, 42, 0.2);
    color: rgb(219, 139, 42);

}

/* Dropdown content (hidden by default) */
.subject-dropdown-content {
    background: rgba(75, 59, 65, 0.9);
    display: none;
    position: absolute;
    min-width: 150px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border-radius: 5px;
    width: fit-content;
}

.subject-dropdown:hover .subject-dropdown-content {
    display: block;
}


/* Dropdown links styles */
.subject-dropdown-content a {
    color: rgb(219, 166, 42);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-family: sans-serif;
    font-style: normal;
    border-radius: 5px;
    transition: background-color 0.3s;

}

/* Change background color of dropdown links on hover */
.subject-dropdown-content a:hover {
    background: linear-gradient(to bottom, rgba(118, 89, 59, 0.726), rgba(222, 148, 1, 0.4));
    color: rgb(0, 0, 0);
    display: block;

}


.fade-table {
    opacity: 1;
    transition: opacity 0.3s;
    pointer-events: auto;
    width: min(320px, 90%);
}

.fade-table.hide {
    opacity: 0;
    pointer-events: none;
}



































/* Basic styles for the button container */
.button-container {
    background-color: rgba(107, 85, 92, 0.4);
}




.button, .dropbtn
{
    background: linear-gradient(to bottom, rgba(118, 89, 59, 0.726), rgba(222, 148, 1, 0.4));
    color: rgb(4, 31, 92);

}



.button:hover, .dropbtn:hover
{
    color: rgb(2, 35, 114);
    background: linear-gradient(to bottom, rgba(118, 89, 59, 0.726), rgba(222, 148, 1, 0.7));

}


/* Dropdown content (hidden by default) */
.dropdown-content, .theme-dropdown {
    background: rgba(118, 89, 59, 0.726);
}

/* Dropdown links styles */
.dropdown a, .theme-dropdown a {
    background-color: rgba(222, 148, 1, 0.4);
    color: rgb(4, 31, 92);

}

/* Change background color of dropdown links on hover */
.dropdown-content a:hover, .theme-dropdown a:hover {
    background-color: rgba(222, 101, 1, 0.4);
    color: rgb(4, 31, 92);
}


.dropdown:hover .dropbtn {
    background-color: rgba(222, 101, 1, 0.4);
}