* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  overflow: hidden;
  /*    max-height: 100%;*/
}

html,
body {
  width: 100%;
}

body {
  /*    overflow: hidden;*/
  /*    height: 100vh;*/
  min-height: 100vh;
  display: flex;
  align-items: center;
  font-family: sans-serif;
  --w: 2px; /* Thiclness of the line */
  --n: 500; /* number of lines */
  overflow-y: hidden;
}

#wholeWindow {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.window {
  width: 100%;
  height: 100vh;
  position: relative;
  margin: 0 auto;
  background-color: white;
  overflow: hidden;
}

.line {
  border: solid 0.5px black;
}

.line-r {
  border-left: none;
  border-right: solid 0.5px black;
  border-bottom: solid 0.5px black;
  border-top: none;
}

.vir,
.hor,
.address,
.feed-title,
.feed-descr,
.feed-profile,
.logo,
.close,
.move,
#title {
  position: absolute;
}

/* .column = section*/
.column {
  display: flex;
  flex-direction: column;
  height: 90vh;
  position: relative;
  top: 10vh;
  border-right: 2px solid black;
}

.column1,
.column3 {
  width: 25%;
}

.column2 {
  width: 50%;
}

.column3 {
  border-left: solid 1px black;
  justify-content: space-between;
}

/* Column3 */
.adv {
  position: relative;
  font-family: sans-serif;
  font-size: 1rem;
  line-height: 1.35;
}

.adv1 {
  overflow-y: auto;
  overflow-x: hidden;
  background-color: white;
  padding: 0.5rem 0.75rem;
  border-color: black;
  border-width: 12px 10px 12px 10px;
  border-top-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-right-style: solid;
}

.adv1 p {
  font-size: 1.15rem;
  line-height: 1.5;
}

.adv2 {
  width: 90%;
  margin: 0 auto;
  /* border: 1.5px dashed black; */
}

.adv2 img {
  width: 100%;
  border: 1.5px dashed black;
}

.ad-big-phrase {
  font-size: 8rem;
  text-align: center;
  margin-top: 0.65rem;
}

#ad-phrase {
  font-family: "Futura-Heavy";
  font-size: 2rem;
  /* position: absolute; */
  z-index: 1000;

  display: inline-block;
  text-align: center;
  background-color: white;
}

/* Column1 */
#scrolling-aside {
  position: relative;
  top: 0;
  width: 100%;
  width: 80%;
  height: 20%;
  display: flex;
  flex-direction: row;
}

.scroll {
  position: absolute;
  background: black;
  width: 10%;
}

.scroll1 {
  left: 0%;
  height: 10%;
  top: 90%;
}
.scroll2 {
  left: 10%;
  height: 20%;
  top: 80%;
}

.scroll3 {
  left: 20%;
  height: 30%;
  top: 70%;
}

.scroll4 {
  left: 30%;
  height: 40%;
  top: 60%;
}
.scroll5 {
  left: 40%;
  height: 50%;
  top: 50%;
}

.scroll6 {
  left: 50%;
  height: 60%;
  top: 40%;
}

.scroll7 {
  left: 60%;
  height: 70%;
  top: 30%;
}

.scroll8 {
  left: 70%;
  height: 80%;
  top: 20%;
}

.scroll9 {
  left: 80%;
  height: 90%;
  top: 10%;
}

.scroll10 {
  left: 90%;
  height: 100%;
  top: 0%;
}

.logo {
  border: none !important;
  top: 20%;
  left: 19.5%;
  width: 3.5%;
  height: 6%;
  background-color: white;
  z-index: 2;
  display: flex;
  justify-content: center;
}

.logo #up {
  display: inline-block;
  font-size: 5rem;
  margin-top: 1%;
}

.prof-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-content: flex-start;
  /*    background-color: blue;*/
  position: relative;
  width: 80%;
  height: 40%;
  left: 0%;
  border-bottom: 1px solid black !important;
}

