@font-face {
    font-family: 'catfont';
    src: url("/fonts/Lobster_1.3.otf");
}

@font-face {
    font-family: 'scfont';
    src: url("/fonts/great-vibes.regular.ttf");
}

@font-face {
    font-family: 'subcatfont';
    src: url("/fonts/test.otf");
}

@media (orientation: landscape) {
    body {
        margin: 0;
        color: rgb(0, 0, 0) !important;

    }

    .mainmenu {
        display: flex;
        align-items: center;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: stretch;
        font-family: catfont;
        font-size: xx-large;
        list-style: none;
        padding-top: 25px;
        color: rgb(0, 0, 0) !important;
    }

    .mainmenu>li {
        list-style: none;
    }

    .card {
        box-shadow: 0 4px 8px 0 rgba(90, 85, 85, 0.2);
        transition: 0.3s;
        width: 50vw;
        min-height: 150vh;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        background-size: cover;
        background-image:

            url("/images/bg.jpg");
        background-repeat: no-repeat;
        background-position: center;
        background-color: rgb(0, 0, 0) !important;
        ;

        /* margin-right: 1em;
        margin-left: 1em; */
        /* margin-top: 1em; */
        margin-bottom: 1em;
        position: relative;
        overflow: -moz-hidden-unscrollable;
    }

    .first {
        height: 90vw;
    }

    .card:hover {
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    }

    .container {
        padding: 2px 16px;
    }

    .center {
        display: block;
        margin-left: auto;
        margin-right: auto;
        padding-top: 100px;
        width: 60%;
        height: auto;
        top: 15em;
        align-content: center;
    }

    .bottom {
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
        bottom: 14%;
        left: 24%;
    }

    h1 {
        display: flex;
        position: relative;
        top: 27vh;
        left: auto;
        justify-content: center; text-align: center;
        color: rgb(0, 0, 0) !important;
        font-family: catfont;
        font-size: xx-large;
    }

    .data {
        position: relative;
        top: 30vh;
        left: auto;
        justify-content: center; text-align: center;
        padding-bottom: 235px;

    }

    
    h2 {
        display: flex;
        position: relative;
        top: 0vw;
        font-family: scfont;
        left: auto;
        justify-content: center; text-align: center;
        color: rgb(0, 0, 0) !important;
        padding-bottom: 28px;

    }

    h2::before
    {
        background-image: url(/images/ul.png);
        background-position: bottom;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .data>li {
        margin: 0;
        padding: 0px 0px 0px 13px;
        list-style: none;
        background-image: url(/images/li.png);
        background-repeat: no-repeat;
        background-position: left;
        background-size: 8px;
        font-family: subcatfont;
    }

    #top {
        width: 50vw;
        height: 25vh;
        position: absolute;
        top: 0%;
        right: 0%;
        background-image: url("/images/top.png");
        background-repeat: no-repeat;
        background-size: 50vw auto;
        max-height: 50vh;
        max-width: 50vw;
    }

    #bottom {
        width: 50vw;
        height: 25vh;
        bottom: 0%;
        right: 0%;
        position: absolute;
        background-image: url("/images/bottom.png");
        background-repeat: no-repeat;
        background-position: bottom;
        background-size: 50vw auto;
        max-height: 50vh;
        max-width: 50vw;


    }

    li {
        margin: 0;
        padding: 0px 0px 0px 13px;
        list-style: none;
        
    }

    .mainmenu {
        display: flex;
        align-items: center;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: stretch;
        font-size: xx-large;
        list-style: none;
        padding-top: 25px;
        color: rgb(0, 0, 0) !important;
    }

    ul{
        padding-inline-start: 0px;
    }
    li {
        list-style: none;
    }

    a {
        color: inherit;
    }
}

