@font-face {
  font-family: "SpaceFont";
  src: url("Resources/Fonts/Spaceline PersonalUseOnly.ttf") format("truetype");
}

:root {
    --dark-grey: rgb(36, 36, 36);
    --button-green: rgb(143, 199, 60);
    --button-green-hover: rgb(39, 211, 131);
    --paragraph-header: rgb(0, 207, 207);
    --title: rgb(136, 255, 255);
    --subtitle: rgb(61, 255, 164);

    --space-font: "SpaceFont", Helvetica, sans-serif, arial;
    --generic-font: sans-serif, Helvetica, arial;
}

body {
    background-image: url("Resources/Images/space-background.jpg");
    font-family: var(--generic-font);
    margin: 0;
    padding: 0;
}

#site-title {
    color: var(--title);
    font-size: 5rem;
    font-family: var(--space-font);
    text-align: center;
    padding-top: 1%;
    margin: 0;
}

#site-subtitle {
    color: var(--subtitle);
    font-family: var(--space-font);
    font-size: 2.5rem;
    text-align: center;
    margin: 0;
    padding: 0;
}

#discord-iframe-container {
    display: flex;
    width: 100%;
    padding-top: 1%;
}

#info-sections-container {
    width: 100%;
}

#info-sections-container h3 {
    color: white;
    font-family: var(--space-font);
    font-size: 2rem;
    background-color: var(--paragraph-header);
    width: fit-content;
    height: min-content;
    padding: 1%;
    border-radius: 10px;
    border: 1px solid white;
}

#info-sections-container p {
    font-size: 1.25rem;
    color: white;
    background-color: var(--dark-grey);
    text-align: center;
    margin: 0 auto;
    padding: 1%;
    border-radius: 10px;
}

#vc-demo-gif {
    border-radius: 10px;
    margin: 1% auto;
    width: 100%;
}

#info-sections-container a {
    color: white;
}

iframe {
    width: 33%;
    height: 540px;
    margin: 0 auto;
    border-radius: 10px;
}

.paragraph-container {
    width: 45%;
    margin: 0 auto;
    padding-top: 3%;
}

#join-button-container {
    display: flex;
    width: 100%;
    padding: 5% 0;
}

#join-button {
    margin: 0 auto;
    width: 33%;
    height: 10%;
    font-size: 3rem;
    font-family: var(--space-font);
    color: white;
    text-align: center;
    text-decoration: none;
    background-color: var(--button-green);
    border: 2px solid lightgrey;
    border-radius: 10px;
    transition: background-color 0.5s ease-in-out, color 0.25s ease-in-out;
}

#join-button:hover {
    background-color: var(--button-green-hover);
    cursor: pointer;
    border-color: white;
}

@media screen and (orientation: portrait), (max-width: 950px) {
    #site-title {
        font-size: xx-large;
    }

    #site-subtitle {
        font-size: xx-large;
    }
    
    iframe {
        width: 95%;
    }

    #info-sections-container p {
        width: 100%;
    }

    .paragraph-container {
        width: 95%;
    }

    #join-button {
        width: 95%;
    }
}