:root {
  --purple-old: #840df2;
  --purple: #4C00B5;
  --gray: rgba(51, 51, 51, 1);
}
@font-face {
  font-family: "migra";
  src: url("fonts/migraitalic.woff2") format("woff2"),
    url("fonts/migraitalic.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "telegraf";
  src: url("fonts/telegraf.woff2") format("woff2"),
    url("fonts/telegraf.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
  font-display: swap;
}
* {
  box-sizing: border-box;
}
.invisible{
  display: none;
}
.desc {
  top: 1vh;
  position: fixed;
  width: 30vw;
  height: 90vh;
  font-family: "telegraf", sans-serif;
  font-size: 45px;
  font-weight: 400;
  color: var(--gray);
  margin-left: 1vw;
}
.cv {
  display: block;
  width: 500px;
  height: 300px;
  font-family: "telegraf", sans-serif;
  font-size: 25px;
  font-weight: 400;
  color: var(--gray);
  margin-left: 1vw;
  position: fixed;
  background-color: #fff;
  right: 0;
  padding-left: 25px;
  padding-top: 10px;
  border-radius: 25px;
  border: solid var(--purple) 1px;
  transition: 0.5s ease;
}
.cv h2:hover{
  color: var(--purple);
}
.cv.down:hover{
  bottom: -212px;
}
.down{
bottom: -220px;
}
.up{
  bottom: -80px;
}
ul, li, h2{
  list-style: none;
  padding: 0;
  margin: 0;
}


.expl {
  padding: 1vw;
}
span {
  color: var(--gray);
  font-family: "migra";
}
span:hover {
  color: var(--purple);
  font-family: "migra";
}
p::-moz-selection {
  color: transparent;
}
p::selection {
  color: transparent;
}

.zoomed {
  position: absolute;
  width: 15vw;
  height: 15vw;
  cursor: move;
  overflow: hidden;
  box-shadow: 1vw 1vw 2vw var(--purple);
  background-color: black;
  color: white;
  border: solid var(--purple) 1px;
  border-radius: 50%;
}

.inner {
  height: 40vw;
  width: 40vw;
  overflow: scroll;
}

.item_image img {
  width: 100%;
  height: auto;
}

.title,
.inner {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -user-select: none;
}

.zoomed.draggable {
  z-index: 10;
}

.zoomed .inner {
  padding: 0;
  font-weight: 300;
  font-size: 15px;
  overflow: auto;
  font-family: "telegraf", sans-serif;
}

.zoomed.large {
  width: 40vw;
  height: 40vw;
  border-radius: 8%;
}

img.extra {
  position: absolute;
  /*top: 0;
	left: 2px;*/
  width: 40vw;
  height: auto;
  z-index: 100;
  padding: 10px;
  margin: 10px;
}

.zoomed.large .inner {
  font-weight: 300;
  font-size: 25px;
  padding: 0vw;
  border: none;
}

.zoomed img {
  pointer-events: none;
  height: auto;
}

a:hover{
  color:var(--purple);
  transform: scale(99%);
}
a:visited{
  color: inherit;
}
p a {
color: white;
}
li a {
  color:var(--gray);
  text-decoration: none;
  }
.inner::-webkit-scrollbar {
  width: 10px;
}

.inner::-webkit-scrollbar-track {
  background: #000;
}

.inner::-webkit-scrollbar-thumb {
  background:#f1f1f1;
}
body::-webkit-scrollbar {
  width: 10px;
}

body::-webkit-scrollbar-track {
  background: #fff;
}

body::-webkit-scrollbar-thumb {
  background:#f2f2f2;
}

@media screen and (max-width: 1300px) {
  .desc {
    width: 40vw;
  }
  .zoomed.large {
    width: 60vw;
    height: 60vw;
  }
  .inner {
    width: 60vw;
    height: 60vw;
  }
  img.extra {
    width: 60vw;
    height: 60vw;
  }
  .zoomed {
    width: 20vw;
    height: 20vw;
  }
}
@media screen and (max-width: 980px) {
  .desc {
    width: 60vw;
  }
  .zoomed.large {
    width: 60vw;
    height: 60vw;
  }

  .inner {
    width: 60vw;
    height: 60vw;
  }
  img.extra {
    width: 60vw;
    height: 60vw;
  }
  .zoomed {
    width: 25vw;
    height: 25vw;
  }
}
@media screen and (max-width: 750px) {
  body{
    overflow-x: hidden;
    overflow-y: scroll;
  }
  .desc {
    width: 90vw;
  }
  .zoomed.large {
    width: 80vw;
    height: 80vw;
  }
  .inner {
    width: 80vw;
    height: 80vw;
  }
  img.extra {
    width: 80vw;
    height: 80vw;
  }
  .zoomed {
    width: 35vw;
    height: 35vw;
  }
}
@media screen and (max-width: 550px) {
.desc{
  width: 100vw;
  font-size: 40px;
}
}