* 
{
  box-sizing: border-box;
}

html, body 
{
  min-height: 100%;
}

body
{
    width: 70%;
    min-height: 95vh;
    margin: auto;
    font-family: arial, verdana;
    box-shadow: 10px 10px 5px grey;
    border: 1px solid black;
}

a
{
    text-decoration: underline !important;
}

header
{
    color: white;
    text-align: center;
    font-size: 2vw;
    height: 2.5vh;
    background-color: rgb(42,55,142);
}

header a
{
    color: white;
    text-decoration: none !important;
}

#pwChange
{
    color: white;
    padding-left: 5vw;
    background-color: rgb(42,55,142);
}

#pwChange a
{
    color: white;
}

#menuButton
{
    margin: auto;
    width: 25px;
    height: 1vw;
    padding-left: 4vw;
    padding-bottom: 3vw;
    font-size: 1.7vw;
    border: none;
}

#navigation
{
    margin-bottom: .2vh;
}

#body
{
    padding-top: 2vh;
    min-height: 95vh;
    background: rgba(42,55,142,1);
    background: linear-gradient(to bottom, rgba(42,55,142,1) 0%, rgba(42,55,142,1) 27%, rgba(0,212,255,1) 100%);
}

#loginForm
{
    color: white;
    padding: 1vw 2vw;
    width: 15vw;
    margin: auto;
    border: 1px solid white;
}

#loginForm h2, h3
{
    text-align: center;
}

#submitBtn
{
    text-align: center;
}

#submit
{
    border-radius: 5vw;
}

table
{
    width: 55vw;
    margin: auto;
    border-collapse: collapse;
    border: 1px solid black;
}

table td, th
{
    vertical-align: top;
    white-space: nowrap;
    border: 1px solid black !important;
}

