:root {
    --primarycolour:#FFF;
    --accentcolour:#BBB;
  
    --bgcolour:#000;
    --lightbgcolour:#2B2B2B;

    --acceptcolour:#3DFF2C;
    --declinecolour:#EB1515;
}

@font-face {
    font-family:"NavSys Helvetica Light";
    src:url(font.otf) format("opentype");
}

*, *:before, *:after {
	-webkit-box-sizing:inherit;
	box-sizing:inherit;
}

::selection,
::-moz-selection {
    background:var(--lightbgcolour);
}

::-webkit-scrollbar {
	width:10px;
}

::-webkit-scrollbar-thumb {
	background:var(--lightbgcolour);
}

::-webkit-scrollbar-track {
	background-color:var(--primarycolour);
}

html {
	scrollbar-width:thin;
	scroll-behavior:smooth;
	scrollbar-color:var(--lightbgcolour);
    overflow:hidden !important;
}

body {
    margin:0;
    width:100vw;
    height:100vh;
    overflow:hidden !important;
    font-family:"NavSys Helvetica Light", Helvetica, Arial, sans-serif;
    letter-spacing:0.06rem;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    background-image:linear-gradient(rgba(0, 0, 0, 0.6),rgba(0, 0, 0, 0.6)),url(bg.webp);
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    box-sizing:border-box;
    background-color:rgba(0,0,0,0.8);
    color:var(--primarycolour);
    filter:blur(.3px);
    animation:textShadow 2s infinite;
}

body::before {
    content:" ";
    display:block;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background:linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index:2;
    background-size:100% 2px, 3px 100%;
    pointer-events:none;
}

h1, h2, h3, h4 {
    letter-spacing:0.09rem !important;
}

img {
    animation:imageShadow 4s infinite;
}

a {
    color:var(--primarycolour);
	text-decoration:none;
    background-color:transparent;
    -webkit-transition:ease-in color 0.15s;
    -moz-transition:ease-in color 0.15s;
    transition:ease-in color 0.15s;
}

a:hover {
	color:var(--accentcolour);
	text-decoration:none;
}

.mainSystem {
    width:77vw;
    height:100%;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    padding-top:50px;
}

.folderSystem {
    width:100%;
    margin-left:auto;
    margin-right:auto;
    padding-top:0px;
    padding-bottom:10px;
}

.folderSystem img {
    height:80px;
    width:auto;
}

.folderSystem h2 {
    margin:10px 0px;
}

.folderSystem hr,
.footerSystem hr {
    border:1px solid var(--primarycolour);
    margin:10px 0px 8px 0px;
}

.folderInfo {
    position:relative;
}

.rightAlign {
    position:absolute;
    right:0px;
}

.textSystem {
    width:97%;
    max-height:calc(100vh - 250px - 11vh);
    margin-left:auto;
    margin-right:auto;
    overflow-y:auto;
}

.textSystem img {
    max-width:100%;
    height:auto;
}

.fileItem {
    margin-left:0px;
    transition:margin-left 0.3s ease-out;
}

.fileItem:hover {
    margin-left:7px;
}

.footerSystem {
    padding-top:16px;
    padding-bottom:0px;
    position:relative;
}

.backgroundElements > .rotatingIcon {
    position:absolute;
    top:-132px;
    right:-132px;
    -webkit-animation:rotating 10s linear infinite, imageShadow 4s infinite;;
    animation:rotating 10s linear infinite, imageShadow 4s infinite;
}

