:root, :root.normal {
    --primary: #121221;
    --secondary: #34143d;
    --highlight: #E6004F;
    --light: #fff6f2;
    --cyan: #00ffff;
    --accent: #35435e;
    background: #251025 url(img/bg_1.png);
    background-size: 20%;
    .toggle {display:inherit};
}

:root.access {
    --primary: #596077;
    --secondary: #322e55;
    --highlight: #bdbed8;
    --light: #fff0e7;
    --cyan: #89f7ff;
    --accent: #9cafd4;
    background:#1a1a22;
    background-size: 20%;
    .toggle {display:none;}
    .cyan {animation: none; border:3px solid var(--highlight)}
    .slide {width: 100%; animation: none !important; overflow-x: scroll;}
}

.cyan {
    animation: border 4s;
    animation-iteration-count: infinite;
    position: relative;
}

p {margin:10px;}
p::before {content: "» ";}

a {color:var(--cyan); transition: ease 0.2s;}
a:hover {font-weight: bold; letter-spacing: 2px; transition: ease 0.2s;}

.contain {
    width: 70%;
    margin: auto;
    justify-content: center; 
    display: flex;
}

.linkm {
    background:#2e163d;
    transition: ease 0.5s;
}

.linkm:visited {
    box-shadow: inset -5 0 0 var(--cyan);
}

.linkm:hover {
    color:white;
    animation: spin1 0.3s, spin2 6s;
    animation-delay: 0s, 0.4s;
    animation-iteration-count: 1, infinite;
    transition: ease 0.2s;
    text-indent: 5px;
}

.center {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    margin:0;
    width: 100%;
}


    /*animations*/
@keyframes openx {
    from {opacity: 0; margin-left: 0;}
    to {opacity: 1; margin-left: 20px;}
}
@keyframes openy {
    from {opacity: 0; 
    margin-top: 0px;}
    to {opacity: 1;
        margin-top: 3px;}
}

@keyframes liste {
    0% {list-style-type:'›  ';}
    50% {list-style-type:'› ';}
    100% {list-style-type:'›  ';}
}
@keyframes bounce {
    0% {bottom:-6px;}
    50% {bottom:6px;}
    100% {bottom:-6px;}
}

@keyframes ZOOM {
    0% {left:-20%;}
    100% {left: 120%; transform:rotate(360deg)}
}

@keyframes slide {
    0% {left:-60%;}
    100% {left: 60%;}
}

@keyframes warn {
    from {top: -100%;}
    to {top:6%;}
}

@keyframes border {
    0% {border: 3px var(--highlight) inset; border-top: var(--cyan) 3px solid;}
    25% {border: 3px var(--highlight) inset; border-right: var(--cyan) 3px solid;}
    50% {border: 3px var(--highlight) inset; border-bottom: var(--cyan) 3px solid;}
    75% {border: 3px var(--highlight) inset; border-left: var(--cyan) 3px solid;}
    100% {border: 3px var(--highlight) inset; border-top: var(--cyan) 3px solid;}
}

@keyframes spin1 {
    from {box-shadow: 0px 0px 0px 0px var(--cyan);}
    to {box-shadow: 0px 0px 0px 7px var(--cyan);}
}

@keyframes spin2 {
    0% {box-shadow: 0px 0px 0px 7px var(--cyan);}
    4.9% {box-shadow: 0px 0px 0px 7px var(--cyan);}

    5% {box-shadow: -7px 0px 0px 0px var(--cyan)}
    9.9% {box-shadow: -7px 0px 0px 0px var(--cyan);} /*left*/

    10% {box-shadow: 7px 0px 0px 0px var(--cyan);} /*right*/
    14.9% {box-shadow: 7px 0px 0px 0px var(--cyan);}

    15% {box-shadow: 0px 7px 0px 0px var(--cyan);} /*down*/
    19.9% {box-shadow: 0px 7px 0px 0px var(--cyan);}
    
    20% {box-shadow: 0px -7px 0px 0px rgb(0, 255, 255);} /*up*/
    24.9% {box-shadow: 0px -7px 0px 0px var(--cyan);}


    25% {box-shadow: 0px 7px 0px 0px var(--cyan);}
    29.9% {box-shadow: 0px 7px 0px 0px var(--cyan);}

    30% {box-shadow: -7px 0px 0px 0px var(--cyan);}
    34.9% {box-shadow: -7px 0px 0px 0px var(--cyan);}

    35% {box-shadow: 0px -7px 0px 0px var(--cyan);}
    39.9% {box-shadow: 0px -7px 0px 0px var(--cyan);}

    40% {box-shadow: 7px 0px 0px 0px var(--cyan);}
    44.9% {box-shadow: 7px 0px 0px 0px var(--cyan);}
    
        45% {box-shadow: 0px 7px 0px 0px var(--cyan);}
        45.9% {box-shadow: 0px 7px 0px 0px var(--cyan);}

        46% {box-shadow: -7px 0px 0px 0px var(--cyan);}
        46.9% {box-shadow: -7px 0px 0px 0px var(--cyan);}

        47% {box-shadow: 0px -7px 0px 0px var(--cyan);}
        47.9% {box-shadow: 0px -7px 0px 0px var(--cyan);}

        48% {box-shadow: -7px 0px 0px 0px var(--cyan);}
        48.9% {box-shadow: -7px 0px 0px 0px var(--cyan);}


    50% {box-shadow: 0px 0px 0px 7px var(--cyan);}
    54.9% {box-shadow: 0px 0px 0px 7px var(--cyan);}

    55% {box-shadow: 0px 7px 0px 0px var(--cyan);}
    59.9% {box-shadow: 0px 7px 0px 0px var(--cyan);}

    60% {box-shadow: 0px -7px 0px 0px var(--cyan);}
    64.9% {box-shadow: 0px -7px 0px 0px var(--cyan);}

    65% {box-shadow: 0px 7px 0px 0px var(--cyan);}
    69.9% {box-shadow: 0px 7px 0px 0px var(--cyan);}

    70% {box-shadow: 0px -7px 0px 0px var(--cyan);}
    74.9% {box-shadow: 0px -7px 0px 0px var(--cyan);} /*okey*/


    75% {box-shadow: 0px 7px 0px 0px var(--cyan);}
    79.9% {box-shadow: 0px 7px 0px 0px var(--cyan);}

    80% {box-shadow: 0px 0px 0px 7px var(--cyan);}
    84.9% {box-shadow: 0px 0px 0px 7px var(--cyan);}

    85% {box-shadow: 0px 0px 0px 0px var(--cyan);}
    89.9% {box-shadow: 0px 0px 0px 0px var(--cyan);}

    90% {box-shadow: 0px 0px 0px 7px var(--cyan);}
    94.9% {box-shadow: 0px 0px 0px 7px var(--cyan);}
    
    95% {box-shadow: 0px 0px 0px 0px var(--cyan);}
    100% {box-shadow: 0px 0px 0px 0px var(--cyan);}
}