.profile {
  border-radius: 50%;
  /*    top:6.5%;*/
  /*    left:6%;*/
  width: 200px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 4.5%;
}

.main-headd,
.main-bodyy {
  background-color: lightgrey;
  position: relative;
}

.main-headd {
  width: 75px;
  height: 75px;
  border-radius: 50%;
}

.main-bodyy {
  width: 140px;
  height: 50px;
  border-radius: 50% / 100%;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/*CSS drawing semi-oval*/
/*from: https://stackoverflow.com/questions/17595147/semi-oval-with-css*/
/*User André Dion's tip*/

#prof-text {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  top: 10%;
}

.title,
.descr {
  width: 65%;
  margin-bottom: 2.5%;
  justify-content: center;
}

.title,
.descr,
.exp {
  display: flex;
  align-items: center;
  font-size: 1.15rem;
}

.title p,
.descr p,
.exp p {
  padding: 0.35rem 0.5rem;
  padding: 0.35rem 0.75rem;
  text-align: center;
}

.exp p {
  line-height: 1.2;
  /*    text-align: center;*/
}

.exp {
  width: 80%;
  justify-content: center;
}

.ad-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 80%;
  height: 40%;
  left: 0%;
  background-color: white; /* For browsers that do not support gradients */
  background-image: repeating-conic-gradient(
    black 0deg 1.5deg,
    white 1.5deg 3deg
  );
}

#promo-text,
#promo-text2,
#promo-text3,
#promo-text4,
#promo-text5,
#explode {
  position: relative;
  border-radius: 50%;
  border: 1px solid black;
  padding: 2.5rem 3rem;
  background-color: white;
  text-align: center;
  z-index: 9999 !important;
}

#promo-text {
  padding: 2.5rem 3rem;
}

#explode {
  padding: 8.5rem 18rem;
}
/*
#expand2{
    padding: 4.5rem 5rem;
}
*/
#expand2 p {
  font-size: 2rem;
}
#expand3 p {
  font-size: 2.4rem;
}
#expand4 p {
  font-size: 2.8rem;
}
#expand5 p {
  font-size: 3.2rem;
}
#explode p {
  font-size: 3.6rem;
}

#expand,
#expand2,
#expand3,
#expand4,
#expand5,
#expand6 {
  background-color: transparent;
  border: none;
  cursor: pointer;
}

#promo-text2,
#promo-text3,
#promo-text4,
#promo-text5,
#explode {
  display: none;
  text-decoration: underline dotted;
}

#expand2 {
  font-size: 1.8rem;
  line-height: 1.6;
}
#expand3 {
  font-size: 2rem;
  line-height: 1.6;
}
#expand4 {
  font-size: 2.4rem;
  line-height: 1.6;
}

#expand5 {
  font-size: 2.8rem;
  line-height: 1.6;
}

.ad-box p {
  /*    font-size: 1.4rem;*/
  line-height: 1.6;
  text-decoration: underline dotted;
}

#career-ladder {
  position: absolute;
  top: 0;
  left: 80%;
  width: 20%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  text-align: center;
}

#banner {
  background-color: white;
  width: 100%;
  height: 20%;
  display: flex;
  align-items: center;
  border-bottom: 0.5px solid black;
  z-index: 1000; /*added bc of the scroll offsetTop JS function*/
}
#up {
  font-size: 7.75rem;
  font-family: "Uchrony Arrows Regular";
  position: relative;
  left: 1.5%;
}
#title {
  font-family: "Basalte-Fond";
  font-family: "Futura-Heavy";
  font-size: 7rem;
  line-height: 0;
  margin-top: -1.5%;
  margin-left: 10.5%;
}

#highway {
  font-family: "InstrumentSerif-Regular";
  font-size: 7rem;
  position: relative;
  left: 4%;
}

#up,
#highway {
  display: inline-block;
}

