/*APPLY TO ALL HTML*/
html, body {
  display: block;
  /*max-width: 100%;
  overflow-x: hidden;*/
}

@media only screen and (max-aspect-ratio: 1/1) {
  /*portrait*/
  .garage-door{
    position:fixed; 
    z-index: 50; 
    opacity:1; 
    object-fit: fill; 
    transition:transform 3s cubic-bezier(.74,0,.63,.96); 
    user-select:none;
    height:100vh;
    width: 100vw;
  }
}
  @media only screen and (min-aspect-ratio: 1/1) {
  /*landscape*/
  .garage-door{
    position:fixed; 
    z-index: 50; 
    opacity:1; 
    object-fit: fill; 
    transition:transform 3s cubic-bezier(.74,0,.63,.96); 
    user-select:none;
    width:100vw;
    height: 100vh;
  }
}



  /*HEADER TEXT STYLE*/
  h1 {
    position: absolute;
    transform-origin: center;
    text-align: center;
    user-select:none;

    margin-top: 30vh;

    width: 100vw;
    height:100vh;

    color: #c87869;
    font-family: "Trebuchet MS";
    text-transform: uppercase;
    opacity: .2;
    font-size: 6vw;
  }

/*3D MODEL ITEMS*/
.right-monitor-ss{
  width: inherit;
  height: inherit;
  position: absolute;
  transform-origin: left top;
  pointer-events: none;
  z-index: 25;
  background: url("https://darkgn0ll.github.io/GnollCaveSiteRepo/rm4/rm4SSwp.webp");
  background-position: 0px 0px;
  background-repeat: no-repeat;
  background-size: 320vw;
  border:2px solid #f00;
}

.right-monitor{
  width: inherit;
  height: inherit;
  position: absolute;
  transform-origin: left top;
  pointer-events: none;
}

.item-rotation-animation{
  width: inherit;
  height: inherit;
  position: absolute;
  transform-origin: left top;
  pointer-events: none;
  z-index: 30;
}

.object-handler{
  width: inherit;
  height: inherit;
  position: absolute;
  transform-origin: left top;
  z-index: 15;
}

/*MAIN WEBCONTENT PANELS*/
.content-container{
  width: 80vw;
  height: calc(80vw * (9 / 16));
  position: absolute;
  transform-origin: left top;
  left: 10%;
  user-select: none;
  border:0px solid #f00;
}

.left-content-panel-container{
  width: 8.5vw;
  height: 3000px;
  position: absolute;
  transform-origin: left top;
  left: 0px;
  top: 0px;
  border:0px solid #0f0;
  background-color: #7b76a1;
  opacity:1;
}

.mid-content-panel-container{
  width: 60vw;
  height: 3000px;
  position: absolute;
  transform-origin: left top;
  left: 0px;
  top: 0px;
  border:0px solid #777;
  background-color: #cfa48f;
  opacity:1;
}

.right-content-panel-container{
  width: 7vw;
  height: 3000px;
  position: absolute;
  transform-origin: left top;
  left: 0px;
  top: 0px;
  border:0px solid #777;
  background-color: #f9ffd4;
  opacity:1;
}

/*PANEL VERSION NO FLEX CONTAINER*/
.cv-panel-container {
  width: 80vw;
  height: calc(80vw * (9 / 16));
  position: absolute;
  transform-origin: left top;
  left: 10%;
  top: 10%;
  user-select: none;
  border:0px solid #777;
}

.animation-panel1 {
  width: auto;
  height: calc(80vw * (9 / 16));
  position: absolute;
  transform-origin: left top;
  left: 10%;
  top: 10%;
  user-select: none;
  pointer-events: none;
  border:0px solid #777;
  z-index: 10;
}

.background-panel {
  border:0px solid #f00;

  width: auto;
  height: calc(80vw * (9 / 16));

  top: 0px;
  left: 0px;

  position: inherit;
  transform-origin: inherit;
  user-select: none;
  z-index: -15;

}

.cv-panel1 {
  border:0px solid #f00;

  width: auto;
  height: calc(80vw * (9 / 16));

  top: 0px;
  left: 0px;

  position: inherit;
  transform-origin: inherit;
  user-select: none;
}

.cv-panel1-img{
  width: auto;
  height: calc(80vw * (9 / 16));
  transform: scaleX(1.012);
  user-select: none;
}

.cv-panel1-grad {
  position:absolute;

  left: 0%;
  top:10%;
  width: 30vw;
  height:calc(80vw * (9 / 16));

  mix-blend-mode: screen;
  opacity:0.0;
  transition: opacity .2s ease-out;
  background: linear-gradient(to right,rgba(150,150,220,0.5) 5vw,rgba(255,0,0,0) 25vw, transparent);
  z-index: 25;
  user-select: none;
}

.cv-panel1-grad:hover{
  position:absolute;

  left: 0%;
  top:10%;
  width: 30vw;
  height:calc(80vw * 9 / 16);

  mix-blend-mode: screen;
  opacity:1.0;
  transition: opacity .2s ease-out;
  background: linear-gradient(to right,rgba(150,150,220,0.5) 5vw,rgba(255,0,0,0) 25vw, transparent);
  z-index: 25;
  user-select: none;
}

