:root {
  --win-bg: #ced0ce;
  --win-white: #ffffff;
  --win-gray: #808080;
  --win-black: #050505;
  --win-light-gray: #c0c0c0;
}

@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');

body{
    background-image: url(background.webp);
}

.box{
    max-width: 1000px;
    margin: 20px auto 30px;
    display: grid;
    grid-gap: 5px 10px;
    grid-template-columns: 200px minmax(0,1fr);
    font-family: "Courier New";
}

.headercontainer, .navigationBar, main, footer, .startMenu, .boxclock {
    background: var(--win-bg);
    margin-right: 2px;
    padding: 3px 8px;
    position: relative;
    top: 2px;
    border-top: 2px solid var(--win-white);
    border-left: 2px solid var(--win-white);
    border-right: 2px solid var(--win-gray);
    border-bottom: 2px solid var(--win-gray);
    
}

.blinkies-container {
    border: white 1px dashed;
    background:linear-gradient(to right,pink,purple);
    display: flex;
    flex-wrap: nowrap; 
    justify-content: center;
    overflow: hidden;
    margin-top: 5px;
    margin-right: 2px;
}

.blinkies {
    display: flex;
    flex-wrap: nowrap; 
    flex-shrink: 0;
    justify-content: center;
    overflow: hidden;
    animation: scroll-blinkies 100s linear infinite;
}

@keyframes scroll-blinkies {
    0% {
    transform: translateX(54%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.blinkies img {
    margin: 3px 1px;
    height: 20px;
    width: auto;
    object-fit: scale-down;
    image-rendering: pixelated;
}

header {

    grid-row: 1/2;
    grid-column: 1/3;  
    overflow: hidden;
    flex-wrap: nowrap;
}

.titlebar{
    background:linear-gradient(to right,#9700e4,#1f0e44);
    color:white;
    padding:4px 8px;
    font-weight:bold;
    display:flex;
    justify-content:space-between;
    margin: auto -5px;
}

.animatedHeader {
    flex-wrap: nowrap;
    margin-left: -200px;
    animation: scroll-left 15s linear infinite; 
}

@keyframes scroll-left {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-75%);
  }
}

.titleHeader {
    color:#ffffff;
    font-size: 30px;
}

.titleHeader img {
    height: 100px;
    width: auto;
}

nav {
    grid-row: 2/3;
    grid-column: 1/2;
    height: max-content;
}

.navigationStuff{
    margin-left: 5px;
}

.navBlinkiesBox {
    border: white 1px dashed;
    background:linear-gradient(to right,pink,purple);
    flex-wrap: wrap;
    height: 250px;
    overflow: hidden;
    margin: 10px auto;
    margin-right: 2px;
}

.navBlinkies {
    overflow: hidden;
    flex-wrap: wrap;
    text-align: center;
    margin: 10px auto;
    animation: up-down 40s linear infinite;
}

@keyframes up-down {
  0% {
    transform: translateY(15%);
  }
  100% {
    transform: translateY(-100%);
  }
}

.navBlinkies img {
    width: 90px;
    height: auto;
    
}

main {
    grid-row: 2/3;
    grid-column: 2/3;
    height: max-content;
}

main img {
    height: 120px;
    margin-right: 1px;
    margin-bottom: 20px;
}

.olive {
    color: #336601;
}

.purple {
    color: #1f0e44;
}

.yellow {
    color: #dda10f;
}

.derse {
    color: #9700e4;
}

.imageMain {
    display:flex;
    justify-content:space-between;
    margin-top: -90px;
}

footer {
    grid-row: 3/4;
    grid-column: 1/3;
    width: auto;
    display:flex;
    justify-content:space-between;
    font-size: 15px;
}

.snare {
    margin-top: 5px;
}

.boxclock {
    margin-bottom: 4px;
}

.clock {
    display: inline-block;
}

.buttombox {
    height: 31px;
    width: 88px;
    overflow: hidden;
}

.buttoms img{
    height: 31px;
    width: 88px;
}

.buttoms {
    animation: buttom 60s linear infinite;
}

@keyframes buttom {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0%);
    }
}
}