#subtitle {
  font-family: "Futura-Book";
  position: absolute;
  font-size: 2.6rem;
  position: absolute;
  left: 27%;
  margin-top: 3%;
}

.deco-tempting {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* cursor: pointer; */
  z-index: 9999 !important;
}

.triangle {
  position: absolute;
  background-color: lightgrey;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  transform-origin: center 66.6%;
  left: 5.7%;
  top: 0;
  width: 92.6%;
  height: 75%;
}

#tempt {
  width: 14vh;
  height: 14vh;
  left: 82%;
}

#tempt span {
  position: absolute;
  font-family: "Futura";
  text-align: center;
  font-size: 1rem;
  line-height: 1.3;
  /* text-decoration: underline dotted; */
}

.triangle:nth-child(2) {
  transform: rotate(10deg);
}
.triangle:nth-child(3) {
  transform: rotate(20deg);
}
.triangle:nth-child(4) {
  transform: rotate(30deg);
}
.triangle:nth-child(5) {
  transform: rotate(40deg);
}
.triangle:nth-child(6) {
  transform: rotate(50deg);
}
.triangle:nth-child(7) {
  transform: rotate(60deg);
}
.triangle:nth-child(8) {
  transform: rotate(70deg);
}
.triangle:nth-child(9) {
  transform: rotate(80deg);
}
.triangle:nth-child(10) {
  transform: rotate(90deg);
}
.triangle:nth-child(11) {
  transform: rotate(100deg);
}
.triangle:nth-child(12) {
  transform: rotate(110deg);
}

/*
CSS Drawing zig-zag edged circle
https://stackoverflow.com/questions/51697207/zig-zag-border-for-a-circle
A tip from user 'Salman Arshad'

*/

.tabs2 {
  position: absolute;
  height: 5%;
  width: 100%;
  left: 0;
  top: 5%;
  border-bottom: none;
  border-bottom: 0.5px solid black;
  /*    background-color: blue;*/
  display: flex;
  align-items: center;
}
.move {
  /*    top: 5.5%;*/
  left: 1%;
  /*    background-color:red;*/
  width: 100%;
}

.move span {
  font-size: 24px;
}

.move .refresh,
.move .left {
  margin-right: 1.25%;
}

.address {
  width: 80%;
  height: 38px;
  left: 7.945%;
  display: flex;
  align-items: center;
}

#url-add {
  font-size: 1.15rem;
  padding: 0.25% 0.5% 0.25% 0.5%;
}

#url-add p {
  padding: 1.75% 0.5% 0.25% 1.5%;
}
/*CSS draw x shape*/

.close {
  /*    background-color: teal;*/
  background-color: transparent;
  border: none;
  width: 12px;
  height: 12px;
  position: relative;
  left: 55%;
}

.close::after,
.close::before {
  content: "";
  height: 14px;
  border-left: 1px solid #000;
  position: absolute;
  top: 1.75%;
  left: 2.75%;
}

.close1 {
  left: 60%;
}
.close2 {
  left: 46%;
}
.close3 {
  left: 60%;
}
.close4 {
  left: 54%;
}
.close5 {
  left: 58%;
}
.close6 {
  left: 50%;
}
.close7 {
  left: 50%;
}
.close8 {
  left: 64%;
}
.close9 {
  left: 52%;
}

.close10 {
  left: 56%;
}

.close11 {
  left: 56%;
}

.close12 {
  left: 56%;
}
.close::after {
  transform: rotate(45deg);
}

.close::before {
  transform: rotate(-45deg);
}

.tabs {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 5%;
  border-bottom: 0.5px solid black;
  /*    background-color: blue;*/
}
.vir {
  width: 8%;
  height: 100%;
  display: flex;
  align-items: center;
  border-bottom: none;
}
.vir p {
  font-size: 0.95rem;
  padding: 0% 0% 0% 10%;
}

.hor {
  width: 100%;
  height: 0;
}

