@import '../fonts/RussoOne/stylesheet.css';
@import '../fonts/Spider-Man/stylesheet.css';

:root {
    --black: #000000;
    --white: #ffffff;
    --dark-gray: #222222;
    --deep-blue: #403E93;
    --light-pink: #EC9DF9;
    --bright-red: #FF2D2D;
    --vivid-blue: #093FFF;
    --teal: #13A39A;
    --hot-pink: #F21198;

    --container-color: var(--black);
    --bg-color: var(--dark-gray);
    --morales-color: var(--deep-blue);
    --gwen-color: var(--light-pink);
    --parker-color1: var(--bright-red);
    --parker-color2: var(--vivid-blue);
    --pig-color: var(--teal);
    --penny-color: var(--hot-pink);
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 25px;
}

body {
    background-color: var(--bg-color);
}

h1 {
    font-family: 'sm-spider-man';
    font-size: 3rem;
    line-height: 3rem;
}

h2 {
    font-size: 2rem;
    line-height: 2rem;
}

h3 {
    font-size: 1rem;
    line-height: 1rem;
}

.site-container {
    width: 100%;
    max-width: 1000px;
    padding: 40px;
    margin: 0 auto;
    background-color: var(--container-color);
}

/* Верхняя часть */
.header {
    display: flex;
    align-items: flex-end;

    width: 100%;
    height: 700px;
    background: url('../img/header.png') center / cover no-repeat;
}

.header__title {
    width: 50%;
    padding: 50px;

    background-color: var(--container-color);
    color: var(--white);
}

/* Таблица */
.main {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(11, 200px);
    gap: 20px;
    padding-block: 20px;

    grid-template-areas: "morales morales gwen gwen"
        "parker parker gwen gwen"
        "parker parker pig ."
        "noir penny penny robot"
        "noir trio trio trio"
        "all all all all"
        "all all all all"
        ". versus versus versus"
        "pahan pahan pahan fall"
        "pahan pahan pahan fall"
        "pahan pahan pahan ."
    ;
}

/* Ячейки */
.main__item {
    display: flex;
    padding: 20px;
}

.main__morales {
    background: url("../img/morales.png") center / cover no-repeat;
    grid-area: morales;
}

.main__gwen {
    background: url("../img/gwen.png") center / cover no-repeat;
    grid-area: gwen;
}

.main__parker {
    background: url("../img/parker.png") center / cover no-repeat;
    grid-area: parker;
}

.main__pig {
    background: url("../img/spiderpig.png") center / cover no-repeat;
    grid-area: pig;
}

.main__noir {
    background: url("../img/noir.png") center / cover no-repeat;
    grid-area: noir;
    position: relative;
}

.main__penny {
    background: url("../img/penni.png") center / cover no-repeat;
    grid-area: penny;
}

.main__robot {
    background: url("../img/spiderbot.png") center / cover no-repeat;
    grid-area: robot;
}

.main__trio {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 
                url("../img/trio.png") center / cover no-repeat;
    grid-area: trio;

    align-items: flex-end;
    justify-content: flex-end;
    
    color: var(--white);
    text-align: right;
}

.main__all-tem {
    background: url("../img/allteam.png") center / cover no-repeat;
    grid-area: all;
    position: relative;
}

.main__versus {
    background: url("../img/versus.png") center / cover no-repeat;
    grid-area: versus;

    justify-content: flex-end;
    align-items: flex-end;
    text-align: right;

    color: var(--white);
}

.main__kingpin {
    background: url("../img/kingpin.png") center / cover no-repeat;
    grid-area: pahan;
}

.main__free-fall {
    background: url("../img/freefall.png") center / cover no-repeat;
    grid-area: fall;
}

/* Текст ячеек */
.main__text {
    /* display: none; */
    font-family: 'sm-russoone';
    font-size: 50px;
}

.main__morales-text {
    color: var(--morales-color);
    text-shadow: 5px 5px 0px var(--black);
}

.main__gwen-text {
    color: var(--white);
    text-shadow: -5px 5px 0px var(--gwen-color);
    margin-left: auto;
}

.main__parker-text {
    color: var(--parker-color1);
    text-shadow: 4px 4px 0px var(--parker-color2);
    align-self: flex-end;
}

.main__pig-text {
    font-size: 25px;
    color: var(--white);
    text-shadow: 5px 5px 0px var(--pig-color);
    margin-left: auto;
    align-self: flex-end;
}

.main__noir-text {
    color: var(--black);
    text-shadow: 5px -4px 0px var(--white),
        -5px 5px 0px var(--white);

    width: 400px;
    text-align: center;
    white-space: nowrap;

    position: absolute;
    left: 20px;
    transform-origin: 20px 20px;
    transform: rotate(90deg);
}

.main__penny-text {
    color: var(--penny-color);
    text-shadow: 5px 5px 0px var(--white);
    align-self: flex-end;
    margin-inline: auto;
}

.main__robot-text {
    font-size: 25px;
    color: var(--white);
    text-shadow: 5px 4px 0px var(--penny-color);
    margin-left: auto;
    align-self: flex-end;
    text-align: right;
}

.main__all-tem > .main__text {
    width: 50%;
    height: 100%;

    padding: 100px 40px;

    position: absolute;
    top: 0;
    left: 0;

    color: var(--white);
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(20px);
}