tr:nth-child(even) {background-color: #f2f2f2;}

#psChange_loginForm
{
    color: white;
    padding: 1vw 2vw;
    width: 15vw;
    margin: auto;
    border: 1px solid white;
}

#psChange_loginForm h2
{
    font-size: 1vw;
    text-align: center;
    width: 16vw;
    margin: auto;
    padding-bottom: 2vh;
}

#psChange_loginForm table
{
    width: 15vw;
    border: none;
}

#psChange_loginForm td
{
    background-color: transparent;
    border: none !important;
}

#innerBox1
{
    width: 60vw;
    min-height: 8vh;
    margin: auto;
    padding: .5vw;
    background-color: white;
}

#playerFrom
{
    margin-left: 2vw;
    font-size: .7vw;
}

#player, #season, #hometown, #nhl
{
    float: left;
    width: 10vw;
/*    border: 1px solid black;*/
}

#innerBox2
{
    width: 60vw;
    min-height: 20vh;
    margin: auto;
    margin-top: 1vh;
    padding: .5vw;
    background-color: white;
}

/* BEGINNING OF @media */

/* iPhones Portrait */
@media only screen and (max-width: 750px) and (orientation: portrait)
{
   #body
   {
       padding-top: 1.5vh;
   }
    
    p
    {
        font-size: 3vw;
    }
    
    #loginForm
    {
        width: 60vw;
        font-size: 1vw;
    }
    
    #loginForm h2, h3
    {
        font-size: 4vw;
    }
    
    header
    {
        font-size: 5vw;
        padding-bottom: 4vh;
    }
    
    #psChange_loginForm
    {
        color: white;
        padding: 1vw;
        width: 15vw;
        margin: auto;
    }
    
    #psChange_loginForm h2
    {
        font-size: 3vw;
        width: 50vw;
    }
    
    #psChange_loginForm table
    {
        width: 5vw !important;
    }

    #psChange_loginForm td
    {
        background-color: transparent;
        border: none !important;
    }
    
    #psChange_loginForm input
    {
        width: 25vw;
    }
    
    #uname
    {
        width: 35vw;
    }
    
    #passwd
    {
        width: 35vw;
    }
    
    #playerFrom
    {
        margin-left: 2vw;
        font-size: 3vw;
    }
    
    #player, #season, #hometown, #nhl
    {
        float: none;
        display: block;
        width: 58vw;
        font-size: 3vw;
        margin-top: .8vh;
    }
    
    #submit
    {
        font-size: 3vw;
        border: 1px solid black;
    }
    
    #submitBtn
    {
        margin: auto;
        clear: both;
        min-height: 2vh;
        margin-top: 2vh !important;
    }
    
    #innerBox1
    {
        min-height: 38vh;
        clear: left;
        margin-top: 4vh;
    }
    
    #innerBox2
    {
        min-height: 5vh;
    }
    
    #table, th, td
    {
        font-size: 2.5vw;
    }
}

/* iPhones Landscape */
@media only screen and (max-width: 750px) and (orientation: landscape)
{
   #body
   {
       padding-top: 5vh;
   }
    
    p
    {
        font-size: 2vw;
    }
    
    #loginForm
    {
        width: 60vw;
        font-size: 1vw;
/*        border: 1px solid red;*/
    }
    
    #loginForm h2, h3
    {
        font-size: 2vw;
    }
    
    #psChange_loginForm
    {
        color: white;
        padding: 1vw 2vw;
        width: 15vw;
        margin: auto;
        border: 1px solid white;
    }
    
    #psChange_loginForm h2
    {
        font-size: 3vw;
        width: 50vw;
    }
    
    #psChange_loginForm table
    {
        width: 5vw !important;
    }

    #psChange_loginForm tr, td
    {
        background-color: transparent;
        border: none !important;
    }
    
    #psChange_loginForm input
    {
        width: 35vw;
    }
    
    
    header
    {
        font-size: 3vw;
        padding-bottom: 6vh;
    }
    
    #uname
    {
        width: 35vw;
    }
    
    #passwd
    {
        width: 35vw;
    }
    
    #playerFrom
    {
        margin-left: 2vw;
        font-size: 2vw;
    }
    
    #player, #season, #hometown, #nhl
    {
        float: left;
        width: 110vw;
        font-size: 2vw;
        padding-top: 1vh;
/*        border: 1px solid red;*/
    }
    
    #hometown
    {
        clear: both;
    }
    
    #submit
    {
        font-size: 1.5vw;
        border: 1px solid black;
    }
    
    #submitBtn input
    {
        margin: auto;
        clear: both;
        width: 8vw;
        margin-top: 2vh;
    }
    
    #innerBox1
    {
        min-height: 38vh;
        clear: left;
        margin-top: 4vh;
    }
    
    #innerBox2
    {
        min-height: 5vh;
    }
    
    #table, th, td
    {
        font-size: 1.5vw !important;
    }
}

/* iPad Portrait */
@media only screen and (min-width: 750px) and (orientation: portrait)
{
    #body
   {
       padding-top: 1vh;
   }
   
   #pwChange
   {
       font-size: 1.5vw;
   }
    
    #innerBox1
    {
        min-height: 12vh;
        clear: left;
        margin-top: .5vh;
/*        border: 1px solid red;*/
    }
    
    p
    {
        font-size: 2vw;
    }
    
    #loginForm
    {
        width: 60vw;
        font-size: 1vw;
/*        border: 1px solid red;*/
    }
    
    #loginForm h2, h3
    {
        font-size: 2vw;
    }
    
    header
    {
        font-size: 3vw;
    }
    
    #uname
    {
        width: 35vw;
    }
    
    #passwd
    {
        width: 35vw;
    }
    
    #playerFrom
    {
        margin-left: 2vw;
        font-size: 2vw;
    }
    
    #player, #season, #hometown, #nhl
    {
        float: left;
        width: 100vw;
        font-size: 1.7vw;
        margin-top: .5vh;
/*        border: 2px solid green;*/
    }
    
    #hometown
    {
        clear: both;
    }
    
    #submit
    {
        font-size: 1vh;
        border: 1px solid black;
    }
    
    #psChange_table input
    {
        width: 35vw;
    }
    
    #psChange_loginForm h2
    {
        font-size: 2vw;
        width: 35vw;
    }
    
    #innerBox2
    {
        min-height: 15vh;
    }
    
    #table, th, td
    {
        font-size: 1.8vw;
    }
}

/* iPad & iPad 10.5" landscape */
@media only screen and (min-width: 800px) and (max-width: 1400px) and (orientation: landscape)
{
    #body
   {
       padding-top: 2.5vh;
   }
    
    #innerBox1
    {
        min-height: 25vh;
        clear: left;
    }
    
    p
    {
        font-size: 2vw;
    }
    
    #loginForm
    {
        width: 60vw;
        font-size: 1vw;
/*        border: 1px solid red;*/
    }
    
    #loginForm h2, h3
    {
        font-size: 2vw;
    }
    
    header
    {
        font-size: 3vw;
    }
    
    #pwChange
   {
       font-size: 1.2vw;
       padding-top: 2vh;
   }
    
    #uname
    {
        width: 35vw;
    }
    
    #passwd
    {
        width: 35vw;
    }
    
    #playerFrom
    {
        margin-left: 2vw;
        font-size: 1.5vw;
    }
    
    #player, #season, #hometown, #nhl
    {
        float: left;
        width: 100vw;
        font-size: 1.3vw;
        margin-top: .5vh;
/*        border: 2px solid green;*/
    }
    
    #hometown
    {
        clear: both;
    }
    
    #submit
    {
        font-size: 1vw;
        border: 1px solid black;
    }
    
    #psChange_table input
    {
        width: 35vw;
    }
    
    #psChange_loginForm h2
    {
        font-size: 2vw;
        width: 35vw;
    }
    
    #innerBox2
    {
        min-height: 15vh;
    }
    
    #table, th, td
    {
        font-size: 1.2vw !important;
    }
}

/* iPad Pro 12.9" portrait */
@media only screen and (min-width: 1024px) and (orientation: portrait)
{
   #body
   {
       padding-top: 1vh;
   }
    
    #innerBox1
    {
        min-height: 12vh;
/*        border: 2px solid red;*/
    }
    
    p
    {
        font-size: 2vw;
    }
    
    #loginForm
    {
        width: 60vw;
        font-size: 1vw;
/*        border: 1px solid red;*/
    }
    
    #loginForm h2, h3
    {
        font-size: 2vw;
    }
    
    header
    {
        font-size: 3vw;
    }
    
    #uname
    {
        width: 35vw;
    }
    
    #passwd
    {
        width: 35vw;
    }
    
    #player, #season, #hometown, #nhl
    {
        float: left;
        width: 100vw;
        font-size: 1.5vw;
        margin-top: 1vh;
/*        border: 2px solid green;*/
    }
    
    #hometown
    {
        clear: both;
    }
    
    #submit
    {
        font-size: 1vw;
        border: 1px solid black;
    }
    
    #innerBox2
    {
        min-height: 15vh;
    }
    
    #table, th, td
    {
        font-size: 1.2vw !important;
    }
}

/* iPad Pro 12.9" landscape */
@media only screen and (min-width: 1300px) and (max-width: 1400px) and (orientation: landscape)
{
   #body
   {
       padding-top: 2vh;
   }
    
    #innerBox1
    {
        min-height: 10vh;
/*        border: 2px solid red;*/
    }
    
    p
    {
        font-size: 2vw;
    }
    
    #loginForm
    {
        width: 60vw;
        font-size: 1vw;
/*        border: 1px solid red;*/
    }
    
    #loginForm h2, h3
    {
        font-size: 2vw;
    }
    
    header
    {
        font-size: 3vw;
    }
    
    #uname
    {
        width: 35vw;
    }
    
    #passwd
    {
        width: 35vw;
    }
    
    #player, #season, #hometown, #nhl
    {
        float: none;
        display: inline-block;
        width: 14vw;
        font-size: 1.0vw;
        margin-top: 1vh;
/*        border: 2px solid green;*/
    }
    
    #submit
    {
        font-size: .8vw;
        border: 1px solid black;
    }
    
    #innerBox2
    {
        min-height: 15vh;
    }
    
    #table, th, td
    {
        font-size: 1.2vw !important;
    }
}

/* iPhone X/XS landscape */
@media only screen and (min-width: 812px) and (max-height: 375px) and (orientation: landscape)
{
   #body
   {
       padding-top: 5vh;
   }
    
    #innerBox1
    {
        min-height: 5vh;
        padding-bottom: 8vh;
/*        border: 1px solid red;*/
    }
    
    p
    {
        font-size: 2vw;
    }
    
    #loginForm
    {
        width: 60vw;
        font-size: 1vw;
/*        border: 1px solid red;*/
    }
    
    #loginForm h2, h3
    {
        font-size: 2vw;
    }
    
    header
    {
        font-size: 3vw;
    }
    
    #uname
    {
        width: 35vw;
    }
    
    #passwd
    {
        width: 35vw;
    }
    
    #player, #season, #hometown, #nhl
    {
        float: none;
        display: inline-block;
        width: 22vw;
        font-size: 1.0vw;
/*        border: 2px solid green;*/
    }
    
    #submit
    {
        font-size: 1vw;
        border: 1px solid black;
    }
    
    #innerBox2
    {
        min-height: 15vh;
    }
    
    #table, th, td
    {
        font-size: 1.2vw !important;
    }
}
    
/* Macbook laptops - MAY BE FINE WITH FOLLOWING EXTRA LARGE */
@media only screen and (max-width: 1500px) and (orientation: landscape)
{
    #player, #season, #hometown, #nhl
    {
        float: none;
        display: inline-block;
        width: 70vw;
        font-size: 1.0vw;
/*        border: 2px solid green;*/
    }

}