html{
overflow-y: hidden;
}


.Message {
    display:none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 75vmin;
    height: 10vmin;
    background: radial-gradient( rgba(150,150,150,.9) 0%, rgba(100,100,100,.5) 85%,rgba(0,0,0,.25) 87%, rgba(0,0,0,0) 90%);
    border-radius: 5vmin;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    text-align: center;
    color: #CCC;
    text-shadow: 0 0 5px #222;
}


.MainWindow{
    position: absolute;
    width:10%;
    height:100%;
    left:-10%;
    pointer-events: none;
}

.MainWindow > .Base,.MainWindow > .Base2  , .MainWindow > .Base > div ,.MainWindow > .Base2 > div  {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    pointer-events: none;
}

.MainWindow > .Base, .MainWindow > .Base2{
    position: absolute;
    top: 0;
    bottom: 0;
    left: -50vmin;
    right: -5%;
    margin: auto;
    width: 105%;
    height: 100%;
    //background: radial-gradient( rgba(150,150,150,.9) 0%, rgba(100,100,100,.5) 85%,rgba(0,0,0,.25) 87%);
    //border: 2px solid #A66;
    z-index:10;
    //mix-blend-mode: screen;
}
.MainWindow .Base{
    mix-blend-mode: exclusion;   
}

.MainWindow  .Base .Circle{
    width: 100%;
    height: 70vmin;

    background: #CCC;
    border-radius:50vmin;

}

.MainWindow  .Base .Rect{
    width: 85%;
    height: 100%;

    background: #CCC;

}

.MainWindow .Base2{
    mix-blend-mode: darken;   
    opacity:0.66;
}

.MainWindow  .Base2 .Circle{
    width: 100%;
    height: 70vmin;

    background: #CCC;
    border-radius:50vmin;
    background: radial-gradient( rgb(150,150,150) 0%, rgb(100,100,100)85%);

    border-right: 3px solid #333;
    pointer-events: all;
    //border-top: 1px dotted transparent;
}

.MainWindow  .Base2 .Rect{
    width: 85%;
    height: 100%;
    //background: #CCC; 
    //background: linear-gradient( to right, rgb(100,100,100) 30%,rgb(110,110,110) 50%, rgb(100,100,100) 100%);
    background: radial-gradient( rgb(110,110,110) 42%, rgb(100,100,100)85%);

    border-right: 2px solid #333;
    box-shadow: 0 0 2vmin #333;
}

.MainWindow .Content{
   position: absolute;
    top: 0;
    bottom: 0;
    left:   0vmin;/*-1*/
    right: -5%;
    width: calc( 89% - (50vmin )/2);
    height: 100%;
    z-index: 20;
    border: none;
    mix-blend-mode: difference;
    user-drag: none; 
}

#Pages{
    position:absolute;
    z-index:20;
    width: calc( 89% - (50vmin )/2);
    overflow: hidden;
    //width: 100%;
    height: 100%;
}

#Pages .Page{
    margin: auto;
    width: 98%;
    height: 100%;
    display: none;
    font-size: 1.5vmin;
    animation: PageFade 0.33s linear;
    pointer-events: all;
    font-family: 'Roboto Slab',serif;
    user-drag: none; 
    -webkit-user-drag: none;
}

#Pages h1{
   text-align: center;
    width: 100%;
    height: 6%;
   background-color: #CCC;
   color: black;
   text-shadow: 0 0 3px white,0 0 5px white;
    margin-bottom: 3vmin;
    user-select: none;
    user-drag: none; 
    -webkit-user-drag: none;
}
#Pages p{
    font-size: calc( 5px + .89vw - (.50vmin )/2);
    //color: white;
    font-family: 'Roboto Slab',serif;
    color: #DDD;
    text-shadow: 0 3px 0.5vmin #000, 0 0 0.1vmin #FFF;
}
#Pages > .Page > p::first-letter{
    font-size: 3vmin;
    color:#CCC;
    text-shadow: 0 0 3px black;
}


.CircleCutout{
  //  background: beige;
    shape-outside: circle(33vmin at calc( 105% - 15vmin) 42%);
    float:right;
    float: right;
    width: 46vmin;
    height: 100%;
}

/*--------*/
#ContrastForeground{
pointer-events:none;
position:absolute;
height:100%;
width:100%;
background:white;
mix-blend-mode: soft-light;
opacity:0;
}
/*-------------------About-------------------*/

