@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap");

:root {
  --primary-color: #6e00b3;
  --secondary-color: black;
}

* {
  margin: 0;
  padding: 0;
}

html {
  font-family: "Roboto", sans-serif;
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE10+/Edge */
  user-select: none;
  /* Standard */
}

img{
  -webkit-user-drag: none;
}

::-webkit-scrollbar {
  display: none;
}

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

    body{
        background-color: var(--secondary-color);
    }

    #centerTxt{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 5vh;
        width: 55vw;
        text-align: center;
    }

    #container{
        display: none;
        height: 50vh;
    }

    #app-icon{
        position: absolute;
        top: 4vh;
        left: 2vw;
        scale: 0.8;
        border-radius: 20px;
    }

    #app-name{
        position: absolute;
        top: 10vh;
        left: 22vw;
        height: fit-content;
        width: fit-content;
        max-width: 50vw;
        font-size: 4vw;
        color: white;
    }

    #app-author{
        position: absolute;
        top: 20vh;
        left: 22vw;
        height: fit-content;
        width: fit-content;
        max-width: 50vw;
        font-size: 2vw;
        color: var(--primary-color);
    }

    #alert-box img{
        height: 3vh;
        rotate: 180deg;
    }

    #alert-box{
        visibility: visible;
        display: grid;
        grid-template-columns: repeat(2, 30px);
        position: absolute;
        top: 30vh;
        left: 20.5vw;
        height: fit-content;
        width: 27vw;
        max-width: 27vw;
        font-size: 1.2vw;
        border-radius: 5px;
        padding: 1vh;
        padding-left: 1.5vw;
        padding-right: 1.5vw;
        color: #fd4140;
    }

    #alert-text{
        width: 45vw;
    }

    #primary-btn{
        display: none;
        position: absolute;
        top: 27vh;
        left: 80vw;
        height: fit-content;
        width: fit-content;
        max-width: 70vw;
        min-width: 15vw;
        font-size: 2vw;
        padding: 1vw;
        padding-left: 2vw;
        padding-right: 2vw;
        border-radius: 20px;
        background-color: var(--primary-color);
        color: white;
        outline: none;
        border: none;
        cursor: pointer;
        transition: 200ms opacity;
        font-family: "Roboto", sans-serif;
    }

    #primary-btn:hover{
        opacity: 0.8;
        transition: 200ms;
    }

    #primary-btn:disabled{
        opacity: 0.5;
        cursor: not-allowed;
    }

    #secondary-btn{
        display: none;
    }

    #app-description-title{
        position: absolute;
        top: 45vh;
        left: 4vw;
        height: fit-content;
        width: fit-content;
        max-width: 70vw;
        font-size: 2.5vw;
        color: white;
        border-bottom: 2px solid #6e00b3;
        cursor: pointer;
    }

    #sep-1{
        width: 1px;
        height: 1px;
        border-radius: 10px;
        scale: 8;
        background-color: white;
        position: absolute;
        top: 48.5vh;
        left: 17vw;
    }

    #changes-title{
        position: absolute;
        top: 45vh;
        left: 18.5vw;
        height: fit-content;
        width: fit-content;
        max-width: 70vw;
        font-size: 2.5vw;
        color: white;
        cursor: pointer;
    }

    #app-description{
        position: absolute;
        top: 54vh;
        left: 4vw;
        height: fit-content;
        width: fit-content;
        max-width: 70vw;
        font-size: 1.5vw;
        color: #b8b8b8;
    }

    #images{
        position: absolute;
        top: -32vh;
        right: -13vw;
        display: none;
        grid-template-rows: repeat(auto-fit, 20px);
        height: 155vh;
    }

    #images img{
        scale: 0.3;
        border-radius: 40px;
        border: 2px solid white;
    }

    #backdrop{
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
        background-color: black;
        color: white;
        text-align: center;
        align-content: center;
        font-size: 10vh;
        transition: 200ms opacity;
        opacity: 0;
        pointer-events: none;
        z-index: 1;
    }

    #image-preview{
        position: fixed;
        top: -63vh;
        right: -13vw;
        scale: 0.4;
        z-index: 2;
        border-radius: 40px;
        border: 2px solid white;
        opacity: 1;
        transition: 200ms opacity;
    }

    #image-preview-index{
        position: absolute;
        bottom: 2vh;
        right: 2.5vw;
        width: 20.5vw;
        z-index: 2;
        color: rgb(138, 138, 138);
        font-size: 1.5vw;
        text-align: center;
    }

    #image-preview-mobile{
        display: none;
    }

    #image-preview-close-btn{
        filter: brightness(0) invert(1);
        position: fixed;
        top: -12vh;
        right: -6vw;
        scale: 0.2;
        z-index: 2;
        cursor: pointer;
        transition: 200ms opacity;
        pointer-events: none;
        opacity: 0;
    }

    #preview-app-txt{
        display: none;
    }

}


