@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Color+Emoji&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');

@media (prefers-color-scheme: light) {
    :root {
        --text-color: #000;
        --background-color: #ffffff;
        --tile-color: #e2dddd;
        --primary-color: #23820f;
        --secondary-color: #0595FF;
        --teritiary-color: #F07C2F;
        --theme: #F17D30;
        --wlx: #4da3d5;
        background-color: var(--background-color);
        font-size: 14pt;
        color: var(--text-color);
        font-family: 'Comfortaa';
    }
}


@media (prefers-color-scheme: dark) {
    :root {
        --text-color: #ffffff;
        --background-color: #000000;
        --tile-color: #181818;
        --primary-color: #39FF14;
        --secondary-color: #F07C2F;
        --teritiary-color: #0595FF;
        --theme: #0D95FC;
        --wlx: #E93323;
        background-color: var(--background-color);
        font-size: 14pt;
        color: var(--text-color);
        font-family: 'Comfortaa';
    }
}


.hero {
    margin: 50px;
    border-radius: 20px;
    display: flex;
    font-size: 100;
    padding: 100px;
    background-color: var(--tile-color);
    flex-direction: column;

}

.hero .var0 {
    display: flex;
    padding: 20px;
}

.hero .var2 {
    background-color: var(--secondary-color);
    border-radius: 20px;
    padding: 20px;
    font-family: 'Courier Prime', monospace;
    display: flex;
    margin-right: 0;
    margin-left: auto;
    transition: opacity 0.5s ease;
    opacity: 1;
}

.hero .var1 {
    display: flex;
    align-items: center;
    padding-left: 20px;
}

.hero .weapon0 {
    display: flex;
}

.hero .weapon1 {
    display: flex;
    margin-top: 100px;
}

.about {
    color: var(--primary-color);
    font-size: small;
    background-color: var(--tile-color);
    padding: 2%;
    height: fit-content;
    width: 95%;
    flex-direction: column;
    bottom: 0;
    border-radius: 20px;
    margin: auto;
}

.about a {
    text-decoration: none;
    color: var(--text-color);
}

.content0 {
    margin: 20px;
    display: flex;
    border-radius: 20px;
    flex-wrap: wrap;
}

.content0 span {
    padding-top: 10px;
    padding-bottom: 10px;
}

.content0 .right {
    flex: 2;
    position: relative;
}

.content0 .title {
    padding: 50px;
    text-align: justify;
    padding-bottom: 50px;
    font-family: 'Comfortaa';
    font-weight: bolder;
    font-size: xxx-large;
}

.content0 .desc {
    text-align: justify;
    padding: 50px;
    padding-bottom: 50px;
    font-family: 'Comfortaa';
    font-weight: bolder;
    font-size: x-large;
}

md-filled-tonal-button {
    font-family: 'Comfortaa';
}

md-elevated-button {
    font-family: 'Comfortaa';
}

.med-button {
    font-size: large;
    min-width: 100px;
    padding: 20px 20px;
    min-height: 60px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.med-button svg {
    width: 32px;
    height: 32px;
}

@media screen and (max-width: 600px) {

    .hero {
        margin: 20px;
        border-radius: 20px;
        display: flex;
        font-size: 200%;
        padding: 20px;
        background-color: var(--tile-color);
        flex-direction: column;
        align-items: center;
        height: 90%;
        justify-content: space-evenly;
    }

    .weapon0 {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }

    .weapon1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
    }

    .hero .var0 {
        display: flex;
        padding: 20px;
        font-size: 150%;
    }

    .hero .var2 {
        background-color: var(--secondary-color);
        border-radius: 20px;
        padding: 20px;
        text-align: center;
        font-family: 'Courier Prime', monospace;
        display: flex;
        transition: opacity 0.5s ease;
        opacity: 1;
        margin: auto;
        margin-top: 50px;
    }

    .hero .var1 {
        display: flex;
        font-size: 200%;
        align-items: center;
        margin-top: 0px;
    }

    .weapon1 img {
        margin-top: 50px;
        max-width: 100%;
    }

    .content0 {
        flex-direction: column;
        text-align: center;
    }

    .content0 .title {
        padding: 20px;
        font-size: 100%;
    }

    .content0 .desc {
        font-size: 80%;
        padding: 20px;
    }

    .content0 .desc a {
        color: #f2f2f2;
        font-size: 80%;
        text-decoration: none;
    }

    .content0 .right img {
        max-width: 100%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .content0 .left img {
        max-width: 100%;
        margin: 10px;
        height: auto;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .med-button {
        font-size: 100%;
        padding: 20px 20px;
        min-width: 100%;
        min-height: 60px;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .med-button svg {
        width: 32px;
        height: 32px;
    }

}