*{margin: 0;
    padding: 0;}

body{min-height: 100.1vh;
    background-color: #E7E7E7;
    font-family: "Clear Sans";
    display: flex;
    flex-direction: column;}

.page{width: 80%;
    margin: auto;
    align-items: center;
    justify-content: center;}

h1{color: #007170;
    font-size: 2.5rem;
    margin-bottom: 3rem;}

h2{color: #007170;
    font-style: italic;
    margin-bottom: 1rem;}

h3{color: #007170;}

p{color: #000000;
    text-align: justify;
    margin-bottom: 1rem;}

dt{color: #000000;
    font-weight: bold;}

dd{color: #000000;
    margin-bottom: 1rem;}

a{color: #007170;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    transition: 0.5s;}

a:hover{color: #79a8a8;}

nav{color: #007170;
    background-color: #ffffff;
    position: fixed;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0rem 0.35rem;
    z-index: 1;}

nav ul{display: flex;
    list-style: none;
    font-weight: bold;
    align-items: center;
    justify-content: center;}

nav li:first-child{margin-right: auto;}

nav i{padding: 0.2rem;}

nav a{color: #007170;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    padding: 2rem;
    background-color: transparent;
    border: none;
    transition: 0.5s;}

nav a:hover{color: #ffffff;
    background-color: #007170;}

nav+.page{margin-top: 9rem;}

.sidebar{background-color: #ffffff;
    color: #007170;
    box-shadow: 0 0 0 0.35rem;
    position: fixed;
    top: 0;
    right: -105%;
    height: 100%;
    width: 15rem;
    z-index: 1;
    transition: 0.75s;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;}

.sidebar li{width: 100%;}

.sidebar a{width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;}

.menu-button{display: none;}

.top-id{display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: justify;
    margin: auto;
    margin-bottom: 3rem;}

.desc{font-weight: bold;
    position: relative;
    margin: 0 0 0 2rem;}

.desc h1{margin-bottom: 1rem;}

.desc p{margin-bottom: 0;}

.icons{display: flex;
    font-weight: bold;
    gap: 1.5rem;
    margin: 1rem 0;}

.middle-id{margin: 3rem 0;}

.bottom-id{display: flex;
    justify-content: center;
    flex-direction: row;
    text-align: justify;
    margin: 3rem 0;
    gap: 3rem;}

.education{width: 40%;}
.experience{width:60%;}

.picture{width: 14rem;
    height: 14rem;
    border-radius: 20%;}

.paragraph{margin-bottom: 3rem;}

.docs{display: flex;
    flex-direction: row;
    gap: 4rem;}

.news{display: flex;
    justify-content: center;
    gap: 3rem;}

.date{width: 15%;}
.event{width: 85%;
        margin-top: -0.25rem;}

.foot{font-size: 0.75rem;
    text-align: justify;
    text-align-last: center;}

@media(max-width: 50rem)
    {.hideOnMobile{display: none;}
    .menu-button{display: block;}}

@media(max-width: 30rem)
    {nav a{padding: 1.5rem;}
    nav+.page{margin-top: 8rem;}
    .top-id{flex-direction: column;
        text-align: center;}
    .desc{margin: 2rem 0 0 0;}
    .desc p{text-align: center;}
    .bottom-id{flex-direction: column;}
    .education{width: 100%;}
    .experience{width: 100%;}
    .news{flex-direction: column;
        gap: 1rem;}
    .date{width: 100%}
    .event{width: 100%}}

@media(max-width: 25rem)
    {.sidebar{width: 100%;}
    .docs{flex-direction: column;
        gap: 1rem;}}