@font-face {
  font-family: Kurwa; /* set name */
  src: url(./Granix.woff);
}

@font-face {
  font-family: Karmafuture; /* set name */
  src: url(./karma.future-regular.woff);
}

@font-face {
  font-family: Karmasuture; /* set name */
  src: url(./karma.suture-regular.woff);
}

a:link {
  color: rgb(255, 255, 255);
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: rgb(255, 255, 255);
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: #ff009d;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: #ffd000;
  background-color: transparent;
  text-decoration: underline;
}

body {
	color:#dfdfdf;
	background-color:#079bff;
	margin:0;
    background-image: url(/img/bgblend.jpg);
    background-repeat: no-repeat;
    background-size: 100% 300%;
}

.fullbox {
    border: 2px solid #161616;
    width: 1000px;
    display: flex;
    padding: 20px;
    flex-direction: column;
}

.navvbox {
    border-radius: 1px;
    color: #dfdfdf;
    font-family: Karmasuture;
    background: rgb(51 51 51 / 55%);
    box-shadow: 2px 2px #ff009d;
    overflow: hidden;
    width: 980px;
    height: 32px;
    padding: 3px;
    text-align: center;
    align-content: center;
    word-spacing: 20px;
}

.bigoiltitle {
    width: 800px;
    height: auto;
    padding-bottom: 100px;
    padding-top: 100px;
}

.dalegif {
    width: 400px;
    height: auto;
}

.crv {
    width: 300px;
    height: auto;
}

.pops {
    width: 500px;
    height: auto;
    animation: tilt-jump 0.8s infinite ease-in-out;
}

@keyframes tilt-jump {
  0% {  transform: translateY(-5px) rotate(-1deg);}
  50% { transform: translateY(5px) rotate(0deg);}
  100% { transform: translateY(-5px) rotate(-1deg);}
}

a img {
	border:none;
}

.maintitle {
    color: #ffffff;
    font-family: Kurwa;
    letter-spacing: 2px;
    font-size: 60px;
    text-shadow: 4px 4px #ff009d;
    padding-bottom: 50px;
    padding-top: 50px;
}

.sndtitle {
    color: #ffffff;
    font-family: Karmasuture;
    letter-spacing: 2px;
    font-size: 50px;
    text-shadow: 4px 4px #ff009d;
    padding-bottom: 50px;
    padding-top: 50px;
}

.animated-rainbow {
    font-size: 42px;
    font-family: Kurwa;
    animation: rainbow-color-change 2s linear infinite alternate;
    text-shadow: 
                 3px 3px 0 rgb(72 0 0),
                 4px 4px 0 rgb(96 0 67),
                 5px 5px 0 rgb(96 0 67),
                 6px 6px  0 rgb(96 0 67),
                 7px 7px 6px rgba(0,0,0,0.43),
                 7px 7px 1px rgba(0,0,0,0.5),
                 0px 0px 6px rgba(0,0,0,.2);
   
}

.animated-rainbow2 {
    font-size: 42px;
    font-family: Kurwa;
    animation: rainbow-color-change 2s linear infinite alternate;
    text-shadow: 
                 3px 3px 0 rgb(72 0 0),
                 4px 4px 0 rgb(96 0 67),
                 5px 5px 0 rgb(96 0 67),
                 6px 6px  0 rgb(96 0 67),
                 7px 7px 6px rgba(0,0,0,0.43),
                 7px 7px 1px rgba(0,0,0,0.5),
                 0px 0px 6px rgba(0,0,0,.2);
   
}

.constant-tilt-shake {
  animation: tilt-shaking 2s infinite ease-in-out;
}

.constant-zoom {
  animation: zoom 1.5s infinite ease-in-out;
}

@keyframes zoom {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes tilt-shaking {
  0% { transform: rotate(-1deg); }
  50% { transform: rotate(1deg); }
  100% { transform: rotate(-1deg); }
}

@keyframes rainbow-color-change {
    0%, 100% { color: #ff0000; } /* Red */
    14% { color: #ff8b00; } /* Orange */
    28% { color: #e8ff00; } /* Yellow */
    42% { color: #5dff00; } /* Green */
    56% { color: #00b9ff; } /* Blue */
    70% { color: #5d00ff; } /* Indigo */
    84% { color: #e800ff; } /* Violet */
}

.fuel-price {
    font-family: Karmasuture;
    font-size: 30px;
    letter-spacing: 2px;
}

.sidebygrid {
    display: inline-flex;
    align-items: flex-end;
    flex-direction: column;
}

.megagrid {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: space-evenly;
    padding-bottom: 50px;
}

.box {
    width: 600px;
    border: 4px solid rgb(51 51 51 / 55%);
    background-color: #e7bd00;
    color: #0a0a0a;
    margin: 6px;
    display: grid;
}

.boxbuy {
    width: 450px;
    height: 104px;
    border: 4px solid rgb(51 51 51 / 55%);
    background-color: #e7bd00;
    color: #0a0a0a;
    margin: 6px;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
}

footer {
    text-align: center;
    padding-top: 100px;
}

.spacer {
    padding: 3px;
    background-color: rgb(51 51 51 / 55%);
    box-shadow: 2px 2px #ff009d;
    height: 32px;
    width: 980px;
}

.spacerthin {
    background-color: rgb(51 51 51 / 55%);
    box-shadow: 1px 1px #ff009d7a;
    height: 3px;
    width: 600px;
}

@media screen and (max-width: 1000px) {

    .fullbox {
        width: 92vw;
    }

    .navvbox {
        width: 90vw;
    }

    .pops {
        width: 400px;
        height: auto;
    }

    .crv {
        width: 300px;
        height: auto;
    }

    .maintitle {
        font-size: 90px;
    }

    .sndtitle {
        font-size: 50px;
    }

    .bigoiltitle {
        width: 920px;
        height: auto;
    }

    .fuel-price {
        font-size: 40px;
    }

    .box {
        width: 640px;
        height: 320px;
    }

    .boxbuy {
        width: 220px;
        height: 150px;
    }

    .spacer {
        width: 90vw;
    }
}