/* Define variables  */
@property --p {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

:root {
  --desktop-w: 400px;
  --desktop-space: 60px;

  --initial-w: 300px;
  --space: 50px
}

.k1 { --w: calc(var(--initial-w) - var(--space)); }
.k2 { --w: calc(var(--initial-w) - (var(--space) * 2)); }
.k3 { --w: calc(var(--initial-w) - (var(--space) * 3)); }
.k4 { --w: calc(var(--initial-w) - (var(--space) * 4)); }

#frontEnd .k1 { --c: #a3ffa3; --p:98; }
#frontEnd .k2 { --c: #19de19; --p:96; }
#frontEnd .k3 { --c: #0a8d0a; --p:89; }
#frontEnd .k4 { --c: #025c02; --p:84; }
#backEnd .k1 { --c: #F1959B; --p:94; }
#backEnd .k2 { --c: #eb5f5a; --p:96; }
#backEnd .k3 { --c: #c72721; --p:92; }
#backEnd .k4 { --c: #8f0600; --p:90; }
#devOps .k1 { --c: #fff19a; --p:85; }
#devOps .k2 { --c: #ffe65c; --p:80; }
#devOps .k3 { --c: #cbad1c; --p:77; }
#devOps .k4 { --c: #8d750a; --p:83; }
#misc .k1 { --c: #9dd1ff; --p:98; }
#misc .k2 { --c: #53afff; --p:46; }
#misc .k3 { --c: #206db1; --p:70; }
#misc .k4 { --c: #00305a; --p:90; }

#frontEnd .kl1 { background-color: #a3ffa3; }
#frontEnd .kl2 { background-color: #19de19; }
#frontEnd .kl3 { background-color: #0a8d0a; }
#frontEnd .kl4 { background-color: #025c02; }
#backEnd .kl1 { background-color: #F1959B; }
#backEnd .kl2 { background-color: #eb5f5a; }
#backEnd .kl3 { background-color: #c72721; }
#backEnd .kl4 { background-color: #8f0600; }
#devOps .kl1 { background-color: #fff19a; }
#devOps .kl2 { background-color: #ffe65c; }
#devOps .kl3 { background-color: #cbad1c; }
#devOps .kl4 { background-color: #8d750a; }
#misc .kl1 { background-color: #9dd1ff; }
#misc .kl2 { background-color: #53afff; }
#misc .kl3 { background-color: #206db1; }
#misc .kl4 { background-color: #00305a; }

/* End variables */

#cv-transition {
  background: rgb(25,0,168);
  background: -moz-linear-gradient(90deg, rgba(25,0,168,1) 0%, rgba(17,17,17,1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(25,0,168,1) 0%, rgba(17,17,17,1) 100%);
  background: linear-gradient(90deg, rgba(25,0,168,1) 0%, rgba(17,17,17,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1900a8",endColorstr="#111111",GradientType=1);
}

.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 30px;
  width: calc(100vw - 60px);
  height: calc(100vh - 60px);
  overflow: auto;
  background-color: #111;
  color: #FFF;
  min-width: calc(100vw - 60px);
  position: relative;
}

#cv-thanku {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #111;
  transition: opacity 0.8s;
  top: 0;
  left: 0;
  z-index: 1;
}

#cv-thanku h1 {
  color: #FFF;
  font-size: 3rem;
  opacity: 0;
  transition: opacity 0.8s;
  z-index: 2;
}

#cv-image {
  border-radius: 50%;
  max-width: 400px;
  min-width: 300px;
  width: 80vw;
  object-fit: contain;
}

#cv-name {
  margin-top: 20px;
  font-size: 2.7rem;
  text-align: center;
}

#cv-description {
  margin-top: 3px;
  font-style: italic;
  font-size: 0.9rem;
  text-align: center;
}

#knowsPack {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin-top: 30px;
}

.knowCard {
  width: var(--initial-w);
  max-width: var(--initial-w);
  min-width: var(--initial-w);
  background-color: #151515;
  padding: 5px 0;
  margin: 20px 20px 10px 20px;
  border-radius: 15px;
}

.graphs {
  display: block;
  position: relative;
  width: var(--initial-w);
  height: var(--initial-w);
  max-width: var(--initial-w);
  min-width: var(--initial-w);
}

.graphsInner {
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.graph {
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
}

.pie {
  --b:20px;
  width:var(--w);
  aspect-ratio:1;
  position:relative;
  display:inline-grid;
  margin:5px;
  place-content:center;
  font-size:25px;
  font-weight:bold;
  font-family:sans-serif;
  animation:p 1s .5s both;
}

.pie:before, .pie:after {
  content:"";
  position:absolute;
  border-radius:50%;
}

.pie: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)));
}

.pie:after {
  inset:calc(50% - var(--b)/2);
  background:var(--c);
  transform:rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
}

.knowName {
  text-align: center;
  font-size: 1.4rem;
  margin-top: 10px;
}

.knownLegends {
  padding: 20px;
}

.knownLegend {
  display: flex;
  align-items: center;
  font-size: 1rem;
}

.knownLegend span {
  margin-left: 10px;
}

.kl-dot {
  height: 10px;
  width: 10px;
  border-radius: 50%;
}

@keyframes p {
  from {--p:0}
}

@media only screen and (min-width: 1024px) {
  .page::-webkit-scrollbar {
    width: 12px;
  }
  
  .page::-webkit-scrollbar-track {
    background: #FFF1;
  }
  
  .page::-webkit-scrollbar-thumb {
    background-color: #FFF4;
    border-radius: 20px;
    border: 3px solid #FFF1;
  }
}

@media only screen and (min-width: 1035px) {
  .knowCard {
    width: var(--desktop-w);
    max-width: var(--desktop-w);
    min-width: var(--desktop-w);
  }
  
  .graphs {
    width: var(--desktop-w);
    height: var(--desktop-w);
    max-width: var(--desktop-w);
    min-width: var(--desktop-w);
  }

  .knowName {
    font-size: 2rem;
  }

  .kl-dot {
    width: 15px;
    height: 15px;
  }

  .knownLegend {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    margin: 10px auto;
  }

  .k1 {--w: calc(var(--desktop-w) - (var(--desktop-space))); }
  .k2 {--w: calc(var(--desktop-w) - (var(--desktop-space) * 2)); }
  .k3 {--w: calc(var(--desktop-w) - (var(--desktop-space) * 3)); }
  .k4 {--w: calc(var(--desktop-w) - (var(--desktop-space) * 4)); }
  .pie { --b: 25px; }
}

#contact {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 50px;
}

#contact-title {
  text-align: center;
  margin-bottom: 30px;
  width: 100%;
}

.btnMeet {
  border-radius: 20px 50%;
  max-width: 250px;
  max-height: 250px;
  min-width: 250px;
  min-height: 250px;
  cursor: pointer;
  transition: background-color 0.4s;
  color: #DDD;
  border: none;
  font-size: 7rem;
  margin: 15px 20px;
}

#github-contact { background-color: #333; }
#github-contact:hover { background-color: #222 ;}
#linkedin-contact { background-color: #0077B5;}
#linkedin-contact:hover { background-color: #1aa1ea}