* {
    padding: 0;
    margin: 0;
    font-family: monospace;
}

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

body {
    background-color: #000;
    color: #FFF;
    background-image: url(img/background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

#content {
    max-width: 1200px;
    container-type: inline-size;
    margin: auto;
	height: fit-content;
}

#banner {
    width: 100%;
    display: grid;
    grid-template-areas:
    "logo maintitle"
    "logo subtitle";
    align-content: center;
    justify-content: center;
    justify-items: center;
    align-items: center;
}

#logo {
	margin: 2cqw 2cqw 2cqw 0;
    height: 20cqw;
    width: 20cqw;
    max-height: 800px;
    max-width: 800px;
    aspect-ratio: 1/1;
    grid-area: logo;
}

#maintitle {
    font-size: 14cqw;
    font-weight: bold;
    color: #000;
    text-shadow: 0 0 15px #FFF;
    white-space: nowrap;
    grid-area: maintitle;
	align-self: end;
}

#subtitle {
    font-size: 3.5cqw;
    color: #000;
    text-shadow: 0 0 15px #FFF;
    white-space: nowrap;
    grid-area: subtitle;
	align-self: start;
}

#inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.bulletpoint {
    text-decoration: none;
    background-color: #BBB;
    border-radius: 10cqw;
    margin-bottom: 2cqw;
    width: 85cqw;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    white-space: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
}

.bulletpoint:first-child {
    margin-top: 2cqw;
}

.bulletlogo {
    height: 8cqw;
    width: 8cqw;
    max-height: 1024px;
    max-width: 1024px;
    aspect-ratio: 1/1;
    margin: 2cqw;
}

.bullettext {
    text-decoration: underline;
    color: #00E;
    font-weight: bold;
    font-size: 4cqw;
}

@media only screen and (orientation: landscape) {
    #content {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
    }

    #logo {
        height: 11.25cqw;
        width: 11.25cqw;
    }

    #maintitle {
        font-size: 8cqw;
    }

    #subtitle {
        font-size: 2cqw;
    }

    .bulletpoint {
        width: 47.7cqw;
    }

    .bulletlogo {
        height: 4.5cqw;
        width: 4.5cqw;
        margin: 1.13cqw;
    }

    .bullettext {
        font-size: 2.3cqw;
    }
}