:root{

--brandsprimarycolor: rgb(0, 0, 0); 
--primaryfade: #f5cfff; ;
--secondarycolor: #1b0101;
--accentcolor:#f5f5f5;
--words:#ffffff; 
--backgroundcolor:background: linear-gradient(112.1deg, rgba(29, 23, 38, 0.95) 11.4%, rgba(65, 48, 87, 0.95) 70.2%) center center;

--shadowacent:#fb0000;
--shadowcolors: 0 0 5px #fff, 0 0 5px #fff, 0 0 10px var(--shadowacent), 0 0 15px var(--shadowacent), 0 0 20px var(--shadowacent), 0 0 27px var(--shadowacent), 0 0 37pxvar(--shadowacent);


--boxshadowaccent:#8c00ff;
--boxshadowcolors:0 0 3px #fff, 0 0 5px #fff, 0 0 5px var(--boxshadowaccent), 0 0 7px var(--boxshadowaccent), 0 0 10px var(--boxshadowaccent), 0 0 15px var(--boxshadowaccent), 0 0 20px var(--boxshadowaccent);


}

/*
var(--brandsprimarycolor);
var(--primaryfade);
var(--secondarycolor);
var(--backgroundcolor);

og pink is #ff0080;

var(--words);
*/








* {

margin: 0px;
padding: 0px;
color: var(--words);
text-decoration: none;


}



.disapear{
  display: none;
  visibility: none;
}
 

/* Nav Stuff below */


nav {

height: 10vh;
width: 100vw;
position: relative;
display: inline-block;

background:var(--brandsprimarycolor);
box-shadow: 0px 0px 25px 25px var(--primaryfade);

color: #fff;
box-shadow:var(--boxshadowcolors);
z-index: 3;
    
}

nav > h1 {

position: relative;
display: inline-block;

height: 10vh;
font-size: 3rem;
line-height: 10vh;
padding-left: 5vh;
padding-right: 1vh;
text-align: center;
vertical-align: top;
background:var(--brandsprimarycolor);


color: #fff;
text-shadow: var(--shadowcolors) !important;
    

}

nav > img {

    display: inline-block;
    box-sizing: border-box;
    padding-left: 0vh;
    padding: 2.5vh 0px 0px 0px;
    background-color: var(--brandsprimarycolor);
    


}

nav > ul {

  display: inline-flex;
  list-style: none;

  height: 10vh !important;
  float: right;
  padding-right: 2.5vw;
}

nav > ul > li {

  font-size: 2.5rem;
  position: relative;

  line-height: 10vh !important;
  text-align: center;
  margin: 0px 10px 0px 10px;

  color: #fff;
  text-shadow: var(--shadowcolors);

  
}



nav > span > ul  {

  list-style: none;
  width: 100%;
  font: 1.5rem;
  height: 5vh;
  line-height: 5vh;
  position: absolute;
  

  }


nav > span > ul > li  {


background-color: #9d00ffe2;
border-bottom: 3px rgb(76, 0, 101) solid;
padding-left: 20px;

}

/* Nav Stuff above */


main {


  position: relative;
  display: flex;
  margin-left: 5vw;
  width: 100vw;
  height: 90vh;
  min-height: 90vh;
  min-width: 100vw;

}



body {

color: var(--words);
outline: solid 3px var(--accentcolor);
background: linear-gradient(112.1deg, rgba(23, 23, 38, 0.95) 11.4%, rgba(48, 50, 87, 0.95) 70.2%) center center no-repeat;

}


main > div {
    align-items: center;
    align-content: center;
    align-self: center;

    position: relative;
    display: inline-block;
    align-items: center;
    align-content: center;
    width: 25vw;
    height: 80vh;
    text-align: center;
    margin: 5vh 2.5vw 5vh 2.5vw;
    color: var(--words);

    background-color: var(--secondarycolor);
    color: #fff;
    box-shadow:var(--boxshadowcolors)
        


}

main > div > h1 {

margin: 10px;


}


.profile {

text-align: left;
padding: 25px 25px 0px 25px;
font-size: 1rem;



}




.profile > img {

width: 100px;
border-radius: 100px;
outline: solid var(--accentcolor) 4px;
position: relative;
float: left;

margin: 0px 20px 0px 0px;


}



.btnslide  {

margin-top: 2vh;
width: 100px;
height: 50px;
font-size: 1.5rem;
font-weight: bold;
border-radius: 7px;
display: inline-block;
color: var(--words);
background-color: var(--secondarycolor);
outline: white 3px solid;

}


#imageLoader{

margin-top: 2vh;
width: 100px;
height: 50px;
font-size: 1.5rem;
font-weight: bold;
border-radius: 7px;
display: inline-block;


}

#producerdisplay {

background-color: var(--secondarycolor);
position: relative;
width: 20vw;
height: 20vh;
outline: solid 3px var(--accentcolor);
background-image: none;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
margin: 10px;
margin-top: 10px;
border-radius: 5px;

}

#imageCanvas {

background-color: var(--secondarycolor);
position: relative;
width: 20vw;
height: 20vh;
outline: solid 3px var(--accentcolor);
background-image: none;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
margin: 10px;
margin-top: 10px;
border-radius: 5px;

}

#textCanvas {

display: none;


}




#decodertitle {



padding-top: 200px;


}

#imageLoader2 {


margin-top: 2vh;
width: 100px;
height: 50px;
font-size: 1.5rem;
font-weight: bold;
border-radius: 7px;
display: inline-block;

}

#textCanvas {
display:none;
}

#decodeinputs > input {

margin: 1vh;
width: 100px;
height: 25px;
font-size: 1rem;
font-weight: bold;
border-radius: 5px;
display: inline-block;
color: rgb(153, 0, 255);

}


#imageCanvas2 {

width: 20vw;
height: 20vh;

outline: solid 3px var(--accentcolor);
background-color: rgb(207, 190, 231);
background-position: contain;


}


#freondescription {

text-align: left;
text-indent: 25px;
padding: 20px;

}