style.css

/* Utility. Variables and misc rules go here. */

:root{
    --header-image: url('assets/backgroundA.png');
    --background: #1D612D;
    --bodytext: #B3F7D0;
    --borders: #31D236;
    --sidebars: #0E6646;
    --bartext: #07D2AE;
}

body {
    height: 80vh;
    width: 100%;
    overflow-x:hidden;
    background: black;
    color: var(--bodytext);
}

header, main, footer, .nav_arrows, .popbar{
    border: 2px var(--borders) solid
}

.flex{
    display: flex;
}

.sidespace{
    flex-basis: 100%;
    position:sticky;
    z-index: 2;
}

.container{
    max-width: 900px;
    flex-shrink: 0px;
    background-color: var(--background);
    height 90%;
}

footer{
    margin-top: 20px;
    height: 30px;
    margin-bottom: 0px;
}

/* Left part of the main display. Contains the iframe and the website title. */

.left{
    margin-left: 20px;
    margin-top: 20px;
    width: 500px;
}

header{
    border-bottom: 1px var(--borders) solid;
    padding: 0px;

    
}
    header h3{
        text-size-adjust: smaller;
        margin: 0px;
        margin-left: 5px;
    }

main{
    border-top: 0px;
    width: 100%-1px;
    height: 90%;
    padding: 5px;
}

    main p{
        margin-top: 5px;
        margin-bottom: 3px;
    }

.nav_arrows{
    border-top: 0px;
    text-align: center;
}

/* Right part of the display. Contains a space for a decoration image as well as the sliding side menus. */ 

.right{ 
    width:400px;
}

.decoration{             /* <-- Space for a  background image or such. */ 
    width: 100%;
    height: 100%;
    background-image: var(--header-image) repeat-y 60% 50%;
}

.bar_row{                /* <-- Flexbox holding the row of menus. */
    height: 100%;
    width: 30px;
    margin-bottom: 20%;
}

.popbar{                 /* <-- Class for the bits you hover over. */
    margin-top:100%;
    flex-direction: column;
    background-color: var(--sidebars);
  }
  
    .popbar p{
        vertical-align: middle;
        text-align:center;
        min-height: 20px;
        height: 30%;
        margin-top: 50px;
        margin-bottom: 50px;
    }

.popout{
    display:flex;
    text-align:center;
    height: 100%;
    border-top: 1px var(--borders) solid;
    border-bottom: 1px var(--borders) solid;
    border-left: 1px var(--borders) solid;
}

#slider_a, #slider_b, #slider_c, #slider_d {
    position: absolute;
    width: 500px;
    max-width: 500px;               /*  Styles for the sliding menus. */
    height: 123px;                  /*  Imported from codepen at https://codepen.io/mignunez/pen/rNwVygZ */                   /*  and thouroughly vivisected. */
    background: var(--sidebars);
    transform: translateX(-500px) translateY(-2px);
    -webkit-transform: translateX(-500px) translateY(-2px);
}
  
.slide-in {
      animation: slide-in 0.5s forwards;
      -webkit-animation: slide-in 0.5s forwards;
} 
  
.popbox{
    flex:100%;
    flex-direction: column;
    padding: 10px;
    color: var(--bartext);
}
      
@keyframes slide-in {
      100% { transform: translateX(500px) translateY(-2px); }
}
  
@-webkit-keyframes slide-in {
      100% { -webkit-transform: translateX(500px) translateY(-2px); }
}
  
  .slide-out {
      animation: slide-out 0.5s forwards;
      -webkit-animation: slide-out 0.5s forwards;
}
      
@keyframes slide-out {
      0% { transform: translateX(0px) translateY(-2px); }
      100% { transform: translateX(-500px) translateY(-2px); }
}
  
@-webkit-keyframes slide-out {
      0% { -webkit-transform: translateX(0px) translateY(-2px); }
      100% { -webkit-transform: translateX(-500px) translateY(-2px); }
}
/* ---END SLIDER RULES--- */