.cv-panel2 {
  border:0px solid #f00;

  width: auto;
  height: calc(80vw * 9 / 16);
  transform: scaleX(1.012);

  top: 0px;
  left: 0px;

  position: inherit;
  transform-origin: inherit;
  user-select: none;
  z-index: -5;
}

.cv-panel2-img{
  width: auto;
  height:calc(80vw * (9 / 16));
  transform: scaleX(1.0);
  z-index: -5;
  user-select: none;
}

.cv-panel3 {
  border:0px solid #f00;

  width: auto;
  height:calc(80vw * (9 / 16));

  top: 0px;
  left: 0px;

  position: inherit;
  transform-origin: inherit;
  user-select: none;
  z-index: 1;
}

.cv-panel3-img{
  width: auto;
  height:calc(80vw * (9 / 16));
  user-select: none;
  z-index: 1;
}

.cv-panel3-grad {
  position:absolute;

  right: 0%;
  top:10%;
  width: 30vw;
  height:calc(80vw * (9 / 16));
  transform-origin: top right;

  mix-blend-mode: screen;
  opacity:0.3;
  transition: opacity .2s ease-out;
  background: linear-gradient(to left,rgba(150,150,220,0.5) 5vw, rgba(255,0,0,0) 25vw, transparent);
  z-index: 26;
  user-select: none;
}

.cv-panel3-grad:hover{
  position:absolute;

  right: 0%;
  top:10%;
  width: 30vw;
  height:calc(80vw * 9 / 16);
  transform-origin: top right;

  mix-blend-mode: screen;
  opacity:1.0;
  transition: opacity .2s ease-out;
  background: linear-gradient(to left,rgba(150,150,220,0.5) 5vw, rgba(255,0,0,0) 25vw, transparent);
  z-index: 26;
  user-select: none;
}

/*BACKGROUND CUBE FLEX CONTAINER*/
.cv-flex-container {
  display: flex;
  justify-content: center;
  /*background-color: DodgerBlue;*/
  flex-direction:row;
  width: 80vw;
  height:calc(80vw * (9 / 16));
  position: absolute;
  transform-origin: left top;
  left: 10vw;
  top: 150vh;
  user-select: none;
  /*width: min-content;*/
  /*width: 100vh*/
}

.cv-flex-container > div {
  /*background-color: #f1f1f1;*/
  gap: 0;
  margin: 0px;
  padding: 0px;
  font-size: 30px;
  /*height: min-content;*/
  object-fit: contain;
  width: inherit;
  height: inherit;
 
  
  /*shrinks box to size of contents*/
  /*height: min-content*/
  
}

.cv-col {

  border:2px solid #0f0;
  padding: 0px;
  /*cursor:default;*/
}

.cv-col:not(.cv-col2):not(.cv-col1-grad):hover {
  flex: 0.23 0.1 0;
  transition: flex 0.2s ease-out;
  min-width: 0;
  min-height: none;
  /*transform: scale(1.2,1.0);*/
  /*cursor:grab;*/
  z-index: 1;
  /*background: linear-gradient(to bottom,rgba(255,0,0,0.5),rgba(255,0,0,0), transparent);*/
}

/*.cv-col:not(.cv-col2):not(:hover) {

  transition: flex-grow .3s;
  -webkit-transition: flex-grow .3s;
  cursor:grab;
  object-fit: cover;
  
  
}*/



.cv-col1 {
  flex: 0.19 0.1 0;
  transition: flex 0.2s ease-out;
  min-width: 0;
  min-height: none;
  justify-content: flex-end;

  transform-origin: right bottom;
  position: relative;
  object-fit: contain;
  z-index: 1;
  /*background-image: url(https://darkgn0ll.github.io/GnollCaveSiteRepo/cubeRanderLeft1.0.png);*/
  /*position: absolute;*/
}

.cv-col1-grad {
  pointer-events: none;
  justify-content: flex-end;
  opacity:0.0;
  transition: opacity .2s ease-out;
  transform-origin: left top;
  position: absolute;
  left: 10000px;
  top: 1000px;
  width: 450px;
  height:1080px;
  mix-blend-mode: screen;
  background: linear-gradient(to right,rgba(150,150,220,0.5) 30px,rgba(255,0,0,0) 450px, transparent);
  z-index: 2;
}
.cv-flex-container:has(.cv-col1:hover img) .cv-col1-grad{
  pointer-events: none;
  justify-content: flex-end;
  opacity: 1.0;
  transition: opacity .2s ease-out;
  transform-origin: left top;
  position: absolute;
  left: 1000px;
  top: 1000px;
  width: 450px;
  height:1080px;
  mix-blend-mode: screen;
  background: linear-gradient(to right,rgba(150,150,220,0.5) 30px,rgba(255,0,0,0) 450px, transparent);
  z-index: 2;
}


@keyframes scale {
  to {
    transform: scale(1.3,1.0);
  }
}

