/*--- theme by  created summer 2022
        modified oct 2026
---*/

/*---COLORS---*/
:root, [data-theme="original"] {
  --alertcolor:#d40000;
  --bgcolor:#ece9d8;
  --maincolor:#003bda;
  --filter:url(#duotone-blue);
  --img-hover: none;
}

[data-theme="light"] {
  --alertcolor:#d40000;
  --bgcolor:#eee;
  --maincolor:#000;
  --filter:grayscale(1);
  --img-hover: none;
}

[data-theme="dark"] {
  --alertcolor:#a60000;
  --bgcolor:#000;
  --maincolor:#666;
  --filter:grayscale(1) brightness(0.25);
  --img-hover: brightness(0.5);
}

::selection{
    background-color: var(--maincolor);
    color:var(--bgcolor);
}

@font-face
{
    font-family:Tahoma;
    src: url('./assets/Fonts/windows-xp-tahoma.otf');
}

html{
    overscroll-behavior:none;
}

html::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1; 
  pointer-events: none;
  background-image: url('./assets/Wallpapers/robot.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  filter: var(--filter);
}



body{
    margin:0;
    border-color:var(--maincolor);
    color:var(--maincolor);
    font-family:'Tahoma';
    font-size:1.5vw;
    line-height: 1em;
    overflow-y: scroll;
    overflow-x: hidden;
}

#scrolling{
    display:inline;
    position:absolute;
    min-height: calc(100vh - 5em);  
    margin-left:30vw;
    margin-top:5vh;
    width: 40vw;
    text-align: justify ;
    padding-bottom:1.5em;
}

#sidebar-left{
    position:fixed;
    margin-left:14vw;
    margin-top:5vh;
    width:13vw;
    text-align:left;
    & img{
        filter: var(--filter);
    }
}

#sidebar-right{
    position:fixed;
    margin-left:73vw;
    margin-top:5vh;
    width:13vw; 
    text-align:left;
}


#left{
    vertical-align: top;
    display:inline-block;
    position:relative;
    width:49.25%;
    margin-left:0;
    margin-right:0.75%
}

#right{
    display:inline-block;
    position:relative;
    width:49.25%;
    margin-right:0;

}

.windowframe{
    padding-top:5px;
    padding-bottom:3px;
    background-color:var(--maincolor);
    margin-bottom:20px;
}

.windowtitle{
    width:auto;
    text-align:left;
    color:var(--bgcolor);
    margin-left:4px;
    margin-right:4px;
    font-size: 1.1em;
    text-transform: uppercase; 
}

.nav{
    text-align: center;
    a{
        text-decoration: none;
    }
}

.button{
    width:auto;
    margin-top:2px;
    padding:2px;
    border:1px solid;
    background: var(--bgcolor);
    text-transform: lowercase;
    &:hover{
        border-color: var(--maincolor);
        background-color: var(--maincolor);
        color: var(--bgcolor)
    }
}

.content{
    border:1px solid;
    margin-left:3px;
    margin-right:3px;
    margin-top:3px;
    padding-bottom:5px;
    padding-top:2px;
    padding-left:2px;
    padding-right:4px;
    max-width:inherit;
    background-color: var(--bgcolor);
    color:var(--maincolor);
    & img{
        float:center;
        width: 100%;
        border:1px solid;
    }
}

img {
  filter: var(--filter);
  &:hover {
    filter: var(--img-hover) !important;
  }
}

code{
    font-size: 0.5em;
    line-height: 0.5;
}

.button-jar{
    & img{
        width:auto !important;
        vertical-align: middle;
    }
}

a{
    color: var(--maincolor);
    &:hover{
        color:var(--bgcolor);
        background-color: var(--maincolor);
        text-decoration: none;
    }
}

#player, .img2 {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: black;
    color: black;
    z-index: 999;
  }

.img1 {
    position: absolute;
    width:auto;
    height:100px;
    left: 55px;
    z-index: 800;
    border: 0px !important  ;
    -webkit-animation: spin 2s linear infinite;
    -webkit-animation: spin 4s linear infinite;
    -moz-animation: spin 4s linear infinite;
    animation: spin 4s linear infinite;
  }


@-moz-keyframes spin {
    100% {
      -moz-transform: rotate(360deg);
    }
  }

@-webkit-keyframes spin {
    100% {
      -webkit-transform: rotate(360deg);
    }
  }

@keyframes spin {
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

.img1:hover {
    /* this makes the cd stop spinning when hovering! */
    -webkit-animation: pop 0.3s ease;
  }