/* colors:
*  var(--orange): https://www.color-hex.com/color/ffa500 drop shadow: #4c3100
*  green:  https://www.color-hex.com/color/3cb371 drop shadow: #123521
*/
:root {

    --blur: 0.07vh;
    --dropshadow: 0.2;
    --orange: orange;
}

html {
    margin: 0;
    border: 0;
    padding: 0;
    background-color: #141210;
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
    scrollbar-width: none;
    /* Firefox */
    cursor: url("img/rotor.png"), auto;
}

html::-webkit-scrollbar {
    display: none;
    /* Safari and Chrome */
}

body {
    font: 3vh 'flexi true', Courier, monospace;
    color: var(--orange);
    cursor: url("img/rotor.png"), auto;
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* IE 10 and IE 11 */
    user-select: none;
    /* Standard syntax */
    margin: 0px;
    overflow-x: hidden;
    overflow-y: scroll;
    line-height: 3.7vh;
}

a {
    color: var(--orange);
    text-decoration: none;

}

#bg {
    z-index: -99;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

#fg {
    pointer-events: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 400vh;
    z-index: 99;
    background: repeating-linear-gradient(0deg,
            #1412f000,
            #1412f000 0.2vh,
            #14121066 0.1vh,
            #14121066 0.3vh);
}

/* style the elements with CSS */
#pleaserotate-graphic {
    filter: drop-shadow(0vh 0vh 3vh rgba(255, 165, 0, var(--dropshadow))) blur(var(0.04vh));
    fill: orange;
}

#pleaserotate-backdrop {
    filter: drop-shadow(0vh 0vh 3vh rgba(255, 165, 0, var(--dropshadow))) blur(0.04vh);
    color: orange;
    background-color: #141210;
}


#logo {
    filter: drop-shadow(0vh 0vh 3vh rgba(255, 165, 0, var(--dropshadow))) blur(var(--blur));
    position: absolute;
    left: 50vw;
    transform: translate(-50%, 15vh);
    width: 45vh;
    height: 45vh;
    border: 0.2vh solid var(--orange);
    background-image: url("img/mb3.png");
    background-size: contain;
    border-radius: 0.3vh;
}

#logodown {
    filter: drop-shadow(0vh 0vh 3vh rgba(255, 165, 0, var(--dropshadow))) blur(var(--blur));
    transform: translate(-50%, 60.8vh);
    height: 12.3vh;

}

/*menustuff*/
.menu {
    filter: drop-shadow(0vh 0vh 3vh rgba(255, 165, 0, var(--dropshadow))) blur(var(--blur));
    position: absolute;
    left: 50vw;
    transform: translate(-50%);
    width: 80vw;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
}

#mainmenu {
    top: 76vh;
}

#databasemenu {
    top: 3vh;
}

.menu_btn {
    cursor: url("img/pointer.png"), auto;
    border: 0.2vh solid var(--orange);
    width: 14vh;
    height: 3.5vh;
    text-align: center;
    margin: 3vh;
    margin-top: 0vh;
    border-radius: 0.3vh;
}

.menu_btn:hover {
    border: 0.2vh solid var(--orange) !important;
    background-color: var(--orange) !important;
    color: #141210 !important;
    width: 14vh;
    height: 3.5vh;
    text-align: center;
}

.menu_bracket {
    filter: drop-shadow(0vh 0vh 3vh rgba(255, 165, 0, var(--dropshadow))) blur(var(--blur));
    position: absolute;
    left: 50vw;
    transform: translate(-50%);
    width: 61.5vh;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    border-top: 0.3vh solid var(--orange);
    justify-content: space-between;
    border-radius: 0.3vh;
}

#l0_bracket {
    top: 73vh;
}

#p2_bracket {
    width: 82vh;

}

.bracketline {
    border-radius: 0.3vh;
    width: 0.3vh;
    background-color: var(--orange);
    height: 2.2vh;
}

.bracketline_thru {
    border-radius: 0.3vh;
    width: 0.3vh;
    background-color: var(--orange);
    height: 6vh;
    margin-top: -3.8vh;
}

.bracketline_up {
    filter: drop-shadow(0vh 0vh 3vh rgba(255, 165, 0, var(--dropshadow))) blur(var(--blur));
    position: absolute;
    left: 50vw;
    transform: translate(-10.3vh, -3.6vh);
    border-radius: 0.3vh;
    width: 0.3vh;
    background-color: var(--orange);
    height: 3.8vh;
}

/*pages */
.L1 {
    position: absolute;
    left: 0vw;
    top: 84vh;
    width: 100vw;
    height: 8vh;
}

