* {
    padding: 0;
    margin: 0;
    transition: .2s;
}

@font-face {
    font-family: "Lexend Peta";
    src: url("/static/LexendPeta-Regular.ttf");
}

body {
    z-index: 0;
    
    font-size: 18px;
    font-family: "Lexend Peta";

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

    background-image: url("data:image/svg+xml,%3Csvg id='visual' viewBox='0 0 900 600' width='900' height='600' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1'%3E%3Crect x='0' y='0' width='900' height='600' fill='%23131313'%3E%3C/rect%3E%3Cdefs%3E%3ClinearGradient id='grad1_0' x1='33.3%25' y1='100%25' x2='100%25' y2='0%25'%3E%3Cstop offset='20%25' stop-color='%23363636' stop-opacity='1'%3E%3C/stop%3E%3Cstop offset='80%25' stop-color='%23363636' stop-opacity='1'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cdefs%3E%3ClinearGradient id='grad1_1' x1='33.3%25' y1='100%25' x2='100%25' y2='0%25'%3E%3Cstop offset='20%25' stop-color='%23363636' stop-opacity='1'%3E%3C/stop%3E%3Cstop offset='80%25' stop-color='%23131313' stop-opacity='1'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cdefs%3E%3ClinearGradient id='grad2_0' x1='0%25' y1='100%25' x2='66.7%25' y2='0%25'%3E%3Cstop offset='20%25' stop-color='%23363636' stop-opacity='1'%3E%3C/stop%3E%3Cstop offset='80%25' stop-color='%23363636' stop-opacity='1'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cdefs%3E%3ClinearGradient id='grad2_1' x1='0%25' y1='100%25' x2='66.7%25' y2='0%25'%3E%3Cstop offset='20%25' stop-color='%23131313' stop-opacity='1'%3E%3C/stop%3E%3Cstop offset='80%25' stop-color='%23363636' stop-opacity='1'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='translate(900, 600)'%3E%3Cpath d='M-405.6 0C-406 -59.4 -406.5 -118.7 -374.7 -155.2C-343 -191.7 -279.2 -205.3 -239.7 -239.7C-200.2 -274.1 -185.1 -329.2 -149.2 -360.3C-113.4 -391.4 -56.7 -398.5 0 -405.6L0 0Z' fill='%23242424'%3E%3C/path%3E%3Cpath d='M-202.8 0C-203 -29.7 -203.2 -59.4 -187.4 -77.6C-171.5 -95.9 -139.6 -102.7 -119.9 -119.9C-100.1 -137 -92.6 -164.6 -74.6 -180.2C-56.7 -195.7 -28.3 -199.3 0 -202.8L0 0Z' fill='%23363636'%3E%3C/path%3E%3C/g%3E%3Cg transform='translate(0, 0)'%3E%3Cpath d='M405.6 0C345 33.3 284.4 66.7 264.2 109.4C244 152.2 264.2 204.4 253.9 253.9C243.5 303.3 202.6 349.9 155.2 374.7C107.8 399.6 53.9 402.6 0 405.6L0 0Z' fill='%23242424'%3E%3C/path%3E%3Cpath d='M202.8 0C172.5 16.7 142.2 33.3 132.1 54.7C122 76.1 132.1 102.2 126.9 126.9C121.8 151.6 101.3 175 77.6 187.4C53.9 199.8 27 201.3 0 202.8L0 0Z' fill='%23363636'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;

}


#view {
    position: relative;
    width: 100%;
    min-height: 99vh;
    color: #fff;

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

#titlecard {
    padding: 2em;
    margin: 3em;
}
#title {
    font-size: 5rem;
}
#description {
    font-size: 1.3em;
    color: #fff5;
    width: 100%;
    text-align: center;
}
#description span {
    color: #fff7;
}

.card {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
}
.card a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    margin: .5em;
    padding: .5em 1em;
    width: 100%;
    color: #44ffff66;
    background-color: #ffffff02;
    border-radius: 1em;
    text-decoration: none;
}
.card a:hover {
    color: aqua;
    background-color: #222;
}


@media only screen and (max-width: 870px) {
    body {
        font-size: 14px;
    }
    #title {
        font-size: 4em;
    }
}

@media only screen and (max-width: 610px) {
    body {
        font-size: 12px;
    }
    #title {
        font-size: 3em;
    }
}

@media only screen and (max-width: 415px) {
    body {
        font-size: 11px;
    }
    #title {
        font-size: 2em;
    }
}