:root{
  --bgimg: url('/images/coccoonbg.png');
    --magenta: #E75597;
    --hotpink: #920A70;
    --darkerhotpink: #791324;
    --purple: #46194C;
    --black: #190B1B;
    
    
    
}
@font-face {
        font-family: 'minecraftmedium';
        src: url('minecraft-webfont.woff2') format('woff2'),
             url('minecraft-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;

}       


body {
    background-image: var(--bgimg);
    background-size:auto;
    background-position: top left;
    font-family: minecraftmedium;
}

#container {
    display: flex;
    flex-direction: row;
    max-width: 80%;
     margin: 0 auto;
max-height: 80%;
}

#navbar {
    
    text-align: center;
    background-color: var(--magenta);
    display:block;
    padding: 0px;
  border-bottom: 5px var(--black) solid;
}
#imageview {
   
    
    max-width: 90%;
    flex: 1;
    order: 2;
   
}

.imgrow {
     display: flex;
  flex-direction: row;
    flex-basis: auto;
    flex-wrap: wrap;
}
#sidebar {
   
    order: 1;
    
   max-width: 25%;
    font-size: 20px;
}

#sidebar a {
    display: block;
    margin-bottom: 10px;
}
.box { 
 /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fcecfc+0,fba6e1+50,fd89d7+51,ff7cd8+100;Pink+Gloss+%232 */
background: #fcecfc; /* Old browsers */
background: -moz-linear-gradient(top,  #fcecfc 0%, #fba6e1 50%, #fd89d7 51%, #ff7cd8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #fcecfc 0%,#fba6e1 50%,#fd89d7 51%,#ff7cd8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #fcecfc 0%,#fba6e1 50%,#fd89d7 51%,#ff7cd8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcecfc', endColorstr='#ff7cd8',GradientType=0 ); /* IE6-9 */

    
   
    border-radius: 2px;
    border: solid 8px var(--black);
         /* IE6-9 */
    padding: 20px;
    margin-right: 10px;
}

#navbar ul {
    list-style-type: none;
 margin: auto;
}

#navbar li {
    display: inline;
     font-size: 30px;
    margin-right: 20px;
    text-decoration: none;
}


#navbar ul img {
    max-height: 50px;
    display: inline;
     image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}


/* mobile accessibility */
@media only screen and (max-width: 900px) {
    #container {
        
        flex-direction:column;
      flex-wrap: wrap;
        max-width: 100%;
        justify-content: space-evenly;
    }
    #imageview{
        flex: 1;
        order: 2;
        max-width: 100%;
    }
    #sidebar {
        flex: 1;
        order: 1;
        max-width: 100%;
       
    }
    #navbar{
        max-width: 100%;
        font-size: 10px;
        
    }
    #navbar li {
        display: inline-block;
        margin-bottom: 10px;
       
        
    }
    
    #navbar li img {
        display: none;
    }
}

/* beautification styling */

html {
    scrollbar-color: var(--purple) var(--magenta);
    scrollbar-width: auto;
}
a {
    color: var(--hotpink);
}

a:visited{ 
color: var(--darkerhotpink);
}

body a:hover{
    color: var(--purple);
}
body a:focus {
     color: var(--purple);
}

.fontbig {
    font-size: 30px;
   font-weight: bold;
}


.box img {
    margin: 10px;
   
    padding: inherit;
    max-height: 300px;
    flex-basis: auto;
    display: block;

}