@media (orientation: portrait) {
/* all pages */
     @font-face {
        font-family: "Hemi Head", monospace;
        src: url('css/Hemi Head Bd It.otf') format('.otf');
    }

    body {
        background-color: white;
        background-repeat: no-repeat;
        height: 100dvh;
        max-height: 110dvh;
        overflow: hidden;
    }

    header {
        display: block;
    }

    a {
        color:white;
    }

    p {
        text-align: center, start;
        color: white;
        font-family: "Hemi Head", monospace;
        font-size: 1em;
        padding: 1.2em;
        line-height: 2em;
    }

    li {
        color: white;
        text-align: start;
        font-family: "Hemi Head", monospace;
        font-size: 1em;
        line-height: 2em;
    }

/* singular pages */

/* index */
    .inp {

        height: 100%;
        background-position: center;
        background-size: cover;
        background-image: url("css/countrysidetransfuture.png");
        overflow: scroll;
        margin: -1dvh;
    }

    nav {

        margin-left: auto;
        margin-right: auto;
        width: 70%;
        margin-top: 20%;
        margin-bottom: 10%;
    }

    .land {
        font-family: "Hemi Head", monospace;
        color: rgba(255, 255, 255);
        background-color: rgba(109, 240, 255, 0.65);
        display: block;
        text-align: center;
        font-size: calc(2rem + 5.5vw);
    }

    .landb {
        font-family: "Hemi Head", monospace;
        background-color: rgb(191, 23, 60);
        padding: 1em;
        border: none;
        display: block;
        font-size: large;
        margin-left: auto;
        margin-right: auto;
        margin-top: 1em;
        margin-bottom: 1em;
        border-radius: 1em;
    }

    .landb:hover {
        background-color: rgb(240, 62, 100);
    }

/* about */
    .abtp {
        height: 100%;
        background-position: center;
        background-size: cover;
        background-image: url("css/cityscapetransfuture.png");
        overflow: scroll;
        margin: -1dvh;
    }

    .abt0 {
        display: block;
        background-color:rgba(29, 93, 98, 0.85);
        font-family: "Hemi Head", monospace;
        color: rgba(255, 255, 255);
        text-align: center;
        font-size: calc(2rem + 5.5vw);
    }

    .abth2 {
        background-color: rgba(41, 115, 120, 0.85);
        font-family: "Hemi Head", monospace;
        color: white;
        display: block;
        text-align: center;
        font-size: calc(1rem + 4.5vw);
        margin-left: auto;
        margin-right: auto;
        width: 55%;
        border-radius: 0.2em;
    }

    .abt1 {
        display: block;
        width: 85%;
        background-color: rgba(76, 141, 145, 0.85);
        margin-left: auto;
        margin-right: auto;
        border-radius: 0.1em;
    }

    .abtb {
        font-family: "Hemi Head", monospace;
        background-color: rgb(189, 85, 104);
        padding: 1em;
        border: none;
        display: block; 
        font-size: large;
        margin-left: auto;
        margin-right: auto;
        margin-top: 1em;
        margin-bottom: 1em;
        border-radius: 1em;
    }

    .abtb:hover {
        background-color: rgb(227, 103, 126);
    }

/* subm1 */

    .subp {
        height: 100%;
        background-position: center;
        background-size: cover;
        background-image: url("css/scifispacetransfuture.png");
        overflow: scroll;
        margin: -1dvh;
    }

    .submh1 {
        font-family: "Hemi Head", monospace;
        color: rgba(255, 255, 255);
        background-color: rgba(186, 46, 74, 0.85);
        display: block;
        text-align: center;
        font-size: calc(2rem + 5.5vw);
    }

    .submh2 {
        background-color: rgba(201, 51, 81, 0.85);
        font-family: "Hemi Head", monospace;
        color: white;
        display: block;
        text-align: center;
        font-size: calc(1rem + 4.5vw);
        margin-left: auto;
        margin-right: auto;
        width: 55%;
        border-radius: 0.2em;
    }

    .sub1 {
        display: block;
        width: 65%;
        background-color: rgba(201, 51, 81, 0.85);
        margin-left: auto;
        margin-right: auto;
        border-radius: 0.1em;
    }

    .submb {
        font-family: "Hemi Head", monospace;
        background-color:rgb(28, 46, 63);
        padding: 1em;
        border: none;
        display: block;
        font-size: large;
        margin-left: auto;
        margin-right: auto;
        margin-top: 1em;
        margin-bottom: 1em;
        border-radius: 1em;
    }

    .submb:hover {
       background-color: rgb(55, 85, 112);
    }
/* resources */
    .resourcep {
        height: 100%;
        background-position: center;
        background-size: cover;
        background-image: url("css/foresttransfuture.png");
        overflow: scroll;
        margin: -1dvh;
    }

    .rh1 {
        font-family: "Hemi Head", monospace;
        color: rgba(255, 255, 255);
        display: block;
        background-color:rgba(53, 35, 103, 0.85);
        text-align: center;
        font-size: calc(2rem + 5.5vw);
    }

    .rh2 {
        background-color: rgba(67, 48, 120, 0.85);
        font-family: "Hemi Head", monospace;
        color: white;
        display: block;
        text-align: center;
        font-size: calc(1rem + 4.5vw);
        margin-left: auto;
        margin-right: auto;
        width: 55%;
        border-radius: 0.2em;
    }

    .rh3 {
        background-color: rgba(71, 55, 115, 0.85);
        font-family: "Hemi Head", monospace;
        color: white;
        display: block;
        text-align: start;
        font-size: calc(1rem + 1.2vw);
        margin-right: auto;
        width: 45%;
        border-radius: 0.2em;
        padding: 0.5em;
    }

    .r {
        display: block;
        width: 65%;
        background-color: rgba(80, 16, 31, 0.95);
        margin-left: auto;
        margin-right: auto;
        border-radius: 0.2em;
    }

    .rsb {
        font-family: "Hemi Head", monospace;
        background-color: rgba(191, 153, 96, 0.95);
        padding: 1em;
        border: none;
        display: block;
        font-size: large;
        margin-left: auto;
        margin-right: auto;
        margin-top: 1em;
        margin-bottom: 1em;
        border-radius: 1em;
    }    
    }

    .rsb:hover {
        background-color: rgba(216, 185, 137, 0.95);
    }