.vir1 {
  left: 0%;
}

.vir2 {
  left: 8%;
}

.vir3 {
  left: 16%;
}

.vir4 {
  left: 24%;
}

.vir5 {
  left: 32%;
}

.vir6 {
  left: 40%;
}

.vir7 {
  left: 48%;
}

.vir8 {
  left: 56%;
}

.vir9 {
  left: 64%;
}

.vir10 {
  left: 72%;
}

.vir11 {
  left: 80%;
}

.vir12 {
  left: 88%;
}

/*
.hor1{
    top:36px;
    top:5%;
} */
.hor2 {
  top: 10%;
}

#no-border-bottom {
  /*    border-bottom: none;*/
  border: none;
}

/*
.hor3{
    top:220px;
    top: 30.95%;
}

.bannerline{
    width: 24%;
}
*/

.ig-frame {
  visibility: hidden;
  position: absolute;
  width: 75%;
  height: 640px;
  top: 60.7%;
  left: 50.15%;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas:
    ". . ."
    ". . ."
    ". . .";
  /*from a CSS Grid generator*/
  /*https://grid.layoutit.com/*/
}
.ig {
  width: 160px;
  height: 160px;
  margin: 0 auto;
}
/*CSS Checkered pattern from https://gist.github.com/hallojoe/60225de3433f5970b17a12a528b9915f*/
:root {
  /*    font-size:24px;*/
  --backgroundColor: rgba(255, 255, 255);
  --squareColor: rgba(100, 100, 100, 0.3);
  --squareSize: 6px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --backgroundColor: rgb(0, 0, 0) 0.3;
  }
}

.checkered {
  background-color: var(--backgroundColor);
  background-image: linear-gradient(
      45deg,
      var(--squareColor) 25%,
      transparent 25%
    ),
    linear-gradient(135deg, var(--squareColor) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--squareColor) 75%),
    linear-gradient(135deg, transparent 75%, var(--squareColor) 75%);
  background-size: calc(2 * var(--squareSize)) calc(2 * var(--squareSize));
  background-position: 0 0, var(--squareSize) 0,
    var(--squareSize) calc(-1 * var(--squareSize)),
    0 calc(-1 * var(--squareSize));
}

/*CSS Draw Pattern: https://www.w3schools.in/css/examples/stripes-background#:~:text=To%20create%20horizontal%20stripes%2C%20use,will%20result%20in%20horizontal%20stripes.*/

.horizontal-stripes {
  background-image: linear-gradient(to bottom, transparent 50%, #d3d3d3 100%);
  background-size: 100% 2.5px;
}

.vertical-stripes {
  background-image: linear-gradient(to right, transparent 50%, #3f3f3f 100%);
  background-size: 2.5px 2.5px;
}

.feedbox {
  width: 100%;
  top: 10vh;
  height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-color: #a4a4a4 #ebebeb;
  scrollbar-width: thin;
  --w: 1px;
  --w: 1.5px;
  --n: 165;
  background: linear-gradient(90deg, #0000 calc(100% - var(--w)), black 0);
  background-size: calc(
      (100% - var(--n) * var(--w)) / (var(--n) + 1) + var(--w)
    )
    100%;
  z-index: 999;
}

#no-border-left {
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: none;
  z-index: 2;
  border-top: 0.5px solid black;
}

.feed {
  position: relative;
  width: 85%;
  /* height: 15vh;
  margin-bottom: 2.5vh;
  margin-top: 2.5vh; */
  height: 200px;
  margin-bottom: 25px;
  margin-top: 25px;
  z-index: 999;
  background-color: white;
  margin-left: auto;
  margin-right: auto;
}

#feed1 {
  /* margin-top: 5vh; */
  margin-top: 25px;
}

.newfeed {
  border: 3px solid black;
  background-color: rgb(230, 229, 229);
  margin-bottom: 25px;
  margin-top: 25px;
}

.color-back {
  background-color: white;
  border-width: 1px;
}

#loader {
  position: absolute;
  top: 100%;
  left: 50%;
}

