styles.scss

/*-- scss:defaults --*/

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
// Sass Variables
// https://quarto.org/docs/output-formats/html-themes.html#sass-variables

/* Colors */
$body-bg: #FFFFFF;
$body-color: rgb(55, 58, 60);
$link-color: rgb(39, 128, 227);
$color-authors: rgb(221, 110, 85);

/* Fonts */
$font-family-sans-serif: "Source Sans Pro", -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$font-size-root: 17px;

.author_publication {
  color: $color-authors; 
  font-weight: bold;
}

.report_issue {
  display: block;
  color: black;
  font-size: 12px;
  width: fit-content;
  background-color: #f6f6f6;
  border-style: solid;
  border-color: black;
  border-radius: 3px;
  border-width: 1px;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 0px;
  padding-bottom: 0px;
  text-decoration: none;
}

.documentation_website {
  display: block;
  color: black;
  font-size: 12px;
  width: fit-content;
  background-color: #b3d9cf;
  border-style: solid;
  border-color: #1f816a;
  border-radius: 3px;
  border-width: 1px;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 0px;
  padding-bottom: 0px;
  text-decoration: none;
}

.hexsticker {
  width: 100%;
}

.parent {
  display: inline;
  height: fit-content;
  position: relative;
}

.div1 { 
  display: inline-block;
  width: 200px;
  padding: 10px;
  margin: auto;
  position: absolute;
}

.div2 { 
  display: inline-block;
  padding: 10px;
  position: relative;
  left: 200px;
}

.div3 {
  display: block;
  padding: 3px;
}

.image_title {
  width: 40%;
  display: inline-block;
  margin-left: 4.5%;
  margin-right: 4.5%;
}

.images_container{
  position: absolute; 
  top: 400px;
  left: 40%;
  width: 20%;
}

.hex_title {
  position: absolute;
  color: white;
  display: inline-flex;
  text-decoration: none;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  width: 126px;
  height: 120px;
  transition: transform 1s ease;
  text-align: center;
  font-weight: bold;
  font-family: "Gill Sans", sans-serif;
  font-size: 18px;
  justify-content: center;
  align-items: center;
  line-height: 1.3;
}
.hex_title:hover {
  transform: scale(1.4);
}
.pack_title {
  margin-left: 237px;
  top: 140px;
  background-color: #fe005d;
}
.team_title {
  margin-left: 522px;
  top: 244px;
  background-color: #4d9ee9;
}
.publ_title {
  margin-left: 413px;
  top: 411px;
  background-color: #d3e667;
}
.goal_title {
  margin-left: 60px;
  top: 411px;
  background-color: #b4dbe3;
}
.join_title {
  margin-left: -48px;
  top: 244px;
  background-color: #e7dc0f;
}

.profile_icon {
  position: relative;
  font-size: 30px;
  margin-right: 20px;
  top: -10px;
  color: black;
}

.title_oxinfer {
  text-align: center;
  position: absolute;
  top: 200px;
  left: 50%;
  width: 600px;
  margin-left: -300px;
  display: inline-flex;
  color: black;
  font-size: 60px;
  justify-content: center;
  align-items: center;
}

.subtitle_oxinfer {
  text-align: center;
  position: absolute;
  top: 300px;
  left: 50%;
  width: 600px;
  margin-left: -300px;
  display: inline-flex;
  color: black;
  font-size: 20px;
  justify-content: center;
  align-items: center;
}