#main
{
    font-family: 'roboto', sans-serif !important;
    text-align: center;
    /* background: url("https://images.freeimages.com/images/large-previews/ad2/university-in-wroclaw-1-1231133.jpg"); */
    /* background-image: linear-gradient(to bottom right, rgba(0,0,0,0.8), rgba(0,0,0,0.8)); */
    width: 100%;
    height: 100vh;
    color: white;
    z-index: 999;
}

video
{
    position: fixed;
    z-index: -1!important;
    /* filter: grayscale(2); */
    background-color: black;
    left: 0;
    width: 99vw;
    /* height: ; */
}

#main h1
{
    padding: 35vh 0 0 0;
    font-family: 'Trade Winds';
    font-size: 6rem;
    letter-spacing: 8px;
}

#main h2
{
    margin: 5vh 0 0 0;
    font-family: 'Roboto Slab';
    font-size: 3rem;
    letter-spacing: 10px;
}

#main .button
{
    width: 120px;
    height: 40px;
    margin: 20px auto 0 auto;
    background-color: white;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid white;
    overflow: hidden;
}

#main .button .text
{
    width: 100%;
    height: 100%;
    position: relative;
    background-size: 400% 800%; 
    background: linear-gradient(-45deg, rgba(196, 56, 14, 0.952), rgba(55, 175, 44, 0.918), rgb(55, 41, 133), rgb(158, 8, 8), rgba(43, 143, 173, 0.966), rgba(196, 14, 14, 0.63), rgb(55, 175, 44), rgb(55, 41, 133), rgb(158, 8, 8), rgba(122, 122, 122, 0.966));
    animation: 6s change ease-in-out infinite;
    z-index: 888;
    
}

#main .button .text a
{
    width: 120px;
    height: 39px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-decoration: none;
   
}

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

@keyframes  change
{
   0%
   {
       transform: translate(0 50%);
       background-position: 0% 50%;
       background-size: 100% 100%;
   }
   50%
   {
       transform: translate(100% 50%);
       background-position: 200% 100%;
       background-size: 100% 1200%;
   }
   100%
   {
       transform: translate(0 50%);
       background-size: 100% 100%;
   }
}

    #mobile
    {
        display: none;
    }

@media only screen and (min-width: 200px) and (max-width: 720px)
{
    #desktop
    {
        display: none;
    }

    #mobile
    {
        display: block;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    #vid
    {
        width: 100vw;
        height: 100vh;
        background-color: #CCC;
        z-index: 899 !important;
        display: flex ;
        justify-content: center;
        align-items: center;
        overflow: hidden !important;
    }
    #mobile-video
    {
        display: inline-block;
        /* margin: 0 auto; */
        width: 240%;
        height: 100%;
        /* filter: grayscale(2); */
        text-align: center;
        /* height: 0vh; */
        transform: rotate(90deg);
        margin: -5% 0 0 -70%;
        z-index: 990 !important;
    }
    #mobile-main
    {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 991;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #mobile-main h1
    {
        color: white;
        text-align: center;
        font-family: 'Trade Winds';
        font-size: 2rem;
        letter-spacing: 8px;  
        margin: 0 0 6% 0;  
        padding-bottom: 6%;
    }
    #mobile-main h2
    {
        color: white;
        font-family: 'Roboto Slab';
        margin: 4% 0 8% 0;
    }
    #mobile-main .button
    {
        width: 120px;
        height: 40px;
        margin: 20px auto 0 auto;
        background-color: white;
        color: black;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    #mobile-main .mobile-button .mobile-text
    {
        width: 120px;
        height: 100%;
        position: relative;
        background-size: 400% 800%; 
        background: linear-gradient(-45deg, rgba(196, 56, 14, 0.952), rgba(55, 175, 44, 0.918), rgb(55, 41, 133), rgb(158, 8, 8), rgba(43, 143, 173, 0.966), rgba(196, 14, 14, 0.63), rgb(55, 175, 44), rgb(55, 41, 133), rgb(158, 8, 8), rgba(122, 122, 122, 0.966));
        animation: 6s change ease-in-out infinite;
        z-index: 888;
        overflow: hidden;
        border: 1px solid white;

    }

    #mobile-main .mobile-button .mobile-text a
    {
        width: 120px;
        height: 39px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        text-decoration: none;
    
    }

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

    @keyframes  change
    {
    0%
    {
        transform: translate(0 50%);
        background-position: 0% 50%;
        background-size: 100% 100%;
    }
    50%
    {
        transform: translate(100% 50%);
        background-position: 200% 100%;
        background-size: 100% 1200%;
    }
    100%
    {
        transform: translate(0 50%);
        background-size: 100% 100%;
    }
    }
}