:root {


    --header-background: #536878;
    --sidenav-background: #53687834;
    --body-background: #EAE0C8;

    --header-text-color: hsl(0, 0%, 100%);
    --main-text-color: #36535E;



    --link-text-color: #36535E;
    --link-text-hover-color: hsl(0, 0%, 50%);

    --nav-text-hover-color: hsl(0, 0%, 50%);
    --nav-text-color: hsl(0, 0%, 100%);

    --glass-border-color: rgba(255,255,255,0.18);
    --glass-first-grad-color:rgba(255, 255, 255, 0.8);
    --glass-second-grad-color:rgba(255, 255, 255,0.2);

    --side-padding: 10vw;

    --progress-value-color:#afdfe794;
    --progress-color:hsl(0, 0%, 50%);
}

progress::-webkit-progress-bar{
    background-color: radial-gradient(circle, var(--glass-first-grad-color),var(--glass-second-grad-color));
}
progress::-webkit-progress-value{
    background-color: var(--progress-value-color);
}
progress::-moz-progress-bar{
    background-color: var(--progress-value-color);
}

#sidenav{
    font-size: 3rem;
    background-color: var(--sidenav-background);
    backdrop-filter: blur(15px);
}

@font-face {
    font-family: 'AnticDidone';
    src: url('../fonts/AnticDidone.ttf') format('truetype');
}

body{
    background-color: var(--body-background);
    font-family: 'AnticDidone', sans-serif;
}

header{
    background-color: var(--header-background);
    color: var(--header-text-color);
}

main > section{
    background-color: var(--main-background-color);
    color: var(--main-text-color);
}

main > article{
    background-color: var(--main-background-color);
    color: var(--main-text-color);
}

#footer-content{
    background-color: var(--header-background);
    color: var(--header-text-color);
}

.proflink:hover{
    color: var(--link-text-hover-color);
}

.proflink{
    text-decoration: none;
    color: var(--link-text-color);
    transition: color 0.5s;
}

#nav-Links a:hover{
    color: var(--nav-text-hover-color);
}

#nav-Links a{
    text-decoration: none;
    color: var(--nav-text-color);
    font-size: 2rem;
    transition: color 0.5s;
}

#nav-Links{
    list-style: none;
    display: flex; 
}

#site-Logo {
    width:10em;
    height: auto;
}


ul{
    list-style: none;
}

ul a:hover{
    color: var(--nav-text-hover-color);
}

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

#MyName{
    font-size: 3rem;
    margin-bottom: 0rem;
    margin-top: 0rem;
    padding-top: var(--img-top-padding);
    text-align: justify;
}

#about-me-text{
    font-size: medium;
}

#currentPosition{
    font-size: 1rem;
    text-align: justify;
    margin-top: 0rem;
    margin-bottom: 0rem;
}

#intro-list{
    list-style: none;
    font-size: 1.2rem;
}

.section-heading{
    text-align: center;
}

#address{
    font-size: small;
}

.glass{
    background: radial-gradient(circle, var(--glass-first-grad-color),var(--glass-second-grad-color));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border-color);
}

/*
progress::-webkit-progress-bar {
    background-color: var(--glass-second-grad-color); 
}

progress::-webkit-progress-value {
    background-color: var(--progress-value-color); 
}

progress::-moz-progress-bar {
    background-color: var(--progress-value-color); 
}*/

#modal{
    background-color: var(--header-background);
    font-size: 1.2rem;
  }
  #modal-contain{
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

@media (max-width:679px) {
    #MyName, #currentPosition{
        text-align: center ;
    }
}