@charset "UTF-8";

:root {
    --my-pic-height: 600px;
    --my-pic-width: 450px;
    --profile-link-height: 40px;
    --drop-shadow: 0 2px 5px 0px rgba(0, 0, 0, 0.16), 0 2px 10px 0px rgba(0, 0, 0, 0.12);
    --announcements-color: hsl(25, 83%, 65%)
}

abody {
    font-size: 1rem;
    font-family: var(--title-font);
    text-align: center;
    margin: 20px;
}

.orange-box {
    background-color: orange;
    color: white;
    padding: 20px;
    border-radius: 5px;
    width: 300px;
    text-align: center;
}

.aboutme {
    display: grid;
    grid-template-columns: min(50%, var(--my-pic-width)) auto;
    grid-template-rows: auto 1fr auto;
    gap: 20px 10px;
    grid-template-areas: "image contact" "image announcements" "bio bio"
}

.pub {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto 1fr auto;
    gap: 20px 10px;
    grid-template-areas: "title" "authors" "abstract"
}

.pub #title {
    font-size: 2rem;
    font-family: var(--title-font);
    text-align: center;
}

.pub .authors {
    text-align: center;
}

.pub .institutes {
    text-align: center;
    color: #808080;
}

.citation {
    font-size: 0.8rem;
    display: block;
    white-space:nowrap;
    background-color: #F0F0F0;
}

.pub .authors .links {
    margin-top: 5px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap
}

.pub .authors .links a {
    border-radius: 10px;
    border: 1.5px solid var(--link-color);
    padding: 5px;
    display: inline-block;
    transition: all .3s ease;
    font-size: 0.7rem;
}

.pub .authors .links a:hover,
.pub .authors .links a:visited:hover {
    color: #fff;
    border-color: var(--hover-color);
    background-color: var(--hover-color)
}

.pub .authors .links a.img {
    margin: 0;
    border-radius: 0;
    border: 0;
    padding: 0;
    display: inline-block;
    transition: all .3s ease
}

.pub .authors .links a.img img {
    box-shadow: none;
    padding: 0;
    width: var(--projects-link-width);
    height: var(--projects-link-width);
    margin: 0 5px;
    vertical-align: middle;
    display: inline;
    transition: all .2s ease-in-out
}

.pub .authors .links a.img img:hover {
    transform: scale(1.1)
}

.abstract .heading {
    font-size: 1.5rem;
}

.myimage {
    grid-area: image;
    border: var(--border);
    width: 100%;
    max-width: var(--my-pic-width);
    padding: 0
}

.contact {
    grid-area: contact;
    display: flex;
    gap: 20px;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    border: var(--border)
}

.contact .content {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.contact .titles {
    list-style-type: none;
    padding: 0;
    margin: 0
}

.contact .address ul {
    list-style-type: none;
    padding: 0;
    margin: 0
}

.contact #name {
    font-size: 2rem;
    font-family: var(--title-font)
}

.contact .links {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 10px
}

.contact .links a {
    margin: 0;
    padding: 0
}

.contact .links a:active,
.contact .links a:hover,
.contact .links a:link,
.contact .links a:visited {
    color: var(--bg-color);
    -webkit-text-fill-color: var(--link-color);
    background-color: transparent
}

.contact .links img {
    width: var(--profile-link-height);
    padding: 0;
    transition: all .2s ease;
    display: block
}

.contact .links img:hover {
    transform: scale(1.1)
}

.contact .floating-orange {
    background-color: orange;
    padding: 10px;
    top: 20px;        /* distance from the top of the screen */
    right: 20px;      /* distance from the right edge */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* optional: shadow for a "floating" effect */
    border-radius: 10px; /* optional: rounded corners */
}

.announcements {
    grid-area: announcements;
    display: flex;
    flex-direction: column
}

.announcements ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    list-style-type: none;
    padding: 0;
    flex-grow: 1;
    gap: 10px;
    justify-content: center;
    margin: 0 5px
}

.announcements li {
    border-radius: 10px;
    box-shadow: var(--drop-shadow);
    padding: 20px 20px;
    text-align: justify
}

.announcements li:nth-child(4n+1) {
    background-color: var(--announcements-color)
}

.announcements li:nth-child(4n+2) {
    background-color: #efc550
}

.announcements li:nth-child(4n+3) {
    background-color: #50c1e4
}

.announcements li:nth-child(4n+0) {
    background-color: #ea4949
}

.bio {
    grid-area: bio;
    text-align: justify
}

.news {
    border: var(--border);
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: repeat(2, auto);
    gap: 0 15px;
    grid-template-areas: "title" "featured";
    align-items: baseline;
    margin-bottom: 20px
}

.news .subtitle,
.news .title {
    display: block;
    clear: both;
    margin: 0 auto 10px;
    padding-top: 15px;
    font-size: 1.5rem;
    clear: both;
    border-bottom: 1px solid grey;
    font-family: var(--title-font)
}

.news .heading {
    font-size: 1.5rem;
    grid-area: title;
    width: 100%
}

.news .subtitle {
    display: block;
    clear: both;
    font-family: var(--title-font);
    font-size: 1.3333rem;
    margin: 0;
    padding-top: 0;
    border-bottom: none
}

.news img.headline {
    display: block;
    margin: 0 auto;
    padding: 10px;
    width: calc(100% - 20px)
}

.news video.headline {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 400px;
    padding: 0
}

.new div.featured {
    grid-area: featured
}

.news div.all {
    grid-area: all
}

.news .item .date {
    font-weight: 700;
    padding: 7px 0 3px
}

.news div.featured .item .date {
    padding-left: 10px
}

.news .item {
    float: none;
    border-bottom: 1px solid grey;
    margin-bottom: 5px
}

.news .item p {
    padding: 5px 10px 5px 20px;
    margin: 0;
    text-align: justify
}

.news div.all .item:last-child,
.news div.featured .item:last-child {
    padding-bottom: 10px;
    border-bottom: none
}

.news div.all .featured,
.news div.all img,
.news div.all video {
    display: none
}

@media only screen and (max-width:1050px) {
    .contact {
        flex-direction: column;
        justify-content: flex-start
    }
}

@media only screen and (max-width:825px) {
    .aboutme {
        grid-template-areas: "image contact" "announcements announcements" "bio bio"
    }
}

@media only screen and (max-width:775px) {
    .aboutme {
        display: grid;
        grid-template-columns: 100%;
        gap: 20px 10px;
        grid-template-areas: "image" "contact" "announcements" "bio"
    }

    .myimage {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: -10px;
        float: none;
        padding-right: 0;
        width: 100%;
        height: auto;
        max-width: 450px
    }

    .contact,
    .contact .content {
        width: 100%
    }

    .contact #name {
        text-align: center
    }

    .contact {
        height: auto
    }

    .contact .content {
        gap: 10px
    }

    .contact .titles {
        text-align: center
    }

    .contact div.links {
        margin: 0 auto
    }

    .announcements ul {
        margin: 5px
    }

    .news {
        grid-template-columns: repeat(1, 1fr);
        gap: 0;
        grid-template-areas: "title" "all";
        margin-bottom: 20px
    }

    .news div.featured {
        display: none
    }

    .news div.all .featured,
    .news div.all img,
    .news div.all video {
        display: block
    }

    .news div.all img,
    .news div.all video {
        display: none
    }

    .news video.headline {
        max-width: 500px
    }
}

.container {
    display: flex; /* Enable flexbox */
}

.block {
    width: 50%; /* Adjust the width of each block */
    padding: 10px;
    box-sizing: border-box;
}