::-webkit-scrollbar {
  width: 0.75vw;
 }
::-webkit-scrollbar-track {
  background: #ffffff linear-gradient(white 70%, #26a3fc 100%);
  border-radius: 0% 0% 5px 5px;
 } 
::-webkit-scrollbar-thumb {
  background-color: #26a3fc;
  border: 0.2vw solid white;
  border-radius: 0% 5px 5px 5px;
  border-top: 80px solid white;
 }

body {
    background-color: #36393e;
    color: #ffffff;
    font-family: "Whitney";
    font-size: 32px;
    margin: 0;
    padding: 0;
    display: flex;
    background-image:  radial-gradient(circle farthest-side at 100% 100%, rgba(38, 163, 253, 0.2) 98%, rgba(38,163,253,1) 100%, #0000 100%), url("image.svg");
    background-size: 30vw 30vw, 100vw auto;
    background-position: right bottom, 0 25px;
    background-repeat: no-repeat, repeat;
}
div.content {
  position: relative;
  padding: 0 1vw;
}
div#page {
  position: relative;
  left: 30vw;
  width: 70vw;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  border-radius: 0% 0% 5px 0%;
 }
i.fa-external-link {
  font-size: 0.8em;
}
a {
color: #ffffff;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
a.page {
color: #26a3fc;
text-decoration: none; 
z-index: 0;
--c: rgba(38,163,252,0);
transition: --p 0.3s ease-in-out, --c 0.5s ease-in, color 0.5s ease-in;
background-image: linear-gradient(to left, var(--c) calc(var(--p)*1%),#0000 calc(var(--p)*1%));
background-size:100% 3px;
background-position: left bottom;
background-repeat: no-repeat;
border-radius: 3px;
}
a.page:hover{
--p: 100;
--c: rgba(38,163,252,1);
background-image: linear-gradient(to right, var(--c) calc(var(--p)*1%),#0000 calc(var(--p)*1%));
transition: --p 0.3s ease-in-out, --c 0.1s ease-out, color 0.1s ease-out;
}
a.page:active{
--c: rgba(26,108,255,1);
color: rgba(26,108,255,1);
}
div.head {
 position: sticky;
 width: 70vw;
 height: 80px;
 position: -webkit-sticky; 
 top: 0;
 background-color: #36393e;
 font-size: 50px;
 font-weight: 1000; 
 background-image: linear-gradient(#000000, #36393e);
 z-index: 1;
}
button.head, #x {
 display: none;
 }
span.head{
 margin-top: 1.2vmin;
 position: absolute;
 
}
img.head {
 border-radius: 50%;
 transition: 0.1s;
 width: 60px;
 z-index: 4;
}
li{
  background: rgba(54, 57, 62, 0.5);
  padding: 5px;
  border-radius: 10px;
}
img.navimg {
 height: 54.375px;
 transform: rotate(-148deg);
}
#portrait {
 display:none
}
hr.one {
 border-top: 0.5vw solid black; 
 border-bottom: 0.5vw solid black; 
 border-left: 0vw solid;
 border-right: 0.5vw solid grey; 
 height: 3px;
 width: 68.9vw;
 position: absolute;
 background-color: white;
 bottom: -25px;
} 
hr.two {
 width: 90%
}
hr.three {
border-top: 0.5vw solid black; 
 border-bottom: 0.5vw solid black; 
 border-left: 0.5vw solid grey;
 border-right: 0vw solid; 
 height: 3px;
 width: 100vw;
 position: absolute;
 background-color: white;
 bottom: -25px;
}
div#NavDiv {
 background-color:#000000;
 width: 30vw;
 position: absolute;
 top: 0px;
 height: 100vh;
 border-radius: 0% 0% 5px 0%;
 overflow-x: hidden;
 overflow-y: scroll;
    background-image: url("image.svg");
    background-size: 100vw auto;
    background-position: 0 25px;
 z-index: +2;
}
code{
    background-color:#020202;
    padding: 0px 15px;
    border-radius: 10px;
    font-size: 0.8em;
}
ul {
    list-style: square;
}
.footer {
    font-size:0.4em;
    margin-left: 1em;
}
span.underline:before {    
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 3px;
  right: 0;
  position: absolute;
  bottom: 2px;
  transition: 0.3s ease-out 0.3s;
  width: 0;
  visibility: hidden;
  z-index: 3;
}
a.underline:hover span.underline:before {
  transition: 0.3s ease-in 0s;
  background: #ffffff;
  width: 116%; 
  visibility:visible;
}

@property --p{
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
@property --c{
  syntax: '<color>';
  inherits: true;
  initial-value: rgba(0,0,0,0);
}
.cPath {
  --p:0;
  --b:3px;
  --c:darkred;
  --w:60px;
  
  width:var(--w);
  aspect-ratio:1;
  position:relative;
  display:inline-grid;
  margin:5px;  
  place-content:center;
  transform: rotate(148deg);
  }
.cPath:before,
.cPath:after {
  content:"";
  position:absolute;
  border-radius:50%;
}
.cPath:before {
  inset:0;
  background:
    radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
    conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
          mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
}
.cPath:after {
  inset:calc(50% - var(--b)/2);
  background:var(--c);
  transform:rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
}
.smooth {
  transition: --p 0.3s ease-in 0s;
  }
a.underline:hover .smooth{
  --p:100;
  transition: --p 0.3s ease-out 0.3s;
}

.no-round:before {
  background-size:0 0,auto;
}
.no-round:after {
  content:none;
}
@keyframes p1 {
  from{--p:100}
  to{--p:0}
}

@keyframes p2 {
  from{--p:0}
  to{--p:100}
}