@media (orientation: portrait) {
    body {
        margin: 0;
        color: rgb(0, 0, 0) !important;
        

    }

    .card {
        box-shadow: 0 4px 8px 0 rgba(90, 85, 85, 0.2);
        transition: 0.3s;
        width: 100vw;
        min-height: 95vh;
        height: auto;
        background-size: cover;
        background-image:
            url("/images/bg.jpg");
        background-repeat: no-repeat;
        background-position: center;
        background-color: rgb(0, 0, 0) !important;
        ;

        /* margin-right: 1em;
        margin-left: 1em; */
        /* margin-top: 1em; */
        margin-bottom: 1em;
        position: relative;
        overflow: -moz-hidden-unscrollable;
    }



    .card:hover {
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    }

    .container {
        padding: 2px 16px;
    }


    #top {
        width: 100vw;
        height: 25vh;
        position: absolute;
        top: 0%;
        right: 0%;
        background-image: url("/images/top.png");
        background-repeat: no-repeat;
        background-size: 100vw auto;
        max-height: 25vh;
        max-width: 100vw;
    }

    #bottom {
        width: 100vw;
        height: 25vh;
        bottom: 0%;
        right: 0%;
        position: absolute;
        background-image: url("/images/bottom.png");
        background-repeat: no-repeat;
        background-position: bottom;
        background-size: 100vw auto;
        max-height: auto;
        max-width: 100vw;
    }

    
    .center {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0em;
        padding-top: 52px;
        width: 50%;
        width: 60vw;
        height: auto;
        align-content: center;

    }

    .bottom {
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
        bottom: 14vh;
        left: 24%;
        align-items: center;
    }

    h1 {
        display: flex;
        position: relative;
        left: auto;
        justify-content: center; text-align: center;
        color: rgb(0, 0, 0) !important;
        font-family: catfont;
        font-size: xx-large;
        top: 5vh;
        font-size: 2.2em;
    }

    .data {
        position: relative;
        top: 12vh;
        padding-bottom: 22vh;
        left: auto;
        justify-content: center; text-align: center;


    }

    h2 {
        display: flex;
        position: relative;
        top: -16px;
        left: auto;
        font-family: scfont;
        font-size: 2em;
        justify-content: center;
        text-align: center;
        color: rgb(0, 0, 0) !important;
        

    }

    .underline
    {
        
        background-image: url(/images/ul.png);
    background-position: center;
    background-size: auto;
    background-repeat: no-repeat;
    height: 35px;
    }
    .underline-invert
    {
        
        background-image: url(/images/dl.png);
    background-position: center;
    background-size: auto;
    background-repeat: no-repeat;
    height: 35px;
    }

    .data > li {
        margin: 0;
        padding: 0px 0px 0px 13px;
        list-style: none;
        font-family: subcatfont;
        align-items: center;
        text-align: center;
        padding-bottom: 1px;
        
    }

    .mainmenu {
        display: flex;
        align-items: center;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: stretch;
        font-family: catfont;
        font-size: 6vw;
        list-style: none;
        padding-top: 25px;
        color: rgb(0, 0, 0) !important;
    }
    ul{
        padding-inline-start: 0px;
    }
    li {
        list-style: none;
        text-align: center;
    }

    a {
        color: inherit;
    }
}

#myBtn {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Fixed/sticky position */
    bottom: 20px;
    /* Place the button at the bottom of the page */
    right: 30px;
    /* Place the button 30px from the right */
    z-index: 99;
    /* Make sure it does not overlap */
    border: none;
    /* Remove borders */
    outline: none;
    /* Remove outline */
    background-color: rgb(0, 0, 0) !important;
    /* Set a background color */
    color: white;
    /* Text color */
    cursor: pointer;
    /* Add a mouse pointer on hover */
    padding: 15px;
    /* Some padding */
    border-radius: 100px;
    /* Rounded corners */
    font-size: 20px;
    /* Increase font size */
}

#myBtn:hover {
    background-color: #555;
    /* Add a dark-grey background on hover */
}

html {
    scroll-behavior: smooth;
}