journal.css

*, *::before, *::after {
    margin: 0;
    padding: 0;
    inset: 0;
    box-sizing: border-box;
}

/*
██████   ██████   ██████  ████████
██   ██ ██    ██ ██    ██    ██
██████  ██    ██ ██    ██    ██
██   ██ ██    ██ ██    ██    ██
██   ██  ██████   ██████     ██

██    ██  █████  ██████  ██  █████  ██████  ██      ███████ ███████
██    ██ ██   ██ ██   ██ ██ ██   ██ ██   ██ ██      ██      ██
██    ██ ███████ ██████  ██ ███████ ██████  ██      █████   ███████
 ██  ██  ██   ██ ██   ██ ██ ██   ██ ██   ██ ██      ██           ██
  ████   ██   ██ ██   ██ ██ ██   ██ ██████  ███████ ███████ ███████

*/

:root {
    --yellow: #ffffaa;
    --purple: #523ea3;
    --orange: #FF6700;
    --black: #12130F;
    --blue: #23F3FB;
    --lightPurple:  #9d8fd4;

}

/*
███    ██  █████  ██    ██ ██  ██████   █████  ████████ ██  ██████  ███    ██
████   ██ ██   ██ ██    ██ ██ ██       ██   ██    ██    ██ ██    ██ ████   ██
██ ██  ██ ███████ ██    ██ ██ ██   ███ ███████    ██    ██ ██    ██ ██ ██  ██
██  ██ ██ ██   ██  ██  ██  ██ ██    ██ ██   ██    ██    ██ ██    ██ ██  ██ ██
██   ████ ██   ██   ████   ██  ██████  ██   ██    ██    ██  ██████  ██   ████

██████   █████  ██████
██   ██ ██   ██ ██   ██
██████  ███████ ██████
██   ██ ██   ██ ██   ██
██████  ██   ██ ██   ██
*/

/*

Needs site logo, and name, and ect.. with links..

*/

header {
    position: fixed;
    background-color: var(--yellow);
    width: 100vw;
    height: 5vw;
}

.NavList {
    background-color: var(--purple);
    color: var(--yellow);
}

ul {
    font-size: 2.2vw;
    font-weight: bold;
    background-color: var(--purple);
    color: var(--yellow);
    gap: 1vw;
    list-style: none;

    display: grid;
    width: 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas:
        "one two three four"
    ;
    justify-content: baseline;
    align-items: baseline;
    text-align: center;
}

.pathList, .contactList, .projectList, .journalList {
    display: block;
}


.item1 {
    grid-area: "one";
}

.item2 {
    grid-area: "two";
}

.item3 {
    grid-area: "three";
}

.item4 {
    grid-area: "four";
}
.bar {
    grid-area: "bar"
}

.item1 li, .item2 li, .item3 li, .item4 li {
    display: none;

}
.item1:hover li, .item2:hover li, .item3:hover li, .item4:hover li {
    display: block;
}

li {
    display: block;
    transition-duration: .5s;
}

li, li > a {
    font-size: 2.2vw;
    background-color: var(--purple);
    color: var(--yellow);
    text-decoration: none;
    padding: 1%;
    margin: 1%;
    border-radius: 10px;
}
li:hover a:hover {
    color: var(--purple);
    background-color: var(--blue);
    opacity: .8;
    font-size: 1.1em;
    border-radius: 10px;
}


/*

██████   ██████  ██████  ██    ██
██   ██ ██    ██ ██   ██  ██  ██
██████  ██    ██ ██   ██   ████
██   ██ ██    ██ ██   ██    ██
██████   ██████  ██████     ██


*/



body {
    background-color: var(--purple);
    color: var(--black);
    margin-top: 5.5vw;
}



/*

   __
  / _|   ___    _ __   _ __ ___    ___
 | |_   / _ \  | '__| | '_ ` _ \  / __|
 |  _| | (_) | | |    | | | | | | \__ \
 |_|    \___/  |_|    |_| |_| |_| |___/


*/


.forms {
    display: grid;
    grid-template-areas:
    "titleInput"
    "textInput"
    "dateInput"
    "emailInput"
    "urlInput"
    "fileInput"
    "postBtn"
    ;
    text-align: center;
    color: yellow;
    font-weight: bold;
    margin: 0 15vw;
    background-color: #9d8fd4;
    border: 5px solid var(--yellow);
    border-radius: 10px;
    padding: 2vw;
    font-size: 5vw;
}

