/*Desktop HIDPI 1920 x 1080 https://blisk.io/devices*/
@media only screen and (min-width: 1441px) and (max-width: 1920px) {

/*fonts sources:
Basalte Fond 
https://velvetyne.fr/fonts/degheest/

Uchrony Arrows by deFharo
https://www.dafont.com/uchrony-arrows.font 
*/

/*
Deheest is a project by Ange Degheest, Eugénie Bidaut, Oriane Charvieux, Mandy Elbé, Luna Delabre, Camille Depalle, Justine Herbel, May Jolivet and Benjamin Gomez, created in Atelier de création typographique from EESAB Rennes.
*/

*{
    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 */
  
/*
    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%; 
*/
    /*CSS Vertical lines in background*/
    /*From: https://stackoverflow.com/questions/59737438/how-to-create-vertical-lines-spaced-out-evenly-as-background-using-css*/
    /*User Temani Afif's tip*/
/*    background-image: repeating-conic-gradient(#fff 0 9deg, #000 9deg 18deg);*/
/*
    background-image: url("https://www.shutterstock.com/image-photo/christmas-party-time-young-people-600nw-734892805.jpg");
    background-size: cover;
    background-repeat: no-repeat;
*/   
    
}


.tension{
  position: absolute;
  width:125%; 
  width: 100%;
/*  height:100vh;  */
  /*border:solid 0.5px #000;*/
  border-color:#7F7F7F transparent transparent transparent;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-style: solid;
  border-width: 1px;
  z-index: 1111;
} 

.tension1{
    display: none;
/*
  top: 9%;
  left: 0%; 
*/
  border-radius: 50%/100px 100px 0 0;
  transform: rotate(15deg);
  margin-top: 9%;
  margin-left: -5%;
} 

.tension2{
    display: none;
/*
  top: -10%;
  left: 0%; 
*/
  border-radius: 50%/50px 100px 0 0;
  transform: rotate(-5deg);
  margin-top: 30%;
  margin-left: -5%;
} 

.tension3{
    display: none;
/*
  top: 0%;
  left: 13%; 
*/
  border-radius: 50%/100px 100px 0 0;
  transform: rotate(55deg);
  margin-top: 0%;
  margin-left: 13%;
} 

.tension4{
    display: none;
/*
  top: 0%;
  left: 0%; 
*/
  border-radius: 50%/100px 100px 0 0;
  transform: rotate(165deg);
  margin-left: -5%;
  margin-top: 14%;
} 

.tension5{
  display: none;
/*  top: 0%;*/
/*  left: -15%;*/
  border-radius: 50%/100px 100px 0 0;
  transform: rotate(93deg);
  margin-top: 9%;
  margin-left: -44%;
} 

.tension6{
    display: none;
/*
  top: 200%;
  left: 15%;
*/
  border-radius: 50%/100px 100px 0 0;
  transform: rotate(-105deg);
  margin-left: 12%;
  margin-top: 17%;
} 

.window{
/*
    width:80%;
    height:90%;
*/
    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, .feedbox, .feed-title, .feed-descr, .feed-profile, aside, .logo, .close, .move, #title,.scroll {
  position: absolute;  
}

#banner{
    position: absolute;
    background-color: white;
    top: 10%;
    left: 32%;
    width: 68%;
    height: 18.45%;
    display:flex;
/*    justify-content: center;*/
    align-items: center;
    border-bottom: 0.5px solid black;
    z-index: 1000; /*added bc of the scroll offsetTop JS function*/
}
#up{
    font-size: 4.5rem;
    font-family: "Uchrony Arrows Regular";
    position: relative;
    left: 1.5%;
}
#title{
   font-family: "Futura-Heavy";
   font-size: 4rem;
   line-height: 0;
   margin-left: 13.5%;
   margin-top: -1%;
}

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

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

#subtitle{
    font-family: "Futura-Book";
    position: absolute;
    font-size: 1.275rem;
    left: 21.25%;
    margin-top: 4%;
}