#page4 {}

.L2 {
    position: absolute;
    left: 0vw;
    top: 7.4vh;
    width: 100vw;
    height: 810vh;
}

.pdf_grid {
    filter: drop-shadow(0vh 0vh 3vh rgba(255, 165, 0, var(--dropshadow))) blur(var(--blur));
    position: absolute;
    transform: translate(-50%, 2vh);
    left: 50vw;
    width: 114vh;
    display: grid;
    grid-template-columns: 55vh 55vh;
    grid-gap: 4vh;
    padding: 3vh;
    border: 0.1vh solid var(--orange);
    border-radius: 0.3vh;
}

.pdf_entry {
    cursor: url("img/pointer.png"), auto;
    box-sizing: border-box;
    border: 0.3vh solid var(--orange);
    border-radius: 0.3vh;
    height: 20vh;
}

.pdf_entry:hover {
    background-color: var(--orange);
    color: #141210;
}

.pdf_entry:hover .thumb {
    background-color: #141210;
}

.thumb {
    float: right;
    position: relative;
    background-size: cover;
    background-position: center center;
    top: 0vh;
    right: 0vh;
    height: 100%;
    width: 26%;
    border-left: 0.3vh solid var(--orange);
}

.entrytext {
    margin-top: 2vh;
    margin-left: 3vh;
}

.product_grid {
    filter: drop-shadow(0vh 0vh 3vh rgba(255, 165, 0, var(--dropshadow))) blur(var(--blur));
    position: absolute;
    transform: translate(-50%, -1vh);
    left: 50vw;
    width: 102vh;
    display: grid;
    grid-template-columns: 102vh;
    row-gap: 4vh;
    border: 0.1vh solid var(--orange);
    border-radius: 0.3vh;
    padding-top: 3vh;
    padding-left: 7vh;
    padding-right: 7vh;
    padding-bottom: 3vh;

}

#product_header {
    box-sizing: border-box;
    border: 0.2vh solid var(--orange);
    border-radius: 0.3vh;
    padding: 3vh;

    -webkit-user-select: text;
    /* Safari */
    -ms-user-select: text;
    /* IE 10 and IE 11 */
    user-select: text;
    /* Standard syntax */
}

.product_entry {
    cursor: url("img/pointer.png"), auto;
    box-sizing: border-box;
    border: 0.3vh solid var(--orange);
    border-radius: 0.3vh;
    height: 45vh;
}

.product_entry:hover {
    background-color: var(--orange);
    color: #141210;
}

.product_entry:hover .pthumb {
    background-color: #141210;
}

.product_entry:hover .product_desc {
    border: 0.1vh solid #141210;
    border-radius: 0.3vh;
}

.pthumb {
    float: left;
    position: relative;
    background-size: 90%;
    background-position: center center;
    background-repeat: no-repeat;
    top: 0vh;
    left: 0vh;
    height: 44.5vh;
    width: 44.5vh;
    border-right: 0.3vh solid var(--orange);
}

.product_desc {
    margin-top: 3vh;
    margin-left: 48vh;
    margin-right: 3vh;
    padding: 2vh;
    height: 34.2vh;
}



/*DATABASE-FC*/
.guiline {
    filter: drop-shadow(0vh 0vh 3vh rgba(255, 165, 0, var(--dropshadow))) blur(var(--blur));
    position: absolute;
    left: 50vw;
    border-radius: 0.3vh;
    width: 0.3vh;
    background-color: var(--orange);
}

#fcdown1 {
    transform: translate(-20.6vh);
    height: 3.8vh;
}

#fcdown2 {
    transform: translate(-10.4vh, -6.45vh) rotate(90deg);
    height: 20.6vh;
}

#fcdown3 {
    transform: translate(-50%, 3.8vh);
    height: 10vh;
}

#aboutbox {
    filter: drop-shadow(0vh 0vh 3vh rgba(255, 165, 0, var(--dropshadow))) blur(var(--blur));
    border: 0.1vh solid var(--orange);
    border-radius: 0.3vh;
    width: 104vh;
    position: absolute;
    transform: translate(-50%, -1vh);
    left: 50vw;
    padding: 3vh;
    margin-bottom: 20vh;
}

.foot {
    margin-top: 20vh;
    height: 20vh;
}



















@font-face {
    font-family: 'flexi true';
    src: url(fonts/Flexi_IBM_VGA_True.ttf) format("truetype");
}

@font-face {
    font-family: 'flexi false';
    src: url(fonts/Flexi_IBM_VGA_False.ttf) format("truetype");
}

/*font-family: 'flexi true', 'Courier New', monospace;*/