@media only screen and (max-width: 600px) {

    body{
        background-color: var(--secondary-color);
        overflow: hidden;
    }

    #centerTxt{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 5vh;
        width: 55vw;
        text-align: center;
    }

    #container{
        display: none;
        height: 100dvh;
        overflow: hidden;
    }

    #app-icon{
        position: fixed;
        top: 15%;
        left: 50%;
        transform: translate(-37%);
        scale: 0.7;
        margin-top: -7vh;
        margin-left: -16vw;
        border-radius: 20px;
    }

    #app-name{
        position: fixed;
        top: 39%;
        left: 50%;
        transform: translate(-50%);
        height: fit-content;
        width: 100vw;
        font-size: 5vh;
        color: white;
        text-align: center;
    }

    #app-author{
        position: fixed;
        top: 46%;
        left: 50%;
        transform: translate(-50%);
        height: fit-content;
        width: 100vw;
        font-size: 3vh;
        color: var(--primary-color);
        text-align: center;
    }

    #alert-box img{
        display: none;
    }

    #alert-box{
        display: none;
    }

    #alert-text{
        display: none;
    }

    #primary-btn{
        position: fixed;
        top: 60%;
        left: 50%;
        transform: translate(-50%);
        height: fit-content;
        width: 70vw;
        min-width: 15vw;
        font-size: 2vh;
        padding: 3vw;
        padding-left: 6vw;
        padding-right: 6vw;
        border-radius: 20px;
        background-color: var(--primary-color);
        color: white;
        outline: none;
        border: none;
        cursor: pointer;
        transition: 200ms opacity;
        font-family: "Roboto", sans-serif;
    }

    #primary-btn:hover{
        opacity: 0.8;
        transition: 200ms;
    }

    #primary-btn:disabled{
        opacity: 0.5;
        cursor: not-allowed;
    }

    #secondary-btn{
        position: fixed;
        top: 67%;
        left: 50%;
        transform: translate(-50%);
        height: fit-content;
        width: 70vw;
        min-width: 15vw;
        font-size: 2vh;
        padding: 3vw;
        padding-left: 6vw;
        padding-right: 6vw;
        border-radius: 20px;
        border: 2px solid var(--primary-color);
        background-color: transparent;
        color: var(--primary-color);
        outline: none;
        cursor: pointer;
        transition: 200ms opacity;
        font-family: "Roboto", sans-serif;
    }

    #secondary-btn:hover{
        opacity: 0.8;
        transition: 200ms;
    }

    #secondary-btn:disabled{
        opacity: 0.5;
        cursor: not-allowed;
    }

    #app-description-title{
        display: none;
        position: fixed;
        top: 1vh;
        left: 0;
        height: fit-content;
        width: 100vw;
        font-size: 6vh;
        color: white;
        z-index: 1;
        text-align: center;
        background-color: var(--secondary-color);
        padding-top: 2vh;
        padding-bottom: 2vh;
    }

    #sep{
        display: none;
    }

    #changes-title{
        display: none;
    }

    #app-description{
        display: none;
        position: fixed;
        top: 12vh;
        left: 0;
        height: 79vh;
        width: 90vw;
        font-size: 2.5vh;
        color: #b8b8b8;
        padding-top: 0vh;
        padding-left: 4vw;
        padding-right: 8vw;
        padding-bottom: 8vh;
        overflow-y: scroll;
        text-align: justify;
        background-color: var(--secondary-color);
    }

    #images{
        display: none;
    }

    #image-preview{
        display: none;
    }

    #image-preview-index{
        display: none;
        position: fixed;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: fit-content;
        min-width: 25vw;
        z-index: 3;
        color: black;
        background-color: white;
        font-size: 3vh;
        padding-top: 0.5vh;
        padding-bottom: 0.5vh;
        padding-left: 0.5vw;
        padding-right: 0.5vw;
        border-radius: 0 0 20px 20px;
        text-align: center;
    }

    #image-preview-mobile{
        position: fixed;
        top: -46svh;
        left: -40vw;
        scale: 0.5;
        opacity: 0;
        z-index: 2;
        pointer-events: none;
        transition: 200ms opacity;
    }

    #image-preview-mobile-prev-btn{
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 50vw;
        background-color: transparent;
        opacity: 0;
        z-index: 2;
        pointer-events: none;
        transition: 200ms opacity;
    }

    #image-preview-mobile-prev-btn p{
        font-size: 4.5svh;
        text-align: center;
        line-height: 100svh;
        color: white;
    }

    #image-preview-mobile-prev-btn h1{
        position: absolute;
        top: 53%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 3svh;
        text-align: center;
        line-height: 100vh;
        color: white;
    }

    #image-preview-mobile-next-btn{
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: 50vw;
        background-color: var(--primary-color);
        opacity: 0;
        z-index: 2;
        pointer-events: none;
        transition: 200ms opacity;
    }

    #image-preview-mobile-next-btn p{
        font-size: 6svh;
        text-align: center;
        line-height: 100svh;
        color: white;
    }

    #image-preview-mobile-next-btn h1{
        position: absolute;
        top: 53%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 3svh;
        text-align: center;
        line-height: 100vh;
        color: white;
    }

    #backdrop{
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
        background-color: black;
        color: white;
        text-align: center;
        align-content: center;
        font-size: 10vh;
        transition: 200ms opacity;
        opacity: 0;
        pointer-events: none;
        z-index: 1;
    }

    #image-preview-close-btn{
        display: none;
    }

    #preview-app-txt{
        position: fixed;
        width: fit-content;
        text-align: center;
        left: 50%;
        transform: translateX(-50%);
        bottom: 3vh;
        font-size: 2.5vh;
        color: white;
        border-bottom: 1px solid white;
        padding-bottom: 0.2vh;
    }

}