/*General settings*/

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  cursor: none;
  height: fit-content;
}

p {
  margin: 0px;
  padding: 0px;
}

h1 {
  margin: 0px;
  padding: 0px;
}

a {
  cursor: none;
}

/*Loading Screen*/

.loadingscreen {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
	justify-content: center;
	align-items: center;
  flex-direction: column;
  z-index: 2;
  background: #111111
  url("loading.gif")
  no-repeat center center;
  background-size: 10%;
}

.loading-text-up {
  margin-bottom: 50px;
  font-size: 20px;
  color: white;
  animation-name: glow;
  animation-iteration-count: infinite;
  animation-duration: 2s;
  animation-direction: alternate;
}

.loading-text-down {
  margin-top: 50px;
  font-size: 20px;
  color: white;
  animation-name: glow;
  animation-iteration-count: infinite;
  animation-duration: 2s;
  animation-direction: alternate;
}

@keyframes glow {
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0.01;
  }
}

/*Cursor propreties*/

.cursor {
  width: 30px;
  height: 30px;
  background-color: white;
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: difference;
  box-shadow: 0px 0px 1000px 1px #fff;
}

.cursor-blink {
  animation-name: blink;
  animation-iteration-count: infinite;
  animation-duration: 0.7s;
  animation-direction: alternate;
}

@keyframes blink {
  50%{
    opacity: 1;
  }
  100%{
    opacity: 0.1;
  }
}

/*Appearing animations*/

.hidden {
  opacity: 0;
  filter: blur(5px);
  transform: translateX(-20%);
  transition: all 2s;
}

.show {
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
}

/* <uniquifier>: Use a uniquifier for the class name
<weight>: Use a value from 100 to 900
<width>: Use a value from 62.5 to 100*/

.noto-sans-normal {
  font-family: "Noto Sans", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.noto-sans-thin {
  font-family: "Noto Sans", sans-serif;
  font-weight: 200;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.noto-sans-bold {
  font-family: "Noto Sans", sans-serif;
  font-weight: 900;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

/*Page elements*/

.top-bar {
  background-color: white;
  border-radius: 10px;
  position: fixed;
  margin: 3%;
  margin-top: 1.5%;
  display: flex;
  align-items: center;
  width: 94%;
  z-index: 1;
  box-shadow: 0px 0px 100px 1px #c0c0c0;
}

.top-bar-element {
  padding: 12px;
  padding-left: 30px;
  padding-right: -5px;
  font-size: 10.5pt;
}

.top-bar-element-right1 {
  padding: 12px;
  margin-left: auto;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 10.5pt;
  text-decoration: none;
  color: black;
}

.top-bar-element-right {
  padding: 12px;
  padding-left: 0px;
  padding-right: 20px;
  font-size: 10.5pt;
  text-decoration: none;
  color: black;
}

.main-video {
  position: fixed;
  margin: 0px;
  padding: 0px;
  z-index: -1;
}

.about-me-spacer{
  height: 50vw;
  width: 1px;
}

.about-me-section {
  width: 100%;
  border-radius: 10px;
  background-color: white;
  color: black;
  padding-top: 30px;
  padding-bottom: 50px;
  display: flex;
  margin: 0;
}

.about-me-title {
  margin-top: 100px;
  margin-left: 80px;
  padding-right: 20px;
  padding-left: 10px;
  margin-right: auto;
  margin-bottom: auto;
  font-size: 50px;
}

.about-me-caption {
  margin: 100px;
  margin-right: 150px;
  font-size: 20px;
}

.progetti-section {
  width: 100%;
  background-color: black;
  color: white;
  margin-top: -10px;
  padding-top: 50px;
  padding-bottom: 20px;
  pointer-events: auto;
}

.progetti-title {
  margin-top: 50px;
  margin-left: 80px;
  padding-bottom: 50px;
  padding-right: 20px;
  padding-left: 10px;
  margin-right: auto;
  margin-bottom: auto;
  font-size: 50px;
}

.gallery1 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5%;
  margin-bottom: 0;
  margin-top: 0;
}

.gallery2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 5%;
  margin-top: 0;
  margin-bottom: 0;
}

.gallery-video1 {
  width: 30%;
  height: auto;
}

.gallery-video2 {
  width: 90%;
  height: auto;
}

.smooth-scroll-wrapper {
  background: transparent;
  pointer-events: none;
}