#ProfilePic{
position: relative;
//background-color:#666;
background: url(../Media/ProfilePic.png), radial-gradient(#666, #333);
background-position: center;
background-size:contain;
background-repeat: no-repeat;
border:0.5px solid #666;
border-radius: 3vmin;
box-shadow: 0 0 5vmin #333,0 0.5vmin 3vmin #333;
margin-left: 1vmin;
//margin-right: 2vmin;
width: calc(100% - 1vmin);//calc(12vw);
height: calc(16vw);
min-width: 45px;
min-height: 60px;
//max-inline-size: fit-content;
max-width: calc(100% - 50vmin);
max-height: 24vw;
float: left;
}

#About_Info{
height: 20vw;
min-height: 80px;
font-family: 'Roboto Slab',serif;
position:relative;

}

#About_Info>tbody{
position:absolute;
width:80vmin;
max-width: calc( 89vw - 50vmin);
left: 1vmin;
}

#About_Info tr{
font-size: calc( 8px + .89vw - (.50vmin )/2);
color:#CCC;
text-shadow: 0 0 3px black; 
}

#About_Info tr td:nth-child(1){
width:15%;
color: #AAA;
text-shadow: 0 0 3px black;
  }
#About_Info tr td:nth-child(1)::first-letter{
    font-size: calc( 12px + .89vw - (.50vmin )/2);
    color:#CCC;
  }
#About_Info tr td:nth-child(2)::first-letter{
    font-size: calc( 10px + .89vw - (.50vmin )/2);
    //line-height:3vmin;
    //vertical-align: bottom;
  }

#About_Info tr:nth-child(5) td:nth-child(2){
    padding-right: calc(50vmin - 20vw);
}
#About_Info p{
    margin:0;
}


#About_Skills{
 font-size: calc(5px + 3vw - 3vmin );
color:#CCC;
width: calc(100% - 50vmin);
height:5%;
display: flex;
margin-left: 1vmin;
border: 2px solid black;
border-radius: 2vmin;
padding-left: 1vmin;
padding-right: 1vmin;
background: linear-gradient(#444,#666);
box-shadow:  0 0 5vmin #333,0 0.5vmin 3vmin #333;
opacity:0.75;
}
#About_Skills>div{
margin: auto;
width: 48%;
}
#About_Skills>div:nth-child(1){
text-align:right;
}
#About_Skills>div:nth-child(2){
text-align:left;

}
#About_Skills>div>p{
margin:0;
 font-size: calc(5px + 3vw - 3vmin );
color:#FFF;
font-style:italic;
}

/*----------------Programming----------------*/
.ProgSkills .Container{
position: relative;
background-color:#AAA;
border:0.5px solid #666;
border-radius: 1vmin;
box-shadow: 0 0 2vmin #333,0 0 1vmin #333;
margin: 10px;
width: calc(100% - 45vmin);
}
.ProgSkills .Container .Skill{
 text-shadow: 0 0 5px white;
background-color:#EEE;
padding:2px;
padding-left:2vmin;
border-radius: 1vmin;
overflow:visible;
 white-space: nowrap;
border:1px solid #666;
animation: SkillLoad 0.8s linear;
}
.ProgSkills .Container div>div{
    position: absolute;
    top: 0;
    right: 1vmin;
    color: #CCC;
    text-shadow: 0 0 3px black;
}
.ProgSkills .Container:nth-child(1) .Skill{ /*C3*/
background-color:#DDF;
background:linear-gradient(#99B,#DDF);
animation-duration: 0.4s;
}
.ProgSkills .Container:nth-child(2) .Skill{ /*Java*/
background-color:#ECC;
background:linear-gradient(#A88,#ECC);
animation-duration: 0.5s;
}
.ProgSkills .Container:nth-child(3) .Skill{ /*JavaScript*/
background-color:#EEC;
background:linear-gradient(#AA8,#EEC);
animation-duration: 0.6s;
}
.ProgSkills .Container:nth-child(4) .Skill{ /*Python*/
background-color:#CEE;
background:linear-gradient(#8AA,#CEE);
animation-duration: 0.7s;
}
.ProgSkills .Container:nth-child(5) .Skill{ /*C*/
background-color:#CCE;
background:linear-gradient(#88A,#CCE);
animation-duration: 0.8s;
}
.ProgSkills .Container:nth-child(6) .Skill{ /*Lua*/
background-color:#CEC;
background:linear-gradient(#8A8,#CEC);
animation-duration: 0.9s;
}