.tempting{  
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

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

#tempt2 , #tempt3, #tempt4, #tempt5{
    display: none;      
}     
#tempt1 span, #tempt2 span, #tempt3 span, #tempt4 span, #tempt5 span{
    position: absolute;
    font-family: "Futura";
    text-align: center;
    text-decoration: underline dotted;
}
#tempt1 span{
    font-size: 1rem;
    line-height: 1.3;
    top: 28%;
}   
#tempt2 span{
    font-size: 1.4rem;
    line-height: 1.4;
    top: 33%;
} 
#tempt3 span{
    font-size: 1.8rem;
    line-height: 1.4;
    top: 28%;
}   
#tempt4 span{
    font-size: 2.2rem;
    line-height: 1.5;
    top: 35%;
}   
#tempt5 span{
    font-size: 2.8rem;
    line-height: 1.4;
    top: 44%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}     

#tempt1{
    width: 16vh;;
    height: 16vh;
    left: 80%;
}
    
#tempt2{
    width: 24vh;;
    height: 24vh; 
    left: 77%;
} 
    
#tempt3{
    width: 32vh;;
    height: 32vh;
    left: 74%;
}
    
#tempt4{
    width: 40vh;;
    height: 40vh;
    left: 71%;
} 
    
#tempt5{
    width: 48vh;;
    height: 48vh;
    left: 66%;
}   
.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: 1rem;
}

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

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

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

/*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%;
}  

.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.65rem;
    padding: 0% 0% 0% 12%;
}

.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%;
}
*/
.logo{
    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: 2.75rem;
}

.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, .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;
}
.prof-box{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    justify-content: flex-start;
/*    background-color: blue;*/
    position: relative;
    width:24%;
    height: 40%;
    top: 31.2%;
    left:0%;
    border-bottom: 1px solid black !important;
}

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

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

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

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


/*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:7%;
}

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

.title, .descr, .exp{
    display: flex;
    align-items: center;
    font-size:0.8rem;
}
.title p, .descr p, .exp p{
    padding: 0.35rem 0.5rem;
}

.exp p{
    line-height: 1.2;
}

.exp{
    width: 80%;

}

.ad-box{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    width:24%;
    height: 29%;
    top: 31.25%;
    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;
}

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

#explode{
     padding: 8.5rem 18rem;
}
/*
#expand2{
    padding: 4.5rem 5rem;
}
*/
#expand2 p{
    font-size: 1.4rem;
    line-height: 1.6;
}
#expand3 p{
    font-size: 1.8rem;
    line-height: 1.6;
}
#expand4 p{
    font-size: 2.2rem;
    line-height: 1.6;
}
#expand5 p{
    font-size: 2.6rem;
    line-height: 1.6;
}
#explode p{
    font-size: 3rem;
}

#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;
}

#promo-text{
    position: relative;
    border-radius: 50%;
    border: 1px solid black;
    padding: 1.5rem 2rem;
    background-color: white;
    text-align: center;
}

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

.feedbox{
    position: absolute;
    width: 48.5%;
    top: 28.3399%;
    height: 71.75%;
/*    height: 900px;*/
    left: 31.995%;
    overflow-y: scroll;
    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;
    
    top: 10%;
    height: 100%;
}

#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: 20%;
    left: 3.5%;
    z-index: 999;
    background-color: white;
}

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

#loader img{
    width: 12%;
}

.feed1{
    top:5%;
    top: 21%;
}

.feed2{
    top:9.5%;
    top: 23.5%;
}

.feed3{
    top:14%;
    top: 26%;
}

.feed4{
    top:18.5%;
    top: 28.5%;
}

.feed5{
    top:23%;
    top: 31%;
}

.feed6{
    top:27.5%;
    top: 33.5%;
}

.feed7{
    top:32%;
    top: 36%;
}

