@font-face {
    font-family: Nexa;
    src: url(Nexa-Heavy.ttf);
    font-weight: bold;
}

@font-face {
    font-family: PerfectPenmanship;
    src: url(KGPerfectPenmanship.ttf);
    font-weight: bold;
}

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

html,
body {
    height: 100%;
    width: 100%;
}

.background {
    background-color: #222930;
    min-height: 100vh;
    width: 100vw;
}

header {
    padding-top: 2vh;
    padding-left: 10vw;
    padding-right: 10vw;
    padding-bottom: 2vh;
}

.title {
    color: #76E9C7;
    font-size: 72px;
    font-family: Nexa;
    align-self: center;
    text-align: center;
}

.navbar {
    display: flex;
    justify-content: center;
    gap: 2vw;
}

.banner {
    background-color: #29333D;
    height: auto;
    min-height: 20vh;
    border-top: solid 1px;
    border-top-color: #394250;
    border-bottom: solid 1px;
    border-bottom-color: #394250;
    padding-bottom: 10vh;
}

.banner_header {
    color: aliceblue;
    font-size: 32px;
    font-family: Nexa;
    align-self: center;
    text-align: center;
    padding-top: 2vh;
}

.banner_content {
    color: #829CBC;
    font-family: PerfectPenmanship;
    font-size: 16px;
    padding-left: 5vw;
    padding-right: 5vw;
}

.banner_content_indented {
    color: #829CBC;
    font-family: PerfectPenmanship;
    font-size: 16px;
    padding-left: 10vw;
    padding-right: 5vw;
}

.btn {
    color: #829CBC;
    font-family: PerfectPenmanship;
    font-size: 24px;
}

.btn:hover {
    color: aliceblue;
    cursor: pointer;
}