input[type="file"] {
    display: none;
}
i {
    margin: 4%;
    padding: 2%;
}

.titleInput,
.textInput,
.dateInput,
.urlInput,
.fileInput,
.emailInput {
 width: 50%;
 inset: 0;
 margin: auto;
}

.formSection {
    width: 100%;
}

.postBtn {
    margin: 5px auto;
    width: 50%;
    padding: 1vw;
    border-radius: 15px;
    border: none;
    box-shadow: 0 0 10px purple;
    background-color: var(--yellow);
    color: var(--purple);
    font-weight: bold;
    font-size: 1.2rem;
}

.postBtn:hover {
        margin: 5px auto;
        width: 50%;
        padding: 1vw;
        border-radius: 15px;
        border: none;
        box-shadow: 0 0 10px var(--yellow);
        background-color: whitesmoke;
        color: var(--purple);
}

.titleInput {

    grid-area: titleInput;

}
.textInput {
    grid-area: textInput;
}
.dateInput {
    grid-area: dateInput;
}
.imageInput {
    grid-area: imageInput;
}
.urlInput {
    grid-area: urlInput;
}
.fileInput {
    grid-area: fileInput;
}
.emailInput {
    grid-area: emailInput;
}
.postBtn {
    grid-area: postBtn;
}





/*
   ___    ___    _ __   | |_    ___   _ __   | |_
  / __|  / _ \  | '_ \  | __|  / _ \ | '_ \  | __|
 | (__  | (_) | | | | | | |_  |  __/ | | | | | |_
  \___|  \___/  |_| |_|  \__|  \___| |_| |_|  \__|
*/


.postContainer {
    display: flex;
    flex-direction: column-reverse;
    padding: -20px;
    flex-basis: content;
}

.renderedEls {
    font-family: 'cursive','Courier New', Courier, monospace;
    background: var(--purple);
    width: 100vw;
    height: 60vh;
    color: var(--yellow);
    text-align: center;
    border-radius: 30px;
    margin: 1rem auto ;
    display: grid;
    grid-template-areas:
        "title title title"
        "texts texts texts"
        "year year year"
        "file file file"
    ;
    box-shadow: 0 0 40px black;
    overflow-y: auto;
    scrollbar-gutter: stable both-edges;
    border: 5px solid var(--lightPurple);
}


.title {
    font-size: 8vw;
    background-color: var(--yellow);
    color: var(--purple);
    border-bottom: 1vmin solid var(--lightPurple);
    width: 100%;
    height: 85%;
    grid-area: title;
}
.content {
    font-size: 6vw;
    font-weight: 600;
    line-height: 1.25;
    grid-area: texts;
    width: 90vw;
    margin: 1%;
    padding: 1%;
}
.userName {
    grid-area: userName;
}

.year {
    grid-area: year;
    text-align: center;
    align-self: center;
    margin: 0 auto;
}

.file {
    grid-area: file;
    box-shadow: 0 0 10px white ;
    margin-top: 5%;
}

.content,
.year,
.file {
    width: 90%;
    height: 80%;
    font-size: 5vw;
    margin: 0 6px;
    justify-self: center;
}


/* width */
::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: var(--yellow);
    border-radius: 8%;
  }

  ::-webkit-scrollbar-track:active {
    background: var(--orange);
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: var(--purple);
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: var(--black);
  }


  .drakeLyrics {
    font-size: inherit;
    background: none;
    color: var(--purple);
  }

  .drakeLyrics:not(.active) {
    font-size: inherit;
    background: none;
    color: var(--purple);
  }

  


  /* 
  
  about me page
  
  */

  .aboutMe {
    margin: 0 auto;
  }

  .AboutMeBody {
    background-color: var(--purple);
    color: var(--yellow);
  }

  .AboutMeTitle {
    text-align: center;
    font-size: 4vw;

}

.AboutMePhoto {
    border-radius: 50%;
    width: 20vw;
    box-shadow: 0 0 100px purple;
    border: 2px solid var(--yellow);
    margin-left: 40vw;
    margin-top: 2vw;
    border-bottom: 10px solid rgb(245, 216, 254);
}

.EducationTitle {
    display: block;
    text-align: center;
    width: 100%;
    inset: 0;
    margin: 0 auto;
}