#loader img {
  width: 12%;
}

.feed-profile {
  border-radius: 50%;
  top: 17.5%;
  left: 5%;
  width: 100px;
  height: 100px;
  /*    background-color: red;*/
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.headd,
.bodyy {
  background-color: lightgrey;
  position: relative;
}
.headd {
  width: 37px;
  height: 37px;
  border-radius: 50%;
}

.bodyy {
  width: 70px;
  height: 22px;
  border-radius: 50% / 100%;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.feed-title,
.feed-descr {
  display: flex;

  align-items: center;
  left: 20%;
}
.feed-title {
  /*    justify-content: center;*/
  top: 18.5%;
  width: 30%;
  height: 17.5%;
}
.feed-title p {
  text-align: center;
  padding: 0.1rem 0.5rem;
}
.feed-descr p {
  text-align: left;
  padding: 0.35rem 0.5rem;
}

.feed-title p,
.feed-descr p {
  font-size: 0.9rem;
  line-height: 1.35;
}

.feed-descr {
  top: 40.5%;
  width: 57%;
  height: 38.5%;
}

/* aside {
  height: 18.15%;
  top: 10.15%;
  top: 10%;
  left: 0;
  width: 27%;
  overflow-y: hidden;
} */

.cl {
  width: 100%;
  height: 5%;
  background-color: lightgrey;
  border-style: solid;
  border-color: grey;
  border-top-width: 8px;
  border-bottom-width: 1px;
  border-left-width: 8.5px;
  border-right-width: 8.5px;
  position: relative;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 4px 4px 4px #383838;
}

/* A clip-path generator - https://css-generators.com/starburst-shape/ */
#toomuch {
  display: none;
  background-color: black;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
  z-index: 999999 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  clip-path: polygon(
    100% 50%,
    83.81% 53.55%,
    98.91% 60.4%,
    82.34% 60.51%,
    95.68% 70.34%,
    79.44% 67%,
    90.45% 79.39%,
    75.27% 72.75%,
    83.46% 87.16%,
    69.98% 77.51%,
    75% 93.3%,
    63.83% 81.06%,
    65.45% 97.55%,
    57.07% 83.26%,
    55.23% 99.73%,
    50% 84%,
    44.77% 99.73%,
    42.93% 83.26%,
    34.55% 97.55%,
    36.17% 81.06%,
    25% 93.3%,
    30.02% 77.51%,
    16.54% 87.16%,
    24.73% 72.75%,
    9.55% 79.39%,
    20.56% 67%,
    4.32% 70.34%,
    17.66% 60.51%,
    1.09% 60.4%,
    16.19% 53.55%,
    0% 50%,
    16.19% 46.45%,
    1.09% 39.6%,
    17.66% 39.49%,
    4.32% 29.66%,
    20.56% 33%,
    9.55% 20.61%,
    24.73% 27.25%,
    16.54% 12.84%,
    30.02% 22.49%,
    25% 6.7%,
    36.17% 18.94%,
    34.55% 2.45%,
    42.93% 16.74%,
    44.77% 0.27%,
    50% 16%,
    55.23% 0.27%,
    57.07% 16.74%,
    65.45% 2.45%,
    63.83% 18.94%,
    75% 6.7%,
    69.98% 22.49%,
    83.46% 12.84%,
    75.27% 27.25%,
    90.45% 20.61%,
    79.44% 33%,
    95.68% 29.66%,
    82.34% 39.49%,
    98.91% 39.6%,
    83.81% 46.45%
  );
  aspect-ratio: 1;
}

#toomuch p {
  position: relative;
  color: white;
  font-size: 5rem;
  width: 80%;
  text-align: center;
  z-index: 1000000 !important;
}

#go-work {
  color: white;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: underline white;
}