:root {
    --color: hwb(61 0% 0% / 0.363);
    ;
}

@font-face {
    font-family: "ComicSansMSBold";
    src: url("../fonts/ComicSansMSBold.woff") format("woff");
    font-style: normal;
    font-weight: 700;
}

@font-face {
    font-family: 'Onest';
    src:
        /* url('../fonts/Onest-SemiBold.woff') format('woff'), */
        url('../fonts/Onest-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
}

body {
    height: 100vh;
    background: url(./../images/2.jpg) repeat;
    background-size: contain;
}

.locked {
    overflow: hidden;
}

.container {
    position: relative;
    width: 960px;
    margin: 0 auto;
    padding: 15px 10px;
    /* background-color: #dacb0371; */
}

.content {
    display: flex;
    gap: 25px;
    margin-bottom: 30px;
}

.logo__image {
    overflow: hidden;
    background-image: url(../images/logo.png);
    background-size: cover;
    object-fit: contain;
    width: 327px;
    height: 327px;
    border: 5px solid #0000CD;
    border-radius: 98px;
    box-shadow: 8px 8px 15px var(--color);
    margin-bottom: 20px;
}

.title-box {
    padding: 10px;
    margin-bottom: 10px;
}

.title-h2 {
    color: #FFFF00;
    font-family: Arial;
    font-size: 32px;
    text-align: center;
}

.prime-text {
    color: #FFFFFF;
    line-height: 140%;
    font-family: "Onest";
    font-size: 20px;
}

.listing-text {
    color: #FFFFFF;
    line-height: 140%;
    font-family: "Onest";
    font-size: 16px;
}

.text-red {
    color: red;
}

.text-Lime {
    color: #00FF00;
}

.text-yellow {
    color: #FFFF00;
}

.text-turquoise {
    color: #00ffff;
}

.text-violet {
    color: #ff00f2;
}

.text-blue {
    color: #42aaff;
}

.text-mini {
    color: #fff;
    font-family: Arial;
    font-size: 14px;
}

.none {
    display: none;
}

.mb {
    margin-bottom: 20px;
}

.decor-box {
    width: 580px;
    min-height: 50px;
    border: 6px solid #0000CD;
    border-radius: 10px;
    background-color: #00000091;
    box-shadow: 8px 8px 15px var(--color);
}

.block {
    display: block;
}

.btn {
    display: block;
    width: 327px;
    margin: 0 auto;
    border: 1px solid #616161;
    border-bottom-color: #ffe600;
    border-right-color: #ffe601;
    border-radius: 5px;
    box-shadow: 1px 1px #ffff0091;
    padding: 12px 0px;
    color: #ffffff;
    font-family: Arial;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    box-shadow: 8px 8px 15px var(--color);
}

.btn-blue {
    background: linear-gradient(#0111fd, #000000 50%, #0111fd);
}

.btn-blue:hover {
    background: linear-gradient(#01e946, #000000 50%, #01e946);
}

.btn-blue:active {
    background: linear-gradient(#00c03a, #000000 50%, #00c03a);
    transform: translate(1px, 2px);
    transition: transform 50ms ease-in-out;
}

.btn-gray {
    background: linear-gradient(#868686, #000000 50%, #868686);
}

.marquee {
    width: 941px;
    border-radius: 5px;
    border: 2px solid yellow;
    background-color: #0000CD;
    color: #fff;
    font-family: Arial;
    font-weight: bold;
    font-size: 18px;
    padding: 1px;
    box-shadow: 8px 8px 15px var(--color);
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}

.marquee span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 12s linear infinite;
}

.marquee span:hover {
    animation-play-state: paused
}

/* Make it move */
@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}