@font-face {
    font-family: 'Computer Modern Roman';
    src: url('/fonts/cmunrm.ttf');
}

html {
    font-family: 'Computer Modern Roman', sans-serif
}

body {
    --top-horizontal-padding: 17.5%;
    --top-vertical-padding: 5%;

    margin-left: var(--top-horizontal-padding);
    margin-right: var(--top-horizontal-padding);
    margin-top: var(--top-vertical-padding);


    background-color: cadetblue;
}

a {
    color: inherit;
    text-decoration: underline dotted black;
    text-decoration-thickness: 15%;
}

#name {
    font-size: larger;
    color: inherit;
    text-decoration: none;
}

#name-grid {
    display: grid;
    grid-template-rows: 1fr 1fr;
}

footer {
    display: flex;
    justify-content: left;
}


#name_and_photo {
    font-size: larger;
}

#name_and_photo * {
    display: flex;
    align-items: end;
    margin-bottom: 0%;
}

#menu {
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: center;
}

.menu-element {
    display: flex;
    align-items: center;

    font-weight: bold;
    font-size: larger;
}

#name2 {
    display: flex;
    margin-bottom: 0;
    ;
    align-items: end;
}

#designation {
    display: flex;
    margin-top: 0%;
    align-items: baseline;
    font-size: large;
}

#designation * {
    margin-top: 0%;
}

#language {
    font-family: inherit;
    border: none;
    background: none;

    justify-content: right;

    font-weight: inherit;
    font-size: inherit;
}

#description {
    font-size: large;
}

@media (width < 1150px) {
    #center {
        display: grid;
        grid-template-rows: auto auto;
    }

    #top-side {
        display: grid;
        grid-template-rows: auto auto;
    }

    .menu-element {
        justify-content: left;
    }
}

@media (width >=1150px) {
    #center {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    #top-side {
        display: grid;
        grid-template-columns: auto 1fr;
    }

    .menu-element {
        justify-content: right;
    }
}


#showcase {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    justify-content: right;
    justify-items: right;
    margin-left: 5%;
}

#showcase * {
    width: fit-content;
    height: fit-content;
}

#showcase #showcase-name {
    font-weight: bolder;
    font-size: x-large;
}

#showcase #showcase-description {
    font-size: large;
}

div {
    text-align: justify;
}

#about {
    font-size: large;
    display: grid;
    grid-template-rows: 1fr 1fr;
    margin-right: 5%;
}