/* Fonts */
@font-face {
    font-family: awesome;
    src: url("../fonts/awesome.ttf");
}

@font-face {
    font-family: cutie;
    src: url("../fonts/cutie.ttf");
}

* {
    margin: 0;
}

/* root */
:root {
    --main-bg-color: red;
    --btn-color: rebeccapurple;
    --btn-primary-color: #16ca0c;
    --btn-secondary-color: #dd3a1a;
    --btn-vanessa-color: #48e240;
    --btn-tamino-color: #9b1cb8;
    --btn-ok-color: #3bb2da;
    --btn-try-color: #dfca2b;
}

body {
    background-color: var(--main-bg-color);
    background-image: url("../assets/bg.webp");
}

/* Page */
.start {
    display: flex;
    justify-content: center;
    font-family: cutie;
    font-size: 30px;
    gap: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.start img {
    border-radius: 25px;
    max-width: 350px;
    max-height: 350px;
}

.end {
    display: flex;
    justify-content: center;
    font-family: Arial;
    font-size: 25px;
    gap: 50px;
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.btn {
    padding: 10px 25px 10px 25px;
    background-color: rebeccapurple;
    color: white;
    border-radius: 10px;
    transition: transform 0.25s;
}

.btn:hover {
    transform: scale(1.06);
    transition: transform 0.25s;
    cursor: pointer;
}

.btn.green {
    background-color: var(--btn-primary-color);
}

.btn.red {
    background-color: var(--btn-secondary-color);
}

.btn.vanessa {
    background-color: var(--btn-vanessa-color);
}

.btn.tamino {
    background-color: var(--btn-tamino-color);
}

.btn.ok {
    background-color: var(--btn-ok-color);
}

.btn.try {
    background-color: var(--btn-try-color);
}