body {
    background-color: rgb(232, 212, 148);
}

#Topbar {
    background-color: rgb(184, 129, 11);
    display: flex;
    position: fixed;
    align-items: center;
    height: 10%;
    width: 100%;
    border-top-left-radius: 2.2vh;
    border-bottom-left-radius: 2.2vh;
    pointer-events: none;
}

#MainIcon {
    aspect-ratio: 1/1;
    height: 70%;
    margin-right: 15px;
    margin-left: 5px;
}

#TopbarText {
    font-family: "Chelsea Market";
    color: rgb(250, 174, 19);
    font-size: 3.3vh;
}

#Upload {
    font-family: "Chelsea Market";
    background-color: rgb(250, 174, 19);
    color: rgb(184, 129, 11);
    font-size: 3vh;
    border: none;
    border-radius: 0.6vw;
    justify-self: right;
    position: fixed;
    right: 1%;
    transition: 0.1s;
    cursor: pointer;
    pointer-events: all;
}

#Upload:hover {
    background-color: rgb(246, 179, 47);
    rotate: -2deg;
}

#FAQ {
    font-family: "Chelsea Market";
    background-color: rgb(250, 174, 19);
    color: rgb(184, 129, 11);
    font-size: 3vh;
    border: none;
    border-radius: 0.6vw;
    margin-left: 1%;
    transition: 0.1s;
    cursor: pointer;
    pointer-events: all;
}

#FAQ:hover {
    background-color: rgb(246, 179, 47);
    rotate: -2deg;
}

#Images {
    overflow: hidden;
    height: 70%;
    width: 60%;
    position: fixed;
    display: flex;
    background-color: rgb(184, 129, 11);
    left: 50%;
    top: 60%;
    transform: translate(-50%, -60%);
    border-radius: 2.2vh;
    pointer-events: none;
}

#CentralImage {
    transition: 0.5s;
    position: fixed;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-bottom-right-radius: 2.2vh;
    border-bottom-left-radius: 2.2vh;
}
#TransitionImage {
    transition: 0.5s;
    position: fixed;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-bottom-right-radius: 2.2vh;
    border-bottom-left-radius: 2.2vh;
    transform: translate(100%, 0%);
}

#Roll {
    width: 60px;
    height: 60px;
    left: 50%;
    top: 95%;
    transform: translate(-50%, -95%);
    position: fixed;
    display: block;
    border-radius: 100%;
    border: none;
    background-color: rgb(250, 174, 19);
    align-items: center;
    justify-content: center;
    font-size: 3vw;
    transition: 0.5s;
    cursor: pointer;
    pointer-events: all;
}

#Roll:hover {
    height: 70px;
    width: 70px;
}

#RollContent {
    width: 100%;
}

#DownloadButton {
    aspect-ratio: 1/1;
    height: 8%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 0%;
    position: fixed;
    border-bottom-left-radius: 2vh;
    background-color: rgb(250, 174, 19);
    transition: 0.3s;
    pointer-events: all;
    cursor: pointer;
}

#DownloadButton:hover {
    border-radius: 2vh;
    background-color: rgb(246, 179, 47);
}

#DownloadIcon {
    width: 60%;
}

#UploadPanel {
    position: fixed;
    width: 70%;
    height: 70%;
    left: 50%;
    top: 400%;
    transform: translate(-50%, -400%);
    display: block;
    padding-left: 2%;
    background-color: rgb(184, 129, 11);
    color: rgb(250, 174, 19);;
    font-family: "Chelsea Market";
    border-radius: 2.2vh;
    pointer-events: none;
    transition: 1.5s;
}

#UrlInput {
    background-color: rgb(250, 174, 19);
    color: rgb(184, 129, 11);
    border: none;
    font-size: 2vw;
    font-family: "Chelsea Market";
    border-radius: 0.6vw;
    transition: 0.1s;
    pointer-events: all;
}

#UrlInput:focus {
    outline: none;
    background-color: rgb(246, 179, 47);
    rotate: -2deg;
}

#FileInput {
    pointer-events: all;
}

#Submit {
    background-color: rgb(250, 174, 19);
    color: rgb(184, 129, 11);
    border: none;
    font-size: 2vw;
    font-family: "Chelsea Market";
    border-radius: 0.6vw;
    transition: 0.1s;
    pointer-events: all;
}

#Submit:hover {
    background-color: rgb(246, 179, 47);
    rotate: 2deg;
}