.timetable { width: 100%; }
.content .timetable th:first-child,
.content .timetable th:nth-child(2) {
    white-space: nowrap; /* Forces the text onto a single line */
    width: 1%;           /* Hints to the browser to make this column narrow */
}
/* Target the last <th> (the time/room) to take the remaining space */
.content .timetable th:last-child {
    width: 97%; /* Tells this column to expand to fill the table */
}

/* On mobile (portrait), increase the font size of the table */
@media (orientation: portrait) {
    .timetable {
        font-size: 2em; /* You can adjust this value */
    }
}

@media (orientation: landscape) {
.info {
    float: right;
    margin: 0px 24px 12px 24px;
    padding: 8px 4% 8px 8px;  
    border-bottom-style: solid;
    border-bottom-width: 5px;
    border-block-color: #4b4b4b;
    font-size: 100%;
    /* max-width: 400px; */
    /* width: 12cm; */   
    }
}


@media (orientation: portrait) {
.info {
    margin: 0px 24px 12px 24px;
    padding: 8px 4% 8px 8px;  
    border-bottom-style: solid;
    border-bottom-width: 5px;
    border-block-color: #4b4b4b;
    font-size: 210%;
    /* max-width: 400px; */
    /* width: 12cm; */   
    }
}

@media (orientation: landscape) {
    .me {
        width: 179px;
        border-style: solid;
        border-color: #4b4b4b;
        border-width: 3px;
    }
}

@media (orientation: portrait) {
    .me {
        width: 60%;
        border-style: solid;
        border-color: #4b4b4b;
        border-width: 3px;
        padding: 1px 5em;
    }
}

body {
    background-color: rgb(248, 248, 248);
    /* font-family: 'PT Serif', serif; */
    /* font-family: 'Cormorant', serif; */
    font-family: 'Libre Baskerville', serif;
    font-size: 100%;
}

@media (orientation: landscape) {
	.name h2 {
		color: #4b4b4b;
		font-size: 1.2em;
	}
}

@media (orientation: portrait) {
	.name h1 {
		font-size: 2.5em;
	}

	.name h2 {
		color: #4b4b4b;
		font-size: 2em;
	}
}


.content {
    max-width: 1000px;
    margin: auto;
    padding-bottom: 90px;
}

.about-me {
    font-style: italic;
    /* max-width: 500px; */
    padding: 10px;
}

.container {
    padding: 0px 10px 0px 10px;
    text-align: justify;
}

.title-frame {
    padding: 0px 10px 0px 10px;
    margin-bottom: 12px;
    border-bottom-style: solid;
    border-bottom-width: 5px;
    border-block-color: #4b4b4b;
    display: flex;
    flex-direction: row;
    /* background-color: #232323;
    color: #f3f3f3; */
}


@media (orientation: landscape) {
	.IMT {
		width: 180px;
		height: 90px;
		top: 0;  
		bottom: 0;  
		left: 0;  
		right: 0;  
		margin-top: auto;
		margin-bottom: auto;
	}

	.cherubino {
		width: 110px;
		height: 110px;
		top: 0;  
		bottom: 0;  
		left: 0;  
		right: 0;  
		margin-top: auto;
		margin-bottom: auto;
	}
}

@media (orientation: portrait) {
	.IMT {
		width: 0em;
		height: 0em;
		top: 0;  
		bottom: 0;  
		left: 0;  
		right: 0;  
		margin-top: auto;
		margin-bottom: auto;
	}

	.cherubino {
		width: 0px;
		height: 0px;
		top: 0;  
		bottom: 0;  
		left: 0;  
		right: 0;  
		margin-top: auto;
		margin-bottom: auto;
	}
}

.name {
    flex-grow: 1;
	font-size: 14pt;
}

.contacts {
    margin: 5px 0px;
    /* width: 100%; */
    font-size: 100%;
}

.legend {
    /* font-weight: 500; */
    padding-right: 30px;
}

.publications {
    font-size: 90%;
}

.publications li {
    padding-bottom: 10px;
}

.title {
    font-style: italic;
    font-weight: 600;
}

.where {
    padding-left: 40px;
}