about.css

/* -- ---- -- ---- -- ---- -- FONTS -- ---- -- ---- -- ---- -- */

@font-face {
  font-family: tiny;
  src: url("Assets/Fonts/TINY5x3-160.woff2");
}

@font-face {
  font-family: whyte;
  src: url("Assets/Fonts/Whyte\ Regular\ Italic.otf");
  font-weight: italic;
}

@font-face {
  font-family: whyte;
  src: url("Assets/Fonts/ABCWhyte-Regular.woff2");
  font-weight: normal;
}

@font-face {
  font-family: whyte-bold;
  src: url("Assets/Fonts/ABCWhyteInktrap-Bold.woff2");
  font-weight: bold;
}

html,
body {
  margin: 0;
  padding: 0;
  overscroll-behavior: none;
  background-color: #ffffff;
}

::selection {
  background-color: #00c844;
  color: #ffffff;
}

/* -- ---- -- ---- -- ---- -- NAVBAR -- ---- -- ---- -- ---- -- */

#navbar {
  height: 100vh;
  width: 3vw;
  position: fixed;
  background-color: #00c844;
  left: 0vw;
  opacity: 1;
  top: 0vh;
  z-index: 10;
}

#titolo {
  font-family: tiny;
  color: #ffffff;
  -webkit-text-stroke: #3e3e3e 0.08vw;
  font-size: 3vw;
  position: absolute;
  transform-origin: top left;
  width: 40vh;
  rotate: 270deg;
  left: 0.45vw;
  height: 2vw;
  bottom: -2vh;
  text-decoration: none;
  opacity: 1;
}

@media (max-height: 900px) {
  #titolo {
    font-family: tiny;
    color: #ffffff;
    -webkit-text-stroke: #3e3e3e 0.08vw;
    font-size: 2vw;
    position: absolute;
    transform-origin: top left;
    width: 40vh;
    rotate: 270deg;
    left: 0.45vw;
    height: 2vw;
    bottom: -2vh;
    text-decoration: none;
  }
}

.bottoncini {
  font-family: whyte;
  position: absolute;
  font-weight: normal;
  color: #3e3e3e;
  font-size: 1.7vw;
  transform-origin: top left;
  left: 0.4vw;
  rotate: 270deg;
  text-decoration: none;
  transition-duration: 0.2s;
  opacity: 1;
}

#intro {
  top: 25vw;
  transition-duration: 0.2s;
  cursor: pointer;
}

#intro:hover {
  color: #ffffff;
}

#about {
  top: 8vw;
  transition-duration: 0.2s;
  cursor: pointer;
}

#about:hover {
  color: #ffffff;
}

#archive {
  top: 17.6vw;
  transition-duration: 0.2s;
  cursor: pointer;
}

#archive:hover {
  color: #ffffff;
}

/* -- ---- -- ---- -- ---- -- ABOUT -- ---- -- ---- -- ---- -- */

.long-title {
  font-family: whyte;
  font-size: 3.6vw;
  line-height: 3.7vw;
  text-transform: uppercase;
  color: #00c844;
  position: relative;
}

.paragraph {
  font-family: whyte;
  font-size: 1.6vw;
  font-weight: lighter;
  line-height: 1.7vw;
  color: #3e3e3e;
  left: 25vw;
  right: 4vw;
  top: 23vw;
  position: absolute;
}

.paragraph2 {
  font-family: whyte;
  font-size: 1.6vw;
  font-weight: lighter;
  line-height: 1.7vw;
  color: #3e3e3e;
  left: 30vw;
  right: 4vw;
  margin-top: 0vw;
  position: absolute;
}

.paragraph3 {
  font-family: whyte;
  font-size: 1.6vw;
  font-weight: lighter;
  line-height: 1.7vw;
  color: #3e3e3e;
  left: 30vw;
  right: 4vw;
  margin-top: -1.7vw;
  position: absolute;
}

.paragraph4 {
  font-family: whyte;
  font-size: 1.6vw;
  font-weight: lighter;
  line-height: 1.7vw;
  color: #3e3e3e;
  left: 30vw;
  right: 4vw;
  margin-top: 27vw;
  position: absolute;
}

.data-p {
  font-family: whyte;
  font-size: 3.7vw;
  color: #00c844;
  position: absolute;
  left: 5vw;
  right: 3vw;
}

.sticky {
  position: fixed;
  top: 0;
  left: 5.55vw;
  height: 5.5vw;
  background-color: #ffffff;
  z-index: 10;
}

.line {
  height: 0.3vh;
  margin-top: 0vw;
  margin-left: -3vw;
  margin-right: 0vw;
  border-width: 0;
  background-color: #00c844;
  width: 97vw;
}

.line2 {
  position: relative;
  margin-top: 0vw;
  margin-left: -3vw;
  margin-right: 0vw;
  border-width: 0;
  background-color: #00c844;
  width: 97vw;
}

/* -- ---- -- ---- -- ---- -- TABELLE -- ---- -- ---- -- ---- -- */

