@media all and (min-width: 1008px) { /* Desktop Layout */
    #maindiv{
        font-family:arial;
        background:#ffc766;
        background: -moz-linear-gradient(right, rgb(255, 140, 0) 20%, rgb(255, 180, 0) 80%);
        background: -webkit-linear-gradient(right, rgb(255, 140, 0) 20%, rgb(255, 180, 0) 80%);
        background: linear-gradient(right, rgb(255, 140, 0) 20%, rgb(255, 180, 0) 80%);
        text-align:center;
        width:100%;
        display:block;
        margin-bottom:0vw;
    }
    .container{
        display:grid;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows:repeat(11, 1.75vw);/*this was 25px when it was working*/
        align-items: start;
        justify-items: center;
    }

    #maindiv .container h1{
        margin:6px auto;
        grid-column: 3 / 9;
        font-size:1.8vw;
    }
    #maindiv .container #contact{
        grid-row: 1 / 2;
    }
    #maindiv .container h2{
        margin:6px auto;
        grid-column: 3 / 9;
        grid-row: 3 / 4;
        font-size:1.6vw;
    }
    #maindiv .container #otherlinks{
        grid-row: 6 / 7;
    }
    #maindiv .container p{
        margin:6px auto;
        grid-column: 3 / 9;
        font-size:1.6vw;
        grid-row: 8 / 9;
        font-family:arial;
        cursor:pointer;
        font-weight:bold;
        display:inline-block;
    }
    #maindiv .container img{
        grid-column: 1 / 4;
        grid-row: 3 / 10;
        width:15vw;
        justify-self:center;
        align-self:center;
    }
    #maindiv .container #copyright{
        grid-column: 2 / 10;
        font-size:1vw;
        grid-row: 11 /12;
        font-family:arial;
        cursor:pointer;
        font-weight:bold;
        display:inline-block;
        margin:6px auto;
        margin-top:0px;
        align-self:start;
    }

}


@media all and (min-width: 320px) and (max-width: 1007px) {/* mobile and tablet layout*/
    #maindiv{
        font-family:arial;
        background:#ffc766;
        background: -moz-linear-gradient(right, rgb(255, 140, 0) 20%, rgb(255, 180, 0) 80%);
        background: -webkit-linear-gradient(right, rgb(255, 140, 0) 20%, rgb(255, 180, 0) 80%);
        background: linear-gradient(right, rgb(255, 140, 0) 20%, rgb(255, 180, 0) 80%);
        text-align:center;
    }
    .container{
        display:grid;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows:repeat(11, 6vw);
        align-items:start;
        justify-items:center;
    }
    #maindiv .container h1{
        margin:1.5vw auto;
        grid-column: 3 / 9;
        font-size:5vw;
    }
    #maindiv .container #contact{
        grid-row: 1 / 2;
    }
    #maindiv .container h2{
        margin:1.5vw auto;
        grid-column: 3 / 9;
        grid-row: 2 / 3;
        font-size:3.5vw;
    }
    #maindiv .container #otherlinks{
        grid-row: 4 / 5;
    }
    #maindiv .container p{
        margin:1.5vw auto;
        grid-column: 3 / 9;
        font-size:4vw;
        grid-row: 5 / 6;
        font-family:arial;
        cursor:pointer;
        font-weight:bold;
        display:inline-block;
    }
    #maindiv .container img{
        grid-column: 3 / 9;
        grid-row-start: 7;
        width:32vw;
        justify-self:center;
    }
    #maindiv .container #copyright{
        grid-column: 2 / 10;
        font-size:3.75vw;
        grid-row: 11 /12;
        font-family:arial;
        cursor:pointer;
        font-weight:bold;
        display:inline-block;
        margin:1.5vw auto;
        margin-top:0px;
        align-self:start;
    }

}