/* end */



@media (orientation: landscape) {
/* all pages */
    @font-face {
        font-family: "Hemi Head", monospace;
        src: url('css/Hemi Head Bd It.otf') format('.otf');
    }
    body {
        background-color: white;
        background-repeat: no-repeat;
        background-position: center;
        overflow: hidden;
    }
    p {
        text-align: center, start;
        color: white;
        font-family: "Hemi Head", monospace;
        font-size: 1em;
        padding: 1.2em;
        line-height: 2em;
    }
    a {
        color:white;
    }
    header {
        display: block;
    }
    li {
        color: white;
        text-align: start;
        font-family: "Hemi Head", monospace;
        font-size: 1em;
        line-height: 2em;
    }

/* singular pages */

/* landing */
    .inp {
        height: 100dvh;
        background-position: center;
        background-size: cover;
        background-image: url("css/countrysidetransfuture.png");
        overflow: scroll;
        margin: -1dvh;
    }

    nav {
        margin-left: auto;
        margin-right: auto;
        width: 30%;
        margin-top: 5%;
        margin-bottom: 5%;
        border-radius: 0.5em;
    }
    .land {
        display: block;
        background-color: rgba(109, 240, 255, 0.65);
        font-family: "Hemi Head", monospace;
        color: white;
        text-align: center;
        font-size: calc(3rem + 5.5vw);
    }
    .landb {
        font-family: "Hemi Head", monospace;
        background-color: rgb(191, 23, 60);
        padding: 1em;
        border: none;
        display: block;
        font-size: large;
        margin-left: auto;
        margin-right: auto;
        margin-top: 1em;
        margin-bottom: 1em;
        border-radius: 1em;
    }

     .landb:hover{
        background-color: rgb(240, 62, 100);
    }

/* about */

    .abtp {
        height: 100dvh;
        background-position: center;
        background-size: cover;
        background-image: url("css/cityscapetransfuture.png");
        overflow: scroll;
        margin: -1dvh;
    }
    .abt0 {
        display: block;
        background-color:rgba(29, 93, 98, 0.85);
        font-family: "Hemi Head", monospace;
        color: white;
        text-align: center;
        font-size: calc(3rem + 5.5vw);
    }

    .abth2 {
        background-color: rgba(41, 115, 120, 0.85);
        font-family: "Hemi Head", monospace;
        color: white;
        display: block;
        text-align: center;
        font-size: calc(1rem + 4.5vw);
        margin-left: auto;
        margin-right: auto;
        width: 55%;
        border-radius: 0.2em;
        
    }

    .abt1 {
        display: block;
        width: 65%;
        background-color: rgba(76, 141, 145, 0.85);
        margin-left: auto;
        margin-right: auto;
        border-radius: 0.1em;
    }

    .abtb {
        font-family: "Hemi Head", monospace;
        background-color:rgb(189, 85, 104);
        padding: 1em;
        border: none;
        display: block;
        font-size: large;
        margin-left: auto;
        margin-right: auto;
        margin-top: 1em;
        margin-bottom: 1em;
        border-radius: 1em;
    }

     .abtb:hover{
        background-color: rgb(227, 103, 126);
    }

    /* subm1 */

    .subp {
        height: 100dvh;
        background-position: center;
        background-size: cover;
        background-image: url("css/scifispacetransfuture.png");
        overflow: scroll;
        margin: -1dvh;
    }

    .submh1 {
        background-color: rgba(186, 46, 74, 0.85);
        font-family: "Hemi Head", monospace;
        display: block;
        color: white;
        text-align: center;
        font-size: calc(3rem + 5.5vw);
    }

    .submh2 {
        background-color: rgba(201, 51, 81, 0.85);
        font-family: "Hemi Head", monospace;
        color: white;
        display: block;
        text-align: center;
        font-size: calc(1rem + 4.5vw);
        margin-left: auto;
        margin-right: auto;
        width: 55%;
        border-radius: 0.2em;
}

    .sub1 {
        display: block;
        width: 65%;
        background-color: rgba(201, 51, 81, 0.85);
        margin-left: auto;
        margin-right: auto;
        border-radius: 0.1em;
    }

    .submb {
        font-family: "Hemi Head", monospace;
        background-color: rgb(28, 46, 63);
        padding: 1em;
        border: none;
        display: block;
        font-size: large;
        margin-left: auto;
        margin-right: auto;
        margin-top: 1em;
        margin-bottom: 1em;
        border-radius: 1em;
    }

    .submb:hover {
        background-color: rgb(55, 85, 112);
    }

    /* resources */

    .resourcep {
        height: 100dvh;
        background-position: center;
        background-size: cover;
        background-image: url("css/foresttransfuture.png");
        overflow: scroll;
        margin: -1dvh;
    }

    .rh1 {
        font-family: "Hemi Head", monospace;
        display: block;
        color: white;
        text-align: center;
        font-size: calc(3rem + 5.5vw);
        background-color: rgba(53, 35, 103, 0.85);
    }

    .rh2 {
        background-color: rgba(67, 48, 120, 0.85);
        font-family: "Hemi Head", monospace;
        color: white;
        display: block;
        text-align: center;
        font-size: calc(1rem + 4.5vw);
        margin-left: auto;
        margin-right: auto;
        width: 55%;
        border-radius: 0.2em;
    }

    .rh3 {
        background-color: rgba(71, 55, 115, 0.85);
        font-family: "Hemi Head", monospace;
        color: white;
        display: block;
        text-align: start;
        font-size: calc(1rem + 1.2vw);
        margin-right: auto;
        width: 45%;
        border-radius: 0.2em;
        padding: 0.5em;
    }

    .rsb {
        font-family: "Hemi Head", monospace;
        background-color: rgba(191, 153, 96, 0.95);
        padding: 1em;
        border: none;
        display: block;
        font-size: large;
        margin-left: auto;
        margin-right: auto;
        margin-top: 1em;
        margin-bottom: 1em;
        border-radius: 1em;
    }

    .rsb:hover {
        background-color: rgba(216, 185, 137, 0.95);
    }

    .r {
        display: block;
        width: 65%;
        background-color: rgba(80, 16, 31, 0.95);
        margin-left: auto;
        margin-right: auto;
        border-radius: 0.2em;
    }

 /* end */
}