/*general*/

body {
    font-family: "Space Mono", sans-serif;
    background-color:rgb(236, 232, 227);
    overflow: hidden;
}

header {
    font-size: 20px;
}

p {
    font-size: 15px;
    line-height: 20px;
}

button {
    font-family: "Space Mono", sans-serif;
}

input {
    font-family: "Space Mono", sans-serif;
}

.italics {
    font-style: italic;
}

.bold {
    font-weight: bold;
}

.underline {
    text-decoration: underline;
    cursor: pointer;
}

#hoverMenu {
    width: 100vw;
    height: 70px;
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgb(206, 178, 178);
    z-index: 1;
    opacity: 0;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

#hoverMenu:hover {
    animation-name: slide;
    animation-duration: 4s;
    animation-fill-mode: forwards;
}

@keyframes slide {
    0% {opacity: 0}
    25% {opacity: 25;}
    50% {opacity: 50;}
    75% {opacity: 75;}
    100% {opacity: 100;}
}

#hoverMenu img {
    object-fit: cover;
    height: 70px;
    width: 100px;
    border-left: 5px rgb(49, 48, 47) double;
    border-right: 5px rgb(49, 48, 47) double;
}

#hoverMenu button {
    height: 50px;
    background-color: rgb(49, 48, 47);
    font-family: "Space Mono", sans-serif;
    border: none;
    border-radius: 15px;
    padding: 10px;
    cursor: pointer;
    color: white;
}

#hoverMenu:has(#moneyButton:focus) { /**/
    opacity: 100;
}

#moneyButton:focus::after {
        display: grid;
        position: absolute;
        z-index: 2;
        top: 90px;
        left: 30px;
        width: 150px;
        height: 150px;
        background-color: rgb(49, 48, 47);
        animation-name: fakeLoad;
        animation-duration: 4s;
        animation-delay: 2s;
        animation-fill-mode: forwards;
        content: "Ready to help?";
        border-radius: 15px;
        place-items: center;        
        box-sizing: border-box;
        padding: 10px;
        }

#moneyButton:focus::before {
    height: 0;
    width: 0;
    border-bottom: 10px solid rgb(49, 48, 47); /*width style(solid,etc) color*/
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    position: absolute;
    z-index: 3;
    top: 80px;
    left: 95px;
    content: "";
}

@keyframes fakeLoad {
    0% {content: "Payment Processing.";}
    20% {content: "Payment Processing..";}
    40% {content: "Payment Processing...";}
    75% {content: "Payment Complete! Thank You!";}
    100% {content: "We rely on visitors like you to fund our high-quality site!";}
}

.topDisp {
    width: 250px;
}

.topDisp p {
    font-size: 12px;
    text-align: center;
    text-decoration: underline;
    cursor: pointer;
}

/*article*/

#apFoCon { /*div holding apple img*/
    width: 100vw;
    height: 500px;
    background-attachment: fixed;
    background-image: url("computer.jpg");
    background-size: cover;
    background-position: top;
    margin-left: -1vw;
    margin-top: -1vw;
    position: relative;
}

#homeHead { /*header/title of article*/
    padding: 10px;
    border-radius: 25px;
   z-index: 2;
    width: 70%;
    background-color: rgb(206, 178, 178);
    position: relative;
    box-sizing: border-box;
    justify-content: center;
    margin: auto;
    display: flex;
    top: -26px;
}

#storySpot {
 margin-top: -2vh;
}

#storySpot p { /*article/story imported from story.js*/
    margin-left: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
    line-height: 20px;
}

.inUseAd { /*ads which pop up after user is logged in*/
    position: fixed;
    z-index: 3;
    background-color: rgb(105, 101, 105);
    overflow: hidden;
    border-style: solid;
    padding-left: 10px;
    padding-right: 10px;
    width: 250px;
    height: 250px;
    box-shadow: 5px 5px 200px 0px; /*1 shifts left(-)/right(+), 2 shifts up(-)/down(+),
    3 transparency(0 solid), 4 spread(+ = more spread)*/
}

.ads {
    display: none;
}

#ad1 { /*grocery/beans ad (1) of .ads*/
    width: 250px;
    height: 300px;
}

.inUseAd img { /*imgs on .ads*/
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.closeAd { /*x buttons on .ads*/
    float: right;
    border: none;
    background-color: transparent;
    padding-top: 5px;
    cursor: pointer;
}

/*paywall*/

#paywall { /*div covering whole page to make #box appear*/
    position: fixed;
    height: 100vh;
    overflow: scroll;
    top: 0;
    width: 100vw;
    left: 0;
    opacity: 0;
}

#box { /*box at bottom which shows up when user scrolls*/
    background-color:rgb(105, 101, 105);
    height: 300px;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    margin-top: 400px;
    box-shadow: 0px 50px 120px 5px;
}

#golog { /*word "log in" on #box -> directs to login page*/
    text-decoration: underline;
    cursor: pointer;
}

#signUp { /*word "sign up" on #box -> directs to sign up page*/
    text-decoration: underline;
    cursor: pointer;
}

/*login*/

#login { /*entire login page*/
    top: 0;
    width: 100%;
    text-align: center;
}

#loghead { /* header "Enter your login info"*/
    padding-top: 100px;
}

#ifLogTrue { /*displays if login was successful/failed*/
    font-size: 10px;
}

/*signup*/

#onboard:not([hidden]) { /*entire sign up page*/
    display: flex;
    width: 100%;
}

#onboardAct, #onboardAd {
    flex: 1 1 0;
}

#onboardAct { /*left-hand div w/ #signhead & inputs for username + pass*/
    padding-top: 70px;
    text-align: center;
}

#signhead { /*left-hand header "create an account"*/
    padding-top: 20px;
}

#onboardAd { /*right-hand div w/ "access +100.." & img*/
    top: 0;
    right: 0;
    padding-top: 100px;
    text-align: center;
}

#onboardAd img {
    width: 100%;
    max-width: 400px;
}