/*

    Body and tag styling

*/

body {
    margin: 0;
    background-color:rgb(44, 65, 65);
    color: cadetblue;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

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

img {
    width: fit-content;
}


/*

Block styling

*/

.container {
    display: flex;
    padding: 40px;
}

.other-page-main-container {
    margin: 0px 15%;
    padding-bottom: 30px;
    padding-top: 40px;
    height: max-content;
    background-color: rgb(38, 80, 82);
}

.aligned-middle-container {
    display: flex;
    justify-content: center;
    padding: 40px 10px;
}

.block-container {
    margin: 5px 15px 100px 15px;
    background-color: rgb(17, 66, 68);
    padding: 30px;
    border-radius: 40px 5px;
    border-width: 2px;
    border-color: rgb(13, 38, 39);
    border-style: double ridge;
}

.container-header {
    margin: 10px auto 30px auto;
    font-size: 70px;
    background-color: rgba(5, 27, 29, 0.5);
    width: fit-content;
    padding: 5px 10px;
    border-radius: 20px 40px;
    border-width: 4px;
    border-color: rgb(10, 28, 31);
    border-style: groove;
    text-align: center;
}

.other-subheading {
    font-size: 40px;
    margin: 80px auto 20px auto;
    padding: 10px 60px 5px 60px;
    width:fit-content;
    height: fit-content;
    background-color: rgba(5, 27, 29, 0.5);

    border-color: rgb(109, 152, 153);
    border-style: groove;
    border-radius: 50px 10px;
}

.other-subsubheading {
    font-size: 20px;
    margin: 5px auto 20px auto;
    padding: 10px 60px 10px 60px;
    width:fit-content;
    height: fit-content;
    background-color: rgba(11, 54, 58, 0.5);
    color: rgb(25, 160, 165);
    border-color: rgb(109, 152, 153);
    border-style: groove;
    border-radius: 50px 10px;
}


/*

Navbar styling

*/

nav {
    width:100%;
    height: 60px;
    position: fixed;
    background-color: rgb(55, 102, 104);
    align-content: space-evenly;
    min-width: 925px;
}

.nav-item {
    float: left;
    padding: 10px 40px;
    border-color: rgb(75, 132, 134);
    color: rgb(46, 71, 71);
    font-size: 20px;
    border-radius: 30px 10px;
    border-style: ridge double groove;
    text-align: center;
    margin: 5px 30px;
}

.current-tab {
    color:rgb(136, 67, 67)
}

#languages-container:hover {
    background-color: rgb(55, 102, 104);
    padding: 10px 8px;
    border-width: 5px;
    border-color: rgb(33, 50, 51);
    transition: all 400ms cubic-bezier(0.215, 0.610, 0.355, 1);
}







.dropdown-button:hover {
    color: red;
    align-content: center;
    transition: all 400ms ease;
    background-color: rgb(26, 73, 75);
}


.dropdown-button {
    display: none;
    padding: 10px 35px;
    margin: 15px 10px;
    
}

.nav-item:hover .dropdown-button {
    display:block;
    border-color: rgb(18, 25, 26);
    border-width: 1px 5px;
    border-radius: 15px;
    border-style:groove double;
}

.nav-item .dropdown-button:hover {
    border-color: black;
    border-width: 2px 7px;
    border-style: ridge;
}

.nav-item-clickable:hover {
    color: red;
    border-color: rgb(27, 69, 70);
    background-color: rgb(26, 73, 75);
    transition: all 400ms ease;
}


/*

    Paragraphs and headings

*/


.paragraph-heading {
    font-size: 60px;
    margin: 40px 0px;
    padding: 10px 60px 10px 50px;
    width:fit-content;
    height: fit-content;
    background-color: rgb(56, 89, 90);
    color: rgb(30, 46, 46);
    border-color: rgb(109, 152, 153);
    border-style: groove;
    border-radius: 50px 10px;
}

.paragraph-text {
    padding: 0 15px;
}


.paragraph-image-pair {
    padding: 0px 10px;
    display: flex;

}

.paragraph-pair {
    border-radius: 50px 5px;
    padding: 20px;
    border-style: outset groove ridge double;
    border-width: 2px;
    font-size: 20px;
}

.image-pair {
    padding: 0px 15px;
    margin: auto;
    max-width: 50%;
    height: fit-content;
}

.image-curved {
    border-radius: 20px 40px;
}




/*

Tables and table entries

*/


.table-entry {
    padding: 10px 3px;
    background-color: rgb(63, 96, 97);
    border-radius: 50px 20px;
    border-width: 5px;
    border-color: rgb(45, 84, 85);
    border-style: groove double ridge;
    min-width: 190px;
    width: 6%;
    max-width: 100px;
    height: 10px;
    font-size: 24px;
    color: rgb(51, 58, 58);
}

.table-entry:hover {
    background-color: rgb(36, 60, 61);
    color: rgb(56, 133, 126);
    border-color: rgb(40, 73, 73);
    border-style: groove;
    border-radius: 50px 10px;
    transition: all 400ms ease;
}

.table-entry-container {
    display: flex;
    justify-content:space-evenly;
    padding: 5px 20px;
}

.table-logo {
    width: fit-content;
    max-width: 40px;
    max-height: 40px;
}

.logo-text {
    padding-left: 20px;
    text-align:center;
}

.program-button-table {
    padding: 30px;
}


/*

    Title styling

*/

.title-image {
    height: auto;
    max-height: 250px;
}

.title-heading {
    font-size: 100px;
    margin: auto 0;
    padding-left: 30px;
    text-align: center;
}

/*

    Footer

*/

.footer {
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
    background-color: rgb(21, 43, 44);
    height: fit-content;
    font-size: 18px;
    min-width: 925px;
}

.imperial-logo {
    width: 40%;
    height: auto;
    padding: 10px;
    margin-top: 20px;
}


.imperial-logo-badge {
    width: 12%;
    filter: invert();
    margin-right: auto;
    
}

.footer-container {
    margin-left: 40%;
    display: block;
}

.footer-text {
    padding-top: 20px;
    text-align: center;
}