.AboutMeList {
    display: flex;
    justify-content: center;
}
.AboutMeDescription {
    /* margin: 5px auto; */
    font-size: 2.5vw;
    padding: 1.5vw;
    background-color: var(--yellow);
    color: var(--purple);
    font-weight: bold;
    line-height: 1.5;
    border-radius: 4%;
    justify-content: center;
}

.RecentPostTitle {
    text-align: center;
    margin: 0 auto;
    margin-top: 25vh;
    font-size: 3.5vw;
    border-bottom: 5px solid var(--lightPurple);
}


/* 

featured post

*/
.featuredPost {
    background-color: purple;
    background-image: url("./Images/GeoDesign4.png");
    background-size: 40%;
    background-blend-mode: overlay;
}
.featuredSectionBody, .RecentPostTitle {
    background-color: var(--purple);
    color: var(--yellow);
}

.featuredSectionContainer {
    width: 90vw;
    height: 50vh;
    
}

.featuredPostImage {
    display: block;
    width: 35vw;
    height: 40vw;
    margin: 0 auto;
    box-shadow: 0 0 200px whitesmoke;
    border-radius: 20px;
    border: solid var(--lightPurple) 2px;
}

.FeaturedPostContainer {
    width: 100vw;
    height: 30%;
}

.featuredPostTitle {
    text-align: center;
    font-size: 8vw;
    background-color: var(--yellow);
    color: var(--purple);
    border-bottom: 1vmin solid var(--lightPurple);
    box-shadow: 0 0 20px black;
    margin: 5px auto;
}

.featuredPostContent {
    font-size: 3.9vw;
    font-weight: 600;
    line-height: 1.25;
    width: 100%;
    background: var(--purple);
    text-wrap: wrap;
    overflow-y: auto;
}

.fpTitle {
    box-shadow: 5px 2px 50px black;
    font-size: 5vw;
    text-align: center;
    text-decoration: underline;
}
.featuredPostYear {
    text-align: center;
    background: var(--purple);
    padding: 2%;
    font-size: 2.5vw;
    border-radius: 40%;
    font-weight: bold;
    margin: 0 30%;
}



/*

███    ███ ███████ ██████  ██  █████
████  ████ ██      ██   ██ ██ ██   ██
██ ████ ██ █████   ██   ██ ██ ███████
██  ██  ██ ██      ██   ██ ██ ██   ██
██      ██ ███████ ██████  ██ ██   ██


*/

@media (max-width: 580px) {

    .item1:active li, .item2:active li, .item3:active li, .item4:active li {
        display: block;
    }
}

@font-face {
    font-family: "cursive";
    src: url(./Fonts/Cedarville-Cursive.ttf);
}

@media (min-width: 1000px) {

    .postContainer {
        display: flex;
        flex-direction: row-reverse;
        flex-wrap: wrap-reverse;
        margin: 0;
        width: 100%;
    }



    .renderedEls {
        width: 32vw;
        height: 50vh;
        gap: 1px;
    }


    .title {
        font-size: 3vw;
    }

    .content {
        font-size: 3.5vw;
    }
    .year {
        font-size: 2vw;
    }

    .AboutMeDescription {
        margin: 2vmax 10vw;
        font-size: 1.5vw;
        padding: 1vw;
        background-color: var(--yellow);
        color: var(--purple);
        font-weight: bold;
        line-height: 1.5;
        border-radius: 4%;
    }



}

@media (min-width: 550px) and (max-width: 999px)  {
    .postContainer {
        display: flex;
        flex-direction: row-reverse;
        flex-wrap: wrap-reverse;
        padding: 10px;
        margin: 0;

    }

    .renderedEls {

        width: 45vw;
        height: 50vh;

    }


    .title {

        font-size: 5vw;
    }

    .AboutMeDescription {
        margin: 2vmax 10vw;
        font-size: 1.5vw;
        padding: 1vw;
        background-color: var(--yellow);
        color: var(--purple);
        font-weight: bold;
        line-height: 1.5;
        border-radius: 4%;
    }

    .content,
    .userName,
    .year,
    .website {
        width: 100%;
        font-size: 2vw;
        margin: 0 6px;
    }

}

footer {

    background-color: var(--yellow);
    color: var(--lightPurple);
    text-align: center;
    font-weight: bold;
    

}

footer a {
    color: var(--lightPurple);
}

footer a:hover {
    color: var(--purple);
}