.feed8{
    top:36.5%;
    top: 38.5%;
}

.feed9{
    top:41%;
    top: 41%;
}

.feed10{
    top:45.5%;
    top: 43.5%;
}

.feed11{
    top:50%;
    top: 46%;
}

.feed12{
    top:54.5%;
    top: 48.5%;
}

.feed-profile{
    border-radius: 50%;
    top:17.5%;
    left:5%;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.headd, .bodyy{
    background-color: lightgrey;
    position: relative;
}
.headd{
    width:28px;
    height: 28px;
    border-radius: 50%;
}

.bodyy{
    width: 54px;
    height: 20px;
    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.7rem; 
    line-height: 1.3;
}

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

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

#career-ladder{
    position: absolute;
    top: 10.25%;
    top: 10%;
    left: 24%;
    width:8%;
    height:89.65%;
    height: 90.5%;
    overflow-x:hidden;
    overflow-y: scroll;
    text-align: center;
}

.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: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 4px 4px 4px #383838;
}

.scroll{
    font-size:0.9rem;
    writing-mode: vertical-rl;
    text-orientation: upright;
    background: black;
    width:12%;
    height:120%;
    overflow-y: scroll;
    overflow-x: hidden;
    overflow-wrap: break-word;
    /*overflow-wrap: break-word makes the natural break within the size of div*/
}

.scroll1{
    left: 0%;
    height: 20%;
    top: 79%;
}
.scroll2{
    left:7%;
    height: 30%;
    top: 69%;
}
.scroll3{
    left:14%;
    height: 40%;
    top: 59%;
}
.scroll4{
    left:21%;
    height: 50%;
    top: 49%;
}
.scroll5{
    left:28%;
    height: 60%;
    top: 39%;
}
.scroll6{
    left:35%;
    height: 70%;
    top: 29%;
}
.scroll7{
    left:42%;
    height: 80%;
    top: 19%;
}
.scroll8{
    left:49%;
    height: 90%;
    top: 9%;
}
.scroll9{
    left:56%;
    top:-1%;
    height:100%;
}
.scroll10{
    left:63%;
    top: -11%;
    height: 110%;
}
.scroll11{
    left:70%;
    top: -11%;
    height: 110%;
}
.scroll12{
    left:77%;
    top: -11%;
    height: 110%;
}
.scroll13{
    left: 108%;
    top: -11%;
    height: 110%;
}
.scroll14{
    left: 117%;
    top: -11%;
    height: 110%;
}
.scroll15{
    left: 126%;
    top: -11%;
    height: 110%;
}
.scroll16{
    left: 135%;
    top: -11%;
    height: 110%;
}
.scroll17{
    left: 144%;
    top: -11%;
    height: 110%;
}
.scroll18{
    left: 153%;
    top: -11%;
    height: 110%;
}
.scroll19{
    left: 162%;
    top: -11%;
    height: 110%;
}
.scroll20{
    left: 171%;
    top: -11%;
    height: 110%;
}

#noline{
    border-left: none;
    border-right: none;
    border-top: none;
    background-color: white;
    top:28.75%;
    left:81%;
    width:17.9%;
    height:69%;
    overflow-x: hidden;
    overflow-y:scroll;
}

.adv{
    position: relative;
    font-family: sans-serif;
/*    font-family: "Futura";*/
    font-size: 16px;
    line-height: 1.35;
    margin: 0.45em 0.6em;
}

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

.adv1 p{
    font-size: 0.85rem;
    line-height: 1.35;
}

.adv2{
    top:3%;
    left:0;
    width: 100%;
}

.adv2 img{
    width:90%;
    border: 1.5px solid black;
    border-style: dashed;
}

#ad-phrase{
  font-family: "Futura-Heavy";
  font-size: 1rem;
  position: absolute;
  z-index: 1000;
  top: -7%;
  left: 20px;
  width: 73%;
  text-align: center;
  background-color: white;
}
    
}