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

:root {
  --btn-normal-inner-color: #8e8e8e;
  --btn-normal-border-color: #131313;
  --btn-normal-inner-border-lt-color: #f7f7f7bf;
  --btn-normal-inner-border-br-color: #656465;
  --btn-normal-text-color: #4c4c4c;
  --btn-normal-inner-hover-color: #218306;
  --btn-normal-border-hover-color: #fff;
  --btn-normal-inner-border-lt-hover-color: #17cd07bf;
  --btn-normal-inner-border-br-hover-color: #004e00;
  --btn-normal-text-hover-color: #fff;
}

body {
    overflow: hidden;
    margin: 0;
}

.main {
    display: grid;
    grid-template-columns: 3fr 1fr;
    font-family: "VT323", serif;
}

.cookie {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url(./images/bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 15rem;
}

.main .cookie .image img {
    width: 100%;
    cursor: pointer;
    transition: 0.25s;
    /* padding: 71% 0 71% 0; */
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter: drop-shadow(5px 5px 5px #222);
}

.image.active img{
    transform: scale(0.8);
}

.cookie .name{
    position: relative;
    font-size: 25px;
    color: white;
    top: 1%;
    margin: 0;
    background-image: url("https://puu.sh/g2wwB/8c3331482b.png");
}

.cookie .name h1 {
    margin: 10px;
}

.cookie a {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cookie p {
    margin: 0;
    margin-bottom: 20px;
    font-size: 30px;
    color: white;
}

.cookie img {
    width: 80%;
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter: drop-shadow(5px 5px 5px #222);
}

.cookie h2 {
    padding-top: 10%;
    margin: 0;
    font-size: 60px;
    color: white;
}


.shop{
    background-image: url(./images/wood.jpeg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 23%;
}

.shop .world a{
    display: flex;
    justify-content: center;
    align-items: center;
}

.shop .world h2 {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    top: -82px;
    left: 10px;
}

.shop .world img {
    width: 90%;
}

.case {
    display: grid;
    grid-template-columns: 1fr 3fr 2fr;
    justify-content: center;
    align-items: center;
    margin: 10px;
    padding: 20px;
    background: var(--btn-normal-inner-color);
    background-color: var(--btn-normal-inner-color);
    border: 1.5px solid var(--btn-normal-border-color);
    box-shadow: inset 1.5px 1.5px 0 var(--btn-normal-inner-border-lt-color), inset -1.5px -1.5px 0 var(--btn-normal-inner-border-br-color);
    color: black;
    text-decoration: none;
    transition: 0s;
    cursor: pointer;
    text-align: center;
    padding-bottom: 5px;
}

.case:hover {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMQAAAAPCAMAAACMV5AuAAAAVFBMVEVtd7ZteLZverdwerdwe7hxfLhyfbl0frl1f7p2gLt4grx6hLx7hb18hr5+iL+AisCBi8GCjMGEjsKGkMOHkcSIksSKk8WLlMWLlcaMlcaNlsePmMdwBHmVAAAEjElEQVRIx1WW27YbKw5F3Ul2GYTWFAJX+pyd///PfgDsTg0/mSqQ1k08AEAeDkAA7kXyDAeyu2QCWREgCGSvAAbIE/D9U2m8Ji4Drw0CEhP7EMiqBFxmDMBEkHvd5AziDsjoCKQXddUl1nuZgMZrf0PMdj1kgNY+Ay+CJPg8kj1rR3X/GS9kxaoJVFaB6QkxIX5TBX65mpAZGQH3HaoCFMj6/GxuYgDyTsyup1hfxwxVN+F08ANGANyf8jqAPaBpranJvhxV+VV08JGPVScmcL8W4EIuAFWFHMZrUkUfNC3WtIsEaFogMWJRl839MES61w1cjMUsI1fb7GKaoENMOdFNykzXPz2mlwekkXjV4ioO9b15rZWZd4AaCL9cxdSutl8buIOUkd8JTgAy01IKoFoFPhAZr65SbDHgxFIGKi5IpLaKdlafAHxaVWDt2SSZ24LQhEx6aLGyj7RtELDLiA7EiD72ehBiQJo5oPq1nOQMYGAIYoY2AwIrImaA+25P8vZRa0KgqrjnQIaACiom/1G9Sla3GUHVLl/mMl/mxeUPGT0T5seAeeAQtF9WV2F7cX4niJ4DYmBd12oh7jymyRkBuq6M81mQuExHVv313beo9VH3ojfM2zZ8AkTG8X7EeDs6OZw+mrY7E5l/gqQJmZx+YySQAi1/dqQZy0as4FL1d7nrcfd1kjWTX1ZIYESTUCnuPZE7+anrqcxlz3diUX2HowHCf15S3AvxrnhRxeMwtQACGYGKZ7wGjNl7vH73MHdP8s/vSXM0FiRqMnPowfbjRsfe6n7nZ/FGIyfgF6+A/t1XTrcWB3Q42AxkMOfMfuJotRPgqGqFMfB8KO6eN+BEpO8F2eLZ18YO0GUdmEDcXMcNey+XuOfvP5P35guSVxAzWRYUpIoSuZiJrJ/p4zPouw0pwX+6XwpIcyNWEcJ/uf5Svuyx+ncTfhmotEhIBPe/8f961F/jI5aQfSs3WFOwChnZZxPk+HQjZu/WBuDFVwobZnoLISBOdkmNLFPE9iadiImsgTcdTDKA8dj1qBT518Xcg6+6L0Yl/nqCLeH+b46InkCSETTBzEQBRoPEwS9lKVUkpEx426M3oIMHYQLhK/B6jHvgXw6if4+YM4mlJdWDpLw4MhHgjwBZgIt+ZJdAVENOEkiv6mY4yy5nFPjnQmGfGVy0IqP+cmbsWF7Se/rT+5ZBzHPdKfajHW2ouWldPJaoTDJ3GUYTNMV/IyaiPYqQuX0VPXK+ra3Mc8c5Wlkp4D/e5S5htjXU3HnPPJsBXraRM/rSpOMX99zMoVradRl9AMxJdVPIYgf8Rhu0DvLM739A5rmjJ51QcW9SFXjcvR85oYOhSKTsd65pqdKWIV59ZO/7kKTDJLbvYw9XVRIyTXKJdfm4rOjE18yT8IHM/euZa0Z0fLvBSIh7h925QLoXR80WNfnqOHHP7Qk5aj+dTLX4E3hhIkafoGd15/IDT/lPTVSVr233dy6OkJtiLm0yBu+byeE2Yc59pVrDdKyPjxgD4h6r6vcFwpYNHMxVBaE2ApmfyTTjf5jQnWRymG7iAAAAAElFTkSuQmCC);
  	border-color: #BDC6FF #59639A #59639A #BDC6FF;
}
.case h3 {
    margin: 0;
}

.case p {
    margin: 0;
    font-size: 20px;
}

.case img {
    width: 100%;
    transform: rotateY(3.142rad);
}

.title {
    display: flex;
    justify-content: center;
    align-items: center;
}

.sign {
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: auto;
    padding-top: 6px;
    margin: auto;
    cursor: pointer;
    background-image: url("https://puu.sh/g2wwB/8c3331482b.png");
    position: relative;
    overflow: hidden;
    background-size: cover;
    height: 100px;
    width: 200px;
    font-size: 35px;
    color: white;
    cursor:default;
    font-family: "VT323", serif;
}

@media (max-width: 1200px) {
        .shop .world h2 {
            top: -75px;
        }
}

@media (max-width: 768px) {

    body {
        overflow-y: auto;
    }

    .main {
        grid-template-columns: 1fr;
    }

    .image {
        padding-bottom: 35%;
    }

    .shop {
        padding-bottom: 0;
    }

    .shop .world h2 {
        top: -105px;
        left: 0px;
        font-size: 30px;
    }

}