:root
{
    --background: url('images/susplanet.png');
    font-family: sans-serif, 'calibri', 'times new roman';
}

::-moz-selection 
{
    background: rgba(104, 110, 186, 0.2);
}
  
::selection 
{
    background: rgba(104, 110, 186, 0.2);
}

html
{
    overflow: hidden;
}

body {
    background-color: black;
    background-image: var(--background);
    background-size: cover;
    background-position: center;
    height: 100vh;
    width: 100vw;
    margin: 0;
    background-repeat: no-repeat;
}


.header-wrap
{
    padding-left: 5px;
    display: flex;
    justify-content: center;
    justify-items: center;
}

header {
    position: fixed;
    background-color: #1c1e1f;
    box-shadow: 0 0 0 2px rgb(22, 22, 22);
    height: max(5.5vh, 24px);
    top: 1vw;
    width: 95%;
    z-index: 100;
    border-radius: 100vw;
}
nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
nav li {
    display: inline-block;
    margin-right: 30px;
}
a {
    color: #424347;
    text-decoration: none;
    position: relative;
    top: 0.5vh;
    left: 30px;
    font-size: max(4vh, 20px);
}
a:hover {
    background-color: black;
    
    /* Create the gradient. */
    background-image: linear-gradient(45deg, #3845cf, #8312A5);
    
    /* Set the background size and repeat properties. */
    background-size: 200%;
    background-repeat: repeat;

    animation: gradient 15s ease infinite;
  
    /* Use the text as a mask for the background. */
    /* This will show the gradient as a text color rather than element bg. */
    -webkit-background-clip: text;
        background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-background-clip: text;
        background-clip: text;
    -moz-text-fill-color: transparent;
}

.main-background-text-wrap
{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
}

.main-background-text
{
    background-color: rgb(39, 41, 43);
    box-shadow: 0 0 0 10px rgb(19, 19, 19);
    position: relative;
    border-radius: 100vw;
    width: 65vw;
    height: 20vw;
}

.title-text {
    text-align: center;
    position: relative;
    top: -5vw;
    font-size: 8vw;
    padding-top: 2vh;
}

.main-h2 {
    text-align: center;
    position: relative;
    font-size: 3vw;
    top: -8vw;
}

.amongus
{
    background-image: url('images/amongus-sitting-textField.png');
    background-size: 28vw 15vw;
    background-repeat: no-repeat;
    background-position: bottom left;
    position: absolute;
    color: rgba(0, 0, 0, 0);
    top: -5vw;
    left: -2vw;
    width: 10vw;
    height: 12vw;
    z-index: 1;
}

.credits-text-wrap
{
    position: relative;
    left: 12.5vw;
    top: 3vw;
    width: 0;
    height: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    justify-items: center;
    font-size: 0;
}

.amongus:hover
{
    width: 28vw;
    height: 15vw;
    top: -8vw;
    color: black;
}

.amongus:hover > .credits-text-wrap
{
    position: relative;
    left: 12.5vw;
    top: 4vw;
    width: 15vw;
    height: 6vw;
    margin: 0;
    display: flex;
    justify-content: center;
    justify-items: center;
}

.amongus:hover > .credits-text-wrap > .credits-text
{
    margin: 0;
    font-size: 1.6vw;
}

footer
{
    position: fixed;
    bottom: 5px;
    width: 100vw;
    display: flex;
    justify-content: center;
}

.footer
{
    color: rgb(145, 145, 145);
    position: relative;
    font-size: 2.5vh;
}

.gradient-text {
    /* Fallback: Set a background color. */
    background-color: #1D2791;
    
    /* Create the gradient. */
    background-image: linear-gradient(45deg, #3845cf, #8312A5, #3845cf, #8312A5, #3845cf, #8312A5);
    
    /* Set the background size and repeat properties. */
    background-size: 300%;
    background-repeat: repeat;

    animation: gradient 20s ease infinite;
  
    /* Use the text as a mask for the background. */
    /* This will show the gradient as a text color rather than element bg. */
    -webkit-background-clip: text;
        background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
        background-clip: text;
    -moz-text-fill-color: transparent;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@media (orientation: portrait)
{
    html, body {
        overflow-x: hidden;
        overflow-y: hidden;
    }
    body {
        position: relative;
    }

    body {
        background-color: black;
        background-image: url('images/susplanet-mobile.png');
        background-size: cover;
        background-position: center;
        height: 90vh;
        width: 100vw;
        background-repeat: no-repeat;
    }

    .header-wrap
    {
        padding-left: 5px;
    }

    header {
        background-color: #151718;
        box-shadow: 0 0 0 2px rgb(22, 22, 22);
        position: sticky;
        top: 5px;
        height: 5.5vh;
        width: 98%;
        border-radius: 4000px;
        display: flex;
        justify-content: center;
    }
    nav li {
        display: inline-block;
        margin-right: 50px;
    }

    a
    {
        color: #5d5e62;
    }

    .main-background-text-wrap
    {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 85vh;
    }

    .main-background-text
    {
        background-color: rgba(39, 41, 43, 0);
        box-shadow: 0 0 0 10px rgba(19, 19, 19, 0);
        position: relative;
        border-radius: 10vw;
        top: -5vw;
        width: 65vw;
        height: 20vw;
        display: flex;
        justify-content: center;
    }

    h1.title-text {
        text-align: center;
        position: relative;
        top: -19vw;
        font-size: 15vw;
        margin: -33vw;
        padding: 0;
    }

    h2.main-h2 {
        text-align: center;
        position: relative;
        font-size: 5vw;
        top: 14vw;
        color: rgb(162, 162, 162);
    }

    .amongus
    {
        background-image: none;
        background-size: cover;
        background-repeat: no-repeat;
        position: absolute;
        top: -5vw;
        left: -2vw;
        width: 12vw;
        height: 12vw;
    }

    .footer
    {
        position: relative;
        bottom: 5px;
        text-align: center;
    }
}