/*FONTS*/

@font-face {
    font-family: 'Amazon-Ember-Reg';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/Amazon-Ember.woff') format('woff');
}

@font-face {
    font-family: 'Amazon-Ember-Md';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/Amazon-Ember-Medium.woff') format('woff');
}
    

@font-face {
    font-family: 'Amazon-Ember-Bold';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/Amazon-Ember-Bold.woff') format('woff');
}


/*COMMON STYLES*/

body {
    margin: 0;

    background-color: black;
}

.content-wrapper {
    margin: 0 auto;
    max-width: 530px;
}

.content-wrapper > * {
    width: 100%;
    box-sizing: border-box;
}

img {
    display: block;
    max-width: 100%;
    height: auto;

    margin: 0 auto;
}

/*CSS Variables*/

:root {
    --header-footer-bg: #131921;
    --text-block-bg-dark: #232F3E;
    --block-bg-light: #FFFFFF;

    --font-dark: #252F3D;
    --font-light: #FFFFFF;
    --font-black: black;

    --btn-main: #FDD612;

    --amazon-orange: #FF9900;
}

/*HEADER*/

.header {
    background: var(--header-footer-bg);
    padding-top: 16px;
    padding-bottom: 11px;

    color: var(--font-light);
}

/*IMG-BLOCKS*/

.img-block {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.img-block--full .img-block__img {
    width: 100%;
    height: 100%;
}

.img-block--full-2 .logo {
    position: absolute;
    top: 19px;
}

.img-block--paddings {
    background-color: var(--block-bg-light);
}

.img-block--paddings-1 {
    padding: 18px 18px 25px 18px;
    gap: 18px;
}

.img-block__img-with-text-cont {
    position: relative;

    display: flex;
    justify-content: center;
}

.img-block__img-with-text-cont .text-block__text {
    position: absolute;
    bottom: 15px;

    color: var(--font-light);
}

.img-block--paddings-4 {
    gap: 24px;
}

.img-block--paddings-4, .img-block--paddings-6 {
    padding: 24px 18px;
    gap: 24px;
}

.img-block--paddings-5 {
    padding: 18px;
    padding-bottom: 25px;
    gap: 18px;
}

.img-block__img-with-links-cont {
    position: relative;

    display: flex;
    justify-content: center;
}

.img-block__img-with-links-cont .app-links-block {
    margin-bottom: 15px;
}

.img-block--paddings-6 .text-block__text:nth-of-type(1) {
    font-size: 22px;
}

.img-block--paddings-6 .text-block__text:nth-of-type(2) {
    font-family: Amazon-Ember-Reg;
    font-size: 24px;
}

.img-block--full-3 .btn-block {
    position: absolute;
    bottom: 16px;
}

/*APP LINKS*/

.img-block--full-1 .app-links-block {
    margin-bottom: 7px;
}

.app-link {
    border-radius: 15px;
}

.app-links-block {
    max-width: 100%;
    position: absolute;
    bottom: 0;

    gap: 33px;

    display: flex;
    justify-content: center;
}

/*TEXT BLOCKS*/

.text-block--dark {
    background: var(--text-block-bg-dark);
    color: var(--font-light);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.text-block--dark {
    padding: 18px 0;
}

.text-block__text {
    font-family: Amazon-Ember-Md;
    font-size: 26px;
    line-height: 34px;

    text-align: center;
}

.text-block--dark-2 {
    gap: 14px;
}

.img-block--paddings-5 .text-block__text {
    font-size: 24px;
}

.img-block--paddings-5 .text-block__text:nth-of-type(1), 
.img-block--paddings-5 .text-block__text:nth-of-type(2) {
    font-family: Amazon-Ember-Reg;
}

.img-block--paddings-5 .text-block__text:nth-of-type(3) {
    font-family: Amazon-Ember-Bold;
    line-height: 30px;

    display: flex;
    flex-direction: column;
}

.img-block--paddings-5 .text-block__text:nth-of-type(3) span:nth-child(1) {
    color: #3662A1;
}

.img-block--paddings-5 .text-block__text:nth-of-type(3) span:nth-child(2) {
    color: var(--amazon-orange);
}

/*GIFS*/

.gifs-block {
    background-image: url('../imgs/bg_blue.webp');
    background-position: center center;
    background-size: 100% auto;
    background-repeat: no-repeat;

    padding: 29px 18px 13px 18px;
    gap: 18px;
}

@media (max-width: 430px) {
    .gifs-block {
        background-size: 100% 100%;
    }
}

.gifs-block .text-block__text {
    color: var(--font-light);
}

.gifs-block .text-block__text:nth-of-type(1) {
    font-family: Amazon-Ember-Bold;
    font-size: 22px;
}

.gifs-block .text-block__text:nth-of-type(2) {
    font-family: Amazon-Ember-Reg;
    font-size: 24px;
}

.gifs-block__wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;

    column-gap: 16px;
    row-gap: 45px;
    margin-top: 10px;
}

.gifs-block__gif-cont {
    position: relative;
}

.gifs-block__logo {
    position: absolute;
}

.gif-diamonds-logo {
    top: -35px;
    right: 20px;
}

.gif-chicken-logo {
    top: -20px;
    right: 25px;
}

.gif-bass-logo {
   top: -35px;
   right: 35px; 
}

.gif-rabbit-logo {
   top: -40px;
   right: 30px; 
}

.gifs-block__gif {
    width: 170px;
    height: 116px;

    object-fit: cover;

    border: 1px solid white;
}

/*BUTTONS*/

.btn-block__btn {
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: var(--btn-main);
    border-radius: 30px;

    text-decoration: none;
    color: var(--font-black);
    outline: none;
    cursor: pointer;

    font-family: Amazon-Ember-Reg;
    font-size: 22px;

    width: 317px;
    height: 47px;

    transition: all 0.4s ease;
}

/*FOOTER*/

.footer {
    background: var(--header-footer-bg);

    padding-top: 24px;
    padding-bottom: 12px;

    color: var(--font-light);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.footer__logo {
    width: 145px;
    height: 80px;
}

.footer .text-block__text {
    font-family: Amazon-Ember-Reg;
    font-size: 24px;
}

/*HOVERS*/

.app-link {
    display: inline-block;
    transition: all 0.4s ease;
}

.app-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 20px rgb(236, 162, 51);
    filter: brightness(1.1);
}

.btn-block__btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 25px rgba(253, 214, 18, 0.6);
    filter: brightness(1.1);
}

.img-block--paddings-4 .btn-block__btn:hover{
    box-shadow: 0 0 20px rgba(30, 79, 148, 0.8);
    filter: brightness(1.08);
}