@keyframes textShadow {
    0% {text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.5), -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 0 0 3px;}
    5% {text-shadow: 2.7928974010788217px 0 1px rgba(0,30,255,0.5), -2.7928974010788217px 0 1px rgba(255,0,80,0.3), 0 0 3px;}
    10% {text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.5), -0.02956275843481219px 0 1px rgba(255,0,80,0.3), 0 0 3px;}
    15% {text-shadow: 0.40218538552878136px 0 1px rgba(0,30,255,0.5), -0.40218538552878136px 0 1px rgba(255,0,80,0.3), 0 0 3px;}
    20% {text-shadow: 3.4794037899852017px 0 1px rgba(0,30,255,0.5), -3.4794037899852017px 0 1px rgba(255,0,80,0.3), 0 0 3px;}
    25% {text-shadow: 1.6125630401149584px 0 1px rgba(0,30,255,0.5), -1.6125630401149584px 0 1px rgba(255,0,80,0.3), 0 0 3px;}
    30% {text-shadow: 0.7015590085143956px 0 1px rgba(0,30,255,0.5), -0.7015590085143956px 0 1px rgba(255,0,80,0.3), 0 0 3px;}
    35% {text-shadow: 3.896914047650351px 0 1px rgba(0,30,255,0.5), -3.896914047650351px 0 1px rgba(255,0,80,0.3), 0 0 3px;}
    40% {text-shadow: 3.870905614848819px 0 1px rgba(0,30,255,0.5), -3.870905614848819px 0 1px rgba(255,0,80,0.3), 0 0 3px;}
    45% {text-shadow: 2.231056963361899px 0 1px rgba(0,30,255,0.5), -2.231056963361899px 0 1px rgba(255,0,80,0.3), 0 0 3px;}
    50% {text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.5), -0.08084290417898504px 0 1px rgba(255,0,80,0.3), 0 0 3px;}
    55% {text-shadow: 2.3758461067427543px 0 1px rgba(0,30,255,0.5), -2.3758461067427543px 0 1px rgba(255,0,80,0.3), 0 0 3px;}
    60% {text-shadow: 2.202193051050636px 0 1px rgba(0,30,255,0.5), -2.202193051050636px 0 1px rgba(255,0,80,0.3), 0 0 3px;}
    65% {text-shadow: 2.8638780614874975px 0 1px rgba(0,30,255,0.5), -2.8638780614874975px 0 1px rgba(255,0,80,0.3), 0 0 3px;}
    70% {text-shadow: 0.48874025155497314px 0 1px rgba(0,30,255,0.5), -0.48874025155497314px 0 1px rgba(255,0,80,0.3), 0 0 3px;}
    75% {text-shadow: 1.8948491305757957px 0 1px rgba(0,30,255,0.5), -1.8948491305757957px 0 1px rgba(255,0,80,0.3), 0 0 3px;}
    80% {text-shadow: 0.0833037308038857px 0 1px rgba(0,30,255,0.5), -0.0833037308038857px 0 1px rgba(255,0,80,0.3), 0 0 3px;}
    85% {text-shadow: 0.09769827255241735px 0 1px rgba(0,30,255,0.5), -0.09769827255241735px 0 1px rgba(255,0,80,0.3), 0 0 3px;}
    90% {text-shadow: 3.443339761481782px 0 1px rgba(0,30,255,0.5), -3.443339761481782px 0 1px rgba(255,0,80,0.3), 0 0 3px;}
    95% {text-shadow: 2.1841838852799786px 0 1px rgba(0,30,255,0.5), -2.1841838852799786px 0 1px rgba(255,0,80,0.3), 0 0 3px;}
    100% {text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.5), -2.6208764473832513px 0 1px rgba(255,0,80,0.3), 0 0 3px;}
}

@keyframes imageShadow {
    0% {filter: drop-shadow(0.4389924193300864px 0 1px rgba(0,30,255,0.5));}
    5% {filter: drop-shadow(-2.7928974010788217px 0 1px rgba(255,0,80,0.3));}
    10% {filter: drop-shadow(0.02956275843481219px 0 1px rgba(0,30,255,0.5));}
    15% {filter: drop-shadow(-0.40218538552878136px 0 1px rgba(255,0,80,0.3));}
    20% {filter: drop-shadow(3.4794037899852017px 0 1px rgba(0,30,255,0.5));}
    25% {filter: drop-shadow(-1.6125630401149584px 0 1px rgba(255,0,80,0.3));}
    30% {filter: drop-shadow(0.7015590085143956px 0 1px rgba(0,30,255,0.5));}
    35% {filter: drop-shadow(-3.896914047650351px 0 1px rgba(255,0,80,0.3));}
    40% {filter: drop-shadow(3.870905614848819px 0 1px rgba(0,30,255,0.5));}
    45% {filter: drop-shadow(-2.231056963361899px 0 1px rgba(255,0,80,0.3));}
    50% {filter: drop-shadow(0.08084290417898504px 0 1px rgba(0,30,255,0.5));}
    55% {filter: drop-shadow(-2.3758461067427543px 0 1px rgba(255,0,80,0.3));}
    60% {filter: drop-shadow(2.202193051050636px 0 1px rgba(0,30,255,0.5));}
    65% {filter: drop-shadow(-2.8638780614874975px 0 1px rgba(255,0,80,0.3));}
    70% {filter: drop-shadow(0.48874025155497314px 0 1px rgba(0,30,255,0.5));}
    75% {filter: drop-shadow(-1.8948491305757957px 0 1px rgba(255,0,80,0.3));}
    80% {filter: drop-shadow(0.0833037308038857px 0 1px rgba(0,30,255,0.5));}
    85% {filter: drop-shadow(-0.09769827255241735px 0 1px rgba(255,0,80,0.3));}
    90% {filter: drop-shadow(3.443339761481782px 0 1px rgba(0,30,255,0.5));}
    95% {filter: drop-shadow(-2.1841838852799786px 0 1px rgba(255,0,80,0.3));}
    100% {filter: drop-shadow(2.6208764473832513px 0 1px rgba(0,30,255,0.5));}
}

@keyframes rotating {
    from {
        -ms-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    to {
        -ms-transform:rotate(360deg);
        transform:rotate(360deg);
    }
}

@media screen and (max-width: 760px) {
    html {
        font-size:0.8em !important;
    }

    .folderSystem > img {
        width:100% !important;
        max-width:100% !important;
        height:auto !important;
    }

    .backgroundElements > .rotatingIcon {
        width:100px !important;
        height:100px !important;
        top:-50px !important;
        right:-50px !important;
    }
}