*{
    margin: 0; padding: 0;box-sizing: border-box;
}

body {
    background-image: url(/cis195/images/rainingcode.jpg);
    background-size: 100%;
    color: #EEE;
    font-family: verdana; 
}

.vrheader {
   min-height: 5vh; min-width: 95vw;
   background-image: url(/cis195/hobby-vrgaming/images/colors.jpg);
   background-size: 100%;
   font-family: "Fascinate", sans-serif;
   font-size: 1.3vh;
   color: #D1E8E2;
   display: flex;  
   justify-content: center;
   align-items: center;
   position: fixed;*/
   margin:5px 15px;
   padding:20px 20px;
   text-decoration: underline;
   box-shadow: 4px 8px 4px  #116466;
   border-radius: 10px;
   transform: rotate(-5deg);
   z-index: 10;
}

.vrheader span {
    font-size: 4vh; 
    color:#2C3531;
    opacity: 70%;
}

.vrmenu {
    background-image: radial-gradient(#2C3531, #116466 );
    min-height: 10vh; 
    margin: 20px 5px;
    display: flex;
    border-radius: 14px 0px 14px 0px; 
    position: relative;
    top: 15vh;
}

.vrmenu nav {
    display: flex;
    gap: 15px;
    justify-content:space-evenly;
}

.vrmenu nav a {
    background-image:radial-gradient(#D1E8E2, #2C3531);
    border: 1px solid #116466;
    border-radius: 50%;
    text-align: center;
    padding: 30px 5px;
    font-family: "Press Start 2P";
    font-size: 1.4vh;
    text-decoration: none;
    color: yellow;
}

.vrmenu nav a:hover {
    background-image: radial-gradient(#116466, #2C3531);
    transition: 1ms;
    color: #D1E8E2;
    border: 1px solid #D1E8E2;
    box-shadow: 8px 8px 8px solid #116466;
}

.uppersect {
    background-image: url(/cis195/hobby-vrgaming/images/pattern2.jpg);
    background-size: cover;
    opacity: 70%;
    position: relative;
    top: 13vh;
    display: flex;
    gap: 10px;
    min-height: 50vh; 
}

.vrdef {
    font-family: "Syne Mono";
    font-size: 1.1em;
    font-weight: 900;
    color: yellow;
    line-height: 1.35em;
}

.uppersect .vrdef div {
    min-height: 17vh; min-width: 10vw;
    background-image: url(/cis195/hobby-vrgaming/images/vrwow.jpg.jpg);
    background-size: 100%;
}

.vrexplain {
    font-family: "Syne Mono";
    color: yellow;
    font-weight: 900;
    line-height: 1.35em;
}

.uppersect .vrexplain div {
    background-image: url(/cis195/hobby-vrgaming/images/vrimmerse.jpg.jpg);
    background-size: 100%;
    min-height: 20vh;
}

.secondheader {
    position: relative;
    top: 15vh;
    font-family: "honk";
    font-size: 1.1em;
    text-align: center;
}

.vrconvince {
    position: relative;
    top: 16vh;
    font-family: "Syne Mono";
    font-weight: 900;
    color: yellow;
}

.vrending {
    position: relative;
    top: 18vh;
    display: flex;
    align-items: center;
}

.vrending p {
    font-family: "Press Start 2P";
    font-size: 1.2em;
    color: yellow;
}

.vrending div{
    background-image: url(/cis195/hobby-vrgaming/images/headseton.jpg);
    background-size: 100%;
    min-height: 20vh; 
    border-radius: 5%;
}

.vrfooter {
    min-height: 10vh;
    position: relative;
    top: 20vh;
    text-align: center;
    color: #D1E8E2;
}

   /* ========= For landcape tablets and Larger desktops ==========*/

@media screen and (min-width: 1020px) {

    body {
        max-width: 100%;
        overflow-x: hidden;
    }
    .vrheader{
        font-family: "Rye";
        transform: rotate(-3deg);
        margin:2vh 2vh;
        font-size: 1.9em;
        border-radius: 50%;
}
    
    .vrheader span {
        font-size:1.3em;
}

    .vrmenu {
        height: 60vh; width: 15vw;
        position: relative;
        top: 25vh;
        border-radius: 0px 20px 20px 20px;
        box-shadow: 8px 8px 8px silver;
}

    .vrmenu nav {
        Display: flex;
        flex-direction: column;
        float: left;
}

    .vrmenu nav a {
        border-radius: 15%;
        border: 4px solid black;
        margin: 5px 20px;
        font-family: "silkscreen";
        font-weight: 900;
        color: yellow;
}

    .vrmenu nav a:hover {
        
}

    .uppersect {
        height: 60vh; width: 80vw;
        position: relative;
        left: 17vw; top: -37vh;
        gap: 25px;
}

    .uppersect .vrdef div {
        height: 37vh;
}

    .uppersect .vrexplain div {
        height: 40vh;
}

    .vrdef {
        font-size: 1.2em;
        line-height: 2.5em;
}
    .vrexplain {
        font-size: 1.2em;
        line-height: 2.5em;
}
    .secondheader {
        display: flex;
        position: relative;
        top: -36vh; left: 11vw;
        font-size: 3em;
}

    .vrconvince {
        display: flex;
        position: relative;
        top: -33vh; left: 2vw;
        font-size: 1.35em;
        line-height: 2.2em;
}

    .vrending {
    display: unset;
    height: 40px;
}

    .vrending p{
    font-family: "Syne Mono";
    position: relative;
    font-size: 22pt;
    left: 10vw; bottom: 59vh;
}
    .vrending p span:nth-child(1) {
    color: red;
    font-family: "Rubik Glitch";
    font-size: 128pt;
    color: rgb(228, 224, 224);
}

    .vrending p span:nth-child(2) {
    color: rgb(151, 150, 150);
    font-family: "Rubik Glitch";
    font-size: 88pt;
}

    .vrending p span:nth-child(3) {
    color: rgb(126, 127, 129);
    font-family: "Rubik Glitch";
    font-size: 48pt;
}

    .vrending div {
    position: relative;
    height: 40vh; width: 30vw;;
    bottom: 132vh; left: 65vw;
    border-radius: 50px 50px 50px 50px;
}

    .vrfooter {
        font-family: arial;
        font-size: 32pt;
    }


}