@keyframes scaleBack {
  to {
    transform: scale(1.3,1.0);
  }
}

.cv-col1 img{
  justify-content: flex-end;
  transform: scale(1.0,1.0);
  transition: transform 0.2s ease-out;
  transform-origin: right bottom;
  display: block;
  z-index: -1;
  justify-content: end;
  /*background-image: url(https://darkgn0ll.github.io/GnollCaveSiteRepo/cubeRanderLeft1.0.png);*/
  /*position: absolute;*/
}

.cv-col1:hover img{
  /*transform: scale(1.2,1.0);*/
  transform: scale(1.3,1.0);
  transition: transform 0.2s ease-out;
  /*cursor:grab;*/
  object-fit: fill;
  transform-origin: right bottom;
  z-index: -1;
  justify-content: end;
  /*animation: scale .3s ease-out forwards;*/
  
}

/*relies on "has" -- only newly supported -- SHRINKS THE SIDE NOT HOVERED*/ 
.cv-flex-container:has(.cv-col1:hover img) .cv-col3 img{
  transform: scale(0.8,1.0);
  transition: transform 0.2s ease-out;
  /*cursor:grab;*/
  object-fit: fill;
  transform-origin: left bottom;
}

.cv-flex-container:has(.cv-col3:hover img) .cv-col1 img{
  transform: scale(0.8,1.0);
  transition: transform 0.2s;
  /*cursor:grab;*/
  object-fit: fill;
  transform-origin: right bottom;
}

.cv-flex-container:has(.cv-col1:hover img) .cv-col2 img{
  transform: scale(1.00,1.0);
  /*cursor:grab;*/
  object-fit: fill;
  transform-origin: center;
  z-index: -5;
}

.cv-flex-container:has(.cv-col3:hover img) .cv-col2 img{
  transform: scale(1.00,1.0);
  /*cursor:grab;*/
  object-fit: fill;
  transform-origin: center;
  z-index: -5;
}

.cv-col2 {
  flex: 1 0 0;
  transition: flex 0.2s ease-out;
  min-width: min-content;
  min-height: 100%;
  z-index: -5;
  float: center;
  position: relative;
}

.cv-col3 {
  flex: 0.21 0.1 0;
  transition: flex 0.2s ease-out;
  min-width: 0;
  min-height: none;
  transform-origin: left bottom;
  position: relative;
}

.cv-col3 img{
  transform: scale(1.0,1.0);
  transition: transform 0.2s ease-out;
  transform-origin: left bottom;
  /*background-image: url(https://darkgn0ll.github.io/GnollCaveSiteRepo/cubeRanderLeft1.0.png);*/
  /*position: absolute;*/
}

.cv-col3:hover img{
  /*transform: scale(1.2,1.0);*/
  transform: scale(1.3,1.0);
  transition: transform 0.2s ease-out;
  object-fit: fill;
  transform-origin: left bottom;
  /*animation: scale .3s ease-out forwards;*/
  
}

  /*#imageLeft {
    object-fit: none;
    object-position: bottom right;
  }*/

/*://Creates columns with different widths//:*/
.flex-container {
  display: flex;
  background-color: DodgerBlue;
  flex-direction:row
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

.col {
  flex: 1;
  transition: flex-grow .3s;
  -webkit-transition: flex-grow .3s;

  border: 5px solid #0f0;
  padding: 10px;
  cursor:default;
  
}

.col:not(.col2):hover {
  flex: 0.3;
  transition: flex-grow .3s;
  -webkit-transition: flex-grow .3s;
  cursor:grab;
}

.col1 {
  flex: 0.2;
  /*position: absolute;*/
}

.col2 {
  flex: 1;
}

.col3 {
  flex: 0.2;
}

.container-anim {
  margin: 0 auto;
  width: 700px;
  height: 400px;
  border: 1px solid lighten(black, 10);
  display: flex;
  align-items: center;
}

.item {
  flex-grow: 1;
  height: 100px;
  background-color: darkred;
  position: relative;
  border: 1px solid lighten(black, 10);
  transition: all 300ms ease-in-out;
  
  &:hover {
    flex-grow: 4.3;
    background-color: lighten(darkred, 20);
  }

  &:click {
    flex-grow: 10;
    background-color: lighten(darkred, 20);
  }

  &:before {
    content: attr(data-order);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
  }
  
  
}


/*://for the parallax effect//:*/
body{
    margin: 0;
    background-color: #1d1e22;
  }
  #parallax {
    position: relative;
    width: 100%;
    height: 100vh;
    background-image: url(https://darkgn0ll.github.io/GnollCaveSiteRepo/pLayer1.png), url(https://darkgn0ll.github.io/GnollCaveSiteRepo/pLayer2.png), url(https://darkgn0ll.github.io/GnollCaveSiteRepo/pLayer3.png), url(https://darkgn0ll.github.io/GnollCaveSiteRepo/pLayer4.png), url(https://darkgn0ll.github.io/GnollCaveSiteRepo/pLayer5.png);
    background-repeat: no-repeat;
    background-position: center;
    background-position: 50% 50%;
  }