@media (max-width:500px) {
    header h1 {
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-items: center;
        width:50%;
        margin:auto;
        color:white;
        text-align: center;
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        font-size: 100px;
        letter-spacing: 10px;
        margin-top:10px;
        background-color: transparent;
    }
    hr {
        display:none;
    }
    #introduction {
        font-family: Arial, Helvetica, sans-serif;
        width:500px;
        font-size: 1.4em;
        color:white;
        margin:auto;
        margin-top:30px;
        padding: 15px;
        border-style: solid;
        border-width: 2px 0px 0px 0px;
        border-color: white;
        background-color: rgb(19, 23, 37);
    }
    #top-desc {
        margin-top:150px;
        margin-left: 20%;
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 240px;
        height: 10em;
        color:white;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.3em;
        letter-spacing: 2px;
        line-height: 1.2em;
        background-color: transparent;
        padding-left: 10px;
        border-style: solid;
        border-width: 0;
        border-color: white;
    }
    #top-desc p {
        border-style: solid;
        border-width: 2px 0;
        border-color: white;
        padding: 5px;
    }
    #top-desc img {
        margin: 50px 0 0 0;
        z-index: 1;
        box-shadow: 0px 0px 10px 1px#697ffc;
    }
    #bottom-desc {
        margin-top:230px;
        margin-bottom:200px;
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        color:white;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.3em;
        letter-spacing: 2px;
        line-height: 1.2em;
        background-color: transparent;
        height:400px;
    }
    
    #bottom-desc p {
        width:420px;
        top:200px;
        padding:5px;
        border-style: solid;
        border-color: white;
        border-width: 2px 0;
    }
    
    #bottom-desc img {
        margin-top:50px;
        box-shadow: 0px 0px 10px 1px#697ffc;
    }
    div#purchase {
        width: 100%;
        height: 2.2em;
        margin: 100px 0;
        text-align: center;
    }
    
    #purchase p {
        color:white;
        padding:20px;
        width:50%;
        height: 100%;
        font-size: 2em;
        font-family: Rockwell, serif;
        text-align: center;
        margin: auto;
        border-style: dotted;
        border-color: white;
        border-width: 3px;
        border-radius: 4px;
    }
    
    #purchase a {
        text-decoration: none;
    }
    div#purchase a p:hover {
        color:black;
        background-color: white;
    }
}
@media (min-width:501px) and (max-width:1000px) {
    header h1 {
        width:100%;
        margin:auto;
        color:white;
        text-align: center;
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        font-size: 200px;
        letter-spacing: 10px;
        margin-top:50px;
        background-color: transparent;
    }
    hr {
        margin: auto;
        margin-top:100px;
        width: 500px;
    }
    #introduction {
        font-family: Geneva, Tahoma, sans-serif;
        width:500px;
        font-size: 1.5em;
        color:white;
        margin:auto;
        margin-top:250px;
        padding: 15px;
        border-style: solid;
        border-width: 0 2px;
        border-color: white;
    }
    #top-desc {
        margin-top:200px;
        height: 100%;
        margin-left: 10%;
        margin-right: 10%;
        display:flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: 240px;
        color:white;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.3em;
        letter-spacing: 2px;
        line-height: 1.2em;
        background-color: transparent;
        padding-top: 10px;
        padding-left: 10px;
        border-style: solid;
        border-width: 0px;
        border-left-width: 5px;
        border-top-width: 5px;
        border-color: white;
    }
    #top-desc img {
        margin-top:80px;
        margin-left:50px;
        z-index: 1;
        box-shadow: 0px 0px 10px 10px#476d91;
    }
    #bottom-desc {
        margin-top:100px;
        margin-left:20%;
        height:100%;
        display:inline-block;
        width: 70%;
        color:white;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.3em;
        letter-spacing: 2px;
        line-height: 1.2em;
        background-color: transparent;
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top:5px;
        border-style: solid;
        border-color: white;
        border-width: 0;
        border-top-width: 5px;
        border-right-width: 5px;
    }
    
    #bottom-desc p {
        width:420px;
        top:200px;
        margin-left:30%;
    }
    
    #bottom-desc img {
        margin-top:50px;
        box-shadow: 0px 0px 10px 10px#476d91;
    }
    div#purchase {
        width: 100%;
        height: 2.2em;
        margin: 100px 0;
        text-align: center;
    }
    
    #purchase p {
        color:white;
        padding:20px;
        width:50%;
        height: 100%;
        font-size: 2em;
        font-family: Rockwell, serif;
        text-align: center;
        margin: auto;
        border-style: dotted;
        border-color: white;
        border-width: 3px;
        border-radius: 4px;
    }
    
    #purchase a {
        text-decoration: none;
    }
    div#purchase a p:hover {
        color:black;
        background-color: white;
    }
}
@media (min-width:1001px) {
    header h1 {
        width:100%;
        margin:auto;
        color:white;
        text-align: center;
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        font-size: 300px;
        letter-spacing: 10px;
        margin-top:50px;
        background-color: transparent;
    }
    hr {
        margin: auto;
        margin-top:100px;
        width: 500px;
    }
    #introduction {
        font-family: Geneva, Tahoma, sans-serif;
        width:500px;
        font-size: 1.5em;
        color:white;
        margin:auto;
        margin-top:250px;
        padding: 15px;
        border-style: solid;
        border-width: 0 2px;
        border-color: white;
    }
    #top-desc {
        margin-top:400px;
        margin-left: 20%;
        display:inline-block;
        width: 240px;
        height: 6em;
        color:white;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.3em;
        letter-spacing: 2px;
        line-height: 1.2em;
        background-color: transparent;
        padding-left: 10px;
        border-style: solid;
        border-width: 0px;
        border-left-width: 5px;
        border-color: white;
    }
    #top-desc img {
        margin: 0 0;
        margin-left: 275%;
        z-index: 1;
        box-shadow: 0px 0px 10px 10px#476d91;
    }
    #bottom-desc {
        margin-top:200px;
        margin-bottom:200px;
        display:inline-block;
        width: 100%;
        color:white;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.3em;
        letter-spacing: 2px;
        line-height: 1.2em;
        background-color: transparent;
    }
    
    #bottom-desc p {
        width:420px;
        position:relative;
        top:200px;
        display:inline-block;
        margin-left:60%;
        border-style: solid;
        border-color: white;
        border-width: 0;
        border-right-width: 5px;
    }
    
    #bottom-desc img {
        display:inline-block;
        margin-left:20%;
        box-shadow: 0px 0px 10px 10px#476d91;
    }
    div#purchase {
        width: 100%;
        height: 2.2em;
        margin: 100px 0;
        text-align: center;
    }
    
    #purchase p {
        color:white;
        padding:20px;
        width:30%;
        height: 100%;
        font-size: 2em;
        font-family: Rockwell, serif;
        text-align: center;
        margin: auto;
        border-style: dotted;
        border-color: white;
        border-width: 3px;
        border-radius: 4px;
    }
    
    #purchase a {
        text-decoration: none;
    }
    div#purchase a p:hover {
        color:black;
        background-color: white;
    }
}

video {
    width: 100%;
    position:absolute;
    top:0;
    z-index:-1;
    background-color: black;
}