@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

* {
    font-family: Montserrat, Arial, Helvetica, sans-serif;
}

html, body {
    margin: 0;
    padding: 0;
}  

html { background-color: #0064ff; }

body {
    background-color: #1a1a1a;
    color:white;
}

p {
    font-size: large;
}

main {
    margin-left: 3vw;
    margin-right: 3vw;
    padding-bottom: 5vh;
}

h1 {
    text-align: center;
}

.button {
    display: flex;
    background-color: #0064ff;
    text-decoration: none;
    color: white;
    padding: 1vh;
    width: 15vw;
    max-width: 15vw;
    border-radius: 10px;
    justify-content: center;
    margin: 1vh;
    text-align: center;
}
.button:hover { font-weight: bold; }
.button:active { background-color: #00388b; color: white; }

.page-header {
    background:linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(./assets/mcbridge.png);
    background-size:cover;
    color: white;
    padding-top: 10vh;
    padding-bottom: 10vh;
    padding-left: 10vw;
    padding-right: 10vw;
/*    background-position: 0 -40vh; */
    background-position: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.section-a {
    background-color: #0064ff;
    display: flex;
    flex-direction: column;
    padding-top: 3vh;
    padding-bottom: 3vh;
    padding-left: 3vw;
    padding-right: 3vw;
}

.section-b {
    background-color: rgba(0, 0, 0, 0);
    display: flex;
    flex-direction: column;
    padding-top: 3vh;
    padding-bottom: 3vh;
    padding-left: 3vw;
    padding-right: 3vw;
}

.section-c {
    background-color: rgb(255, 63, 63);
    display: flex;
    flex-direction: column;
    padding-top: 3vh;
    padding-bottom: 3vh;
    padding-left: 3vw;
    padding-right: 3vw;
}

/* everything for the "social quicklinks" */

.social_quicklinks {
    display: flex;
    gap: 1vw;
    padding: 2vh;
    justify-content: center;
    height: 64px;
}

.social_quicklinks a {
    padding: 3vh;
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    height: 18px;
    width: 18px;
    transition-duration: 150ms;
    transition-property: all;
}

.social_quicklinks a:hover {
    height: 24px;
    width: 24px;
}

.social_quicklinks .youtube { background-image: url(./assets/social/youtube.png); }
.social_quicklinks .discord { background-image: url(./assets/social/discord.png); }
.social_quicklinks .bluesky { background-image: url(./assets/social/bluesky.png); }
.social_quicklinks .twitter { background-image: url(./assets/social/twitter.png); }
.social_quicklinks .matrix { background-image: url(./assets/social/matrix.png); }

@media (max-width: 1000px) {
    .button {
        display: flex;
        background-color: #0064ff;
        text-decoration: none;
        color: white;
        padding: 1vh;
        width: 50vw;
        max-width: 50vw;
        border-radius: 1.5vh;
        justify-content: center;
        margin: 1vh;
        text-align: center;
    }

    .page-header {
        background-position: center;
    }
}

@media (max-height: 800px) {
    .social_quicklinks a {
        padding: 5vh;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
}

.advanced_button {
    display: flex;
    flex-direction: row;
    background-color: rgb(38, 38, 136);
    align-items: center;
    transition-property: all;
	transition-duration: 150ms;
	border-radius: 16px;
    font-size: large;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.advanced_button img {
    width: 100px;
    height: auto;
    padding: 8px;
}

.advanced_button a:visited, .advanced_button a:link {
    color: white;
    text-decoration: none;
}

.advanced_button:hover {
    background-color: rgb(40, 88, 160);
    cursor: pointer;
    letter-spacing: 2px;
}