:root{
    --purple: #303F9F;
    --lightgray: rgb(241, 239, 248);
    --darkgray: #212121;
    --black: #000;
    --white: #FFF;
    --text: var(--black);
    --bg: var(--lightgray);
    --foot: var(--darkgray);
    --bg-header: var(--purple);
    --link: var(--black);
}

.dark{
    --text: var(--white);
    --bg: var(--darkgray);
    --foot: var(--purple);
    --bg-header: var(--black);
    --link: var(--purple);
}

.nav-link{
    --link: var(--white);
}


html{
    font-size: 100%;
    font-family: 'Source Sans Pro', sans-serif;
}

header{
    background: var(--bg-header);
    padding: 55px 0px 100px;
    /* border-bottom: 5px solid #212121; */
    margin: 0 0 30px 0;
    /* box-shadow: 0 0 15px black; */
    position: fixed;
    width: 100%;
    top: 0px;
    transition: box-shadow 0.5s, background 0.5s, padding 0.5s, clip-path 0.5s;   
    clip-path: polygon(0% 0%, 0% 40%, 50% 100%, 100% 40%, 100% 0%);
}

#cabecalho{
    position: relative;
    width: 940px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    vertical-align: middle;
}

header.cus-nav{
    /* background: #303F9F; */
    opacity: 0.95;
    box-shadow: 0 0 15px black;
    padding: 5px 0px 10px;
    clip-path: polygon(0% 0%, 0% 100%, 50% 100%, 100% 100%, 100% 0%);
}

header h1{
    font-size: 3rem;
    text-transform: uppercase;
    text-shadow: 1px 1px 8px black ;
    color: white;
    transition: color 1.0s, font-size 0.5s, text-shadow 1.0s;
}

header h1.logo{
    color: white;
    text-shadow: 2px 2px 8px black ;
    font-size: 2rem;
}

nav{
    position: relative;
    margin: auto 0;
    font-size: 1.5rem;
}

nav ul{
    display: flex;
}

nav li{
    padding: 0 1rem;
    text-transform: uppercase;
    font-weight: bold;
}

nav a:hover{
    color: rgb(202, 189, 224);
    cursor: pointer;
}

nav a{
    color: var(--link);
    text-decoration: none;
    transition: color 1.0s;
}

main{
    font-size: 1.2rem;
    padding-top: 200px;
    background: var(--bg);
    padding-bottom: 50px;
    color: var(--text);

    transition: background 0.5s, text 1s;
}

main p{
    line-height: 2rem;

}

main h2{
    font-size: 2rem;
    font-weight: bold;
    margin: 30px 30px;
    text-align: center;
}

main li{
    padding: 10px 0;
}

.sobre{
    width: 940px;
    margin: 0 auto;
    text-align: justify;
}

.interesses, .trabalhos{
    width: 940px;
    margin: 0 auto;
}


footer{
    position: relative;
    bottom: 0px;
    background: var(--foot);
    width: 100%;
    color: whitesmoke;
    padding: 20px 50px;
    box-sizing: border-box;
    border-top: 3px solid #303F9F;
    box-shadow: 0 0 15px #BDBDBD;

}

/* https://theme-toggle.rdsx.dev */
::view-transition-group(root) {
  animation-timing-function: var(--expo-out);
}

::view-transition-new(root) {
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><filter id="blur"><feGaussianBlur stdDeviation="2"/></filter></defs><circle cx="20" cy="20" r="18" fill="white" filter="url(%23blur)"/></svg>') center / 0 no-repeat;
  animation: scale 1s;
}

::view-transition-old(root),
.dark::view-transition-old(root) {
  animation: none;
  z-index: -1;
}
.dark::view-transition-new(root) {
  animation: scale 1s;
}

@keyframes scale {
  to {
    mask-size: 200vmax;
  }
}

/* animation timing functions */
:root {
  --expo-in: linear(
    0 0%, 0.0085 31.26%, 0.0167 40.94%,
    0.0289 48.86%, 0.0471 55.92%,
    0.0717 61.99%, 0.1038 67.32%,
    0.1443 72.07%, 0.1989 76.7%,
    0.2659 80.89%, 0.3465 84.71%,
    0.4419 88.22%, 0.554 91.48%,
    0.6835 94.51%, 0.8316 97.34%, 1 100%
  );
  --expo-out: linear(
    0 0%, 0.1684 2.66%, 0.3165 5.49%,
    0.446 8.52%, 0.5581 11.78%,
    0.6535 15.29%, 0.7341 19.11%,
    0.8011 23.3%, 0.8557 27.93%,
    0.8962 32.68%, 0.9283 38.01%,
    0.9529 44.08%, 0.9711 51.14%,
    0.9833 59.06%, 0.9915 68.74%, 1 100%
  );
}