@font-face {
    font-family: "vulf";
    src: url("../fonts/Vulf_Sans-Bold.woff2");
}

:root {
    --first-color: #3783de;
    --second-color: #ffa536;
    --third-color: white;
}

html,
body {
    margin: 0;
    height: 100svh;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    background-color: var(--third-color);
    color: var(--second-color);
    font-family: "Vulf", sans-serif;
    margin: 0 auto;
    text-align: center;
    width: 100%;
}

.break {
    flex-basis: 100%;
    height: 0;
}

.speech-bubble-out {
    position: relative;
    text-align: center;
    color: white;
}

.speech-bubble-bubble {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.speech-bubble-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #3783de;
}


.logo {
    font-size: 5vw;
    margin: 10px;
    color: var(--first-color);
    width: fit-content;
    align-content: center;
}

h2 {
    font-size: 2vw;
    margin: 10px;
}

p {
    box-sizing: border-box;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.row {
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-content: center;
    width: 90%;
    /* height: 30svh; */
}

.youtube {
    background-image: url("../images/tvoff.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.youtube:hover {
    background-image: url("../images/tvon.png");
    cursor: pointer;
}

.merch {
    background-image: url("../images/shirt.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.merch:hover {
    background-image: url("../images/shirtcash.png");
    cursor: pointer;
}

.mail {
    width: 20%;
    background-image: url("../images/mail.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.mail:hover {
    background-image: url("../images/mailhover.png");
    cursor: pointer;
}

@media (orientation: landscape) {
    .speech-bubble-out {
        width: 40%;
    }

    .tile {
        width: 20%;
    }

    .youtube {
        width: 20%;
        height: 25svh;
    }

    .merch {
        width: 20%;
    }

    .mail {
        width: 20%;
    }
}

@media (orientation: portrait) {
    .speech-bubble-out {
        width: 45%;
    }

    .tile {
        width: 25%;
    }

    .youtube {
        width: 25%;
        height: 15svh;
    }

    .merch {
        width: 25%;
    }

    .mail {
        width: 25%;
    }
}