.tabella {
  height: 50vw;
  width: 60vw;
  margin-top: 5vw;
  margin-left: 29vw;
}

/* -- ---- -- ---- -- ---- -- LINK -- ---- -- ---- -- ---- -- */

.click_link {
  color: #00c844;
  background-color: transparent;
  text-decoration: none;
}

.click_link:visited {
  color: #00c844;
  background-color: transparent;
  text-decoration: none;
}

.click_link:hover {
  color: #00c844;
  background-color: transparent;
  text-decoration: underline;
}

/* -- ---- -- ---- -- ---- -- OUTPUT -- ---- -- ---- -- ---- -- */

.output-p {
  font-family: whyte;
  font-size: 3.7vw;
  color: #00c844;
  top: 2vw;
  position: absolute;
  left: 5vw;
  right: 3vw;
  height: 5.5vw;
  background-color: #ffffff;
}

.line_o {
  height: 0.3vh;
  margin-top: 0vw;
  margin-left: -3vw;
  margin-right: 0vw;
  border-width: 0;
  background-color: #00c844;
  width: 97vw;
  position: relative;
}

.stick {
  top: 15vw;
  position: relative;
}

.stick2 {
  position: fixed;
  top: 0;
  height: 5.5vw;
  background-color: #ffffff;
  margin-left: 0.55vw;
  z-index: 5;
}

.images::after {
  content: "";
  clear: both;
  display: table;
}

.col {
  float: left;
  width: 16.66%;
  padding-top: 2vw;
  padding-bottom: 2vw;
}

.team-p {
  font-family: whyte;
  font-size: 3.7vw;
  color: #00c844;
  margin-top: 80vw;
  position: relative;
  left: 5vw;
  right: 3vw;
  height: 5.5vw;
  background-color: #ffffff;
}

.line_t {
  height: 0.3vh;
  margin-top: 0vw;
  margin-left: -3.3vw;
  margin-right: 0vw;
  border-width: 0;
  background-color: #00c844;
  width: 97.5vw;
}

.team {
  top: 0vw;
  position: relative;
}

.stick3 {
  position: sticky;
  top: 0;
  margin-left: 0vw;
}

.col_t {
  float: left;
  width: 25%;
  padding-top: 2vw;
  padding-bottom: 2vw;
}

/* -- ---- -- ---- -- ---- -- TEAM -- ---- -- ---- -- ---- -- */

.giulio {
  width: 16vw;
  height: 19vw;
  background: url("Assets/img_about/giulio.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.andrea {
  width: 16vw;
  height: 19vw;
  background: url("Assets/img_about/andre.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.alex {
  width: 16vw;
  height: 19vw;
  background: url("Assets/img_about/alex.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.greta {
  width: 16vw;
  height: 19vw;
  background: url("Assets/img_about/gre.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.miguel {
  width: 16vw;
  height: 19vw;
  background: url("Assets/img_about/miguel.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.alessia {
  width: 16vw;
  height: 19vw;
  background: url("Assets/img_about/ale.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.ana {
  width: 16vw;
  height: 19vw;
  background: url("Assets/img_about/ana.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/*______________________________________________________footer*/

footer {
  font-family: whyte;
  color: #ffffff;
  padding: 3rem 6rem 2rem 6rem;
  grid-column: 1 / span 12;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 1rem;
  font-size: 1rem;
  background-color: #00c844;
  margin-bottom: -10vw;
  margin-right: -1vw;
}

footer * {
  grid-column: span 2;
}

#contacts,
#assistants {
  grid-column: span 4;
}

.logo {
  display: grid;
  grid-template-columns: repeat(2, 65px);
  column-gap: 0.5rem;
}

.logo * {
  grid-column: span 1;
  margin-bottom: 2rem;
}

.icon {
  vertical-align: bottom;
  padding-bottom: 0.6rem;
}

footer img {
  height: 50px;
  width: auto;
}

footer svg {
  color: #ffffff;
}

footer h1 {
  font-family: whyte-bold;
  margin: 0 0 1rem 0;
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: bold;
}

footer a {
  text-decoration: none;
  font-family: whyte;
  font-weight: 400;
  color: #ffffff;
}

footer a:hover {
  text-decoration: underline;
  color: #3e3e3e;
}

footer a:hover svg {
  color: #3e3e3e;
}

footer ul {
  padding: 0;
}

footer li {
  list-style: none;
  margin: 0;
  line-height: 1.3;
}

#contacts p {
  margin-bottom: 2rem;
}

#contacts li {
  margin-bottom: 1rem;
}

#social svg {
  margin-right: 1rem;
}

/* -- ---- -- ---- -- ---- -- TRIANGLES -- ---- -- ---- -- ---- -- */

.sxtr {
  border-top: 0.5vw solid transparent;
  border-bottom: 0.5vw solid transparent;

  border-left: 0.5vw solid #00c844;
  position: relative;
}

.dxtr {
  border-top: 0.5vw solid transparent;
  border-bottom: 0.5vw solid transparent;

  border-right: 0.5vw solid #00c844;
  margin-top: -1vw;
  position: relative;
}