/*html element, 
sets the width and height of the page to 100 of the view port, 
removes margin and padding*/
html {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
}

/*sets the box model to include the border and padding*/
* {
    box-sizing: border-box;
}

/*body element, 
sets the display to flex, 
the font family to Oswald, 
the width and height to 100 of the view port, 
removes margin and padding, 
sets the background color to gray, 
and sets the justify content to center*/
body {
    color: rgb(0, 31, 12);
    display: flex;
    font-family: "Oswald", sans-serif;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    background-color: rgb(217, 217, 217);
    justify-content: center;
}

/*container for the timeline, 
sets the font family to Oswald, 
sets the position to absolute, 
sets the width and height to 100 of the view port, 
sets the display to flex, and sets the justify content to center*/
.container_timeline {
    font-family: "Oswald", sans-serif;
    position: absolute;
    width: 100vw;
    height: 40vh;
    top: -8vw;
    display: flex;
    justify-content: center;
    transition: transform 0.15s linear;
}

/*sets the font family to Oswald, sets the position to absolute,
 sets the width and height to 50 of the view port, 
 sets the display to flex, and sets the justify content to center*/
.timeline {
    font-family: "Oswald", sans-serif;
    position: absolute;
    width: 60vw;
    height: 40vh;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

/*sets the position of the svg image to absolute, 
sets the width and height to 30, and sets the top to -15 of 
the view port*/
#svg_image {
    position: absolute;
    width: 30;
    top: -20vw;
    height: 40vw;
}

/*sets the fill of the svg path to rgb(245, 66,74)*/
.cls-1 {
    fill: rgb(245, 66, 74);
    z-index: 2;
}

/*sets the fill of the svg path to none, 
sets the stroke to black, sets the stroke width to 50px, 
and sets the z-index to 1*/
.cls-2 {
    fill: #000;
    z-index: 1;
}

/*sets the width and height of the tick to 2px, 
sets the background color to gray, sets the position to absolute, 
and sets the z-index to 2*/
.tick {
    transform-origin: top center;
    z-index: 2;
    width: 2px;
    background: repeating-linear-gradient(black,
            black 5px,
            rgba(0, 0, 0, 0) 5px,
            rgba(0, 0, 0, 0) 10px);
    position: absolute;
    transition: "all 0.5s ease-in-out";
}

#circletext2 {
    text-shadow: 0 0 10px rgb(0, 31, 12, 0.4);
}

/*sets the position of the article container to absolute, 
sets the width and height to 100 of the view port, 
sets the padding to 2 of the view port, sets the display to grid, 
and sets the grid template areas*/
#article_container {
    position: absolute;
    bottom: 0;
    width: 100vw;
    height: 80vh;
    padding: 0 5vw 5vw 5vw;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: min-content auto;
    grid-template-areas:
        "date date date date"
        "image article article image1";
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

/*sets the border bottom of the date container to 10px solid EF3054, 
sets the width to 25%, sets the display to flex, 
and sets the align items and justify content to center*/
#date_container {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    grid-area: date;
    margin: 0;
    overflow: visible;
    height: fit-content;
}

/*sets the display of the date to flex, 
sets the align items and justify content to center,
sets the margin to 0, and sets the font size to 9 of the view port*/
#date {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-size: 10vw;
    width: 100%;
    height: 21vh;
}

/*sets the display of the image to flex, 
sets the align items and justify content to center, 
sets the grid area to image, sets the width and height to 100%, 
and sets the overflow to hidden*/
.image {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    grid-area: image;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/*sets the grid area of the image to image, 
sets the width and height to 100%, and sets the overflow to hidden*/
#image0 {
    overflow: hidden;
    width: 100%;
    height: 100%;
}

#date_underline {
    position: absolute;
    overflow: hidden;
    width: 85%;
    top: 0;
    height: 3%;
}

/* need to set keyframe randomly */
@keyframes jiggle {
    20% {
        transform: rotate(15deg) scale(0.87);
    }

    40% {
        transform: rotate(-11deg) scale(1.04);
    }

    60% {
        transform: rotate(4deg) scale(0.9);
    }

    80% {
        transform: rotate(-6deg) scale(1.1);
    }

    100% {
        transform: rotate(0deg) scale(1);
    }
}

@keyframes selected {
    0% {
        transform: scale(1.2) rotate(-7deg);
    }

    50% {
        transform: scale(1.1) rotate(7deg);
    }
}

/*sets the animation of the image to jiggle, 
sets the animation duration to 1.3 seconds, 
and sets the animation steps to 1*/
#image0 img {
    transform: rotate(-7deg);
    animation: jiggle 1.3s steps(1) normal both;
    width: 80%;
    height: 80%;
    object-fit: scale-down;
}

/*sets the object fit of the image to scale down, 
and sets the padding to 20px 10px 0 10px*/
.image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

/*sets the grid area of the image to image1, 
sets the width and height to 100%, and sets the overflow to hidden*/
#image1 {
    grid-area: image1;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/*sets the column count of the text to 2, 
sets the column gap to 20px, sets the column fill to auto, 
sets the padding to 0 10px, sets the width and height to 100%, 
and sets the overflow to hidden*/
.text {
    grid-area: article;
    column-count: 2;
    column-gap: 20px;
    column-fill: balance;
    padding: 0 20px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* for the notes*/
.text img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0 20px 6vh 20px;
    object-fit: scale-down;
}

/*makes the audio player (does not change alot)*/
.text audio {
    position: absolute;
    display: flex;
    width: 25%;
    left: calc(50% - 12.5%);
    bottom: 5vw;
    background: none;
    border-radius: 10px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    z-index: 1;
    opacity: 0.3;
}

/*sets the color of the h1 to EF3054, 
sets the padding and margin to 0, 
and sets the font size to 1.2rem*/
.text h2 {
    color: rgb(245, 66, 74);
    padding: 0;
    margin: 0;
    font-size: 1.2rem;
}

/*sets the padding and margin of the p to 0, 
sets the font size to 0.8rem*/
.text p {
    padding: 5px 0 10px 0;
    margin: 0;
    font-size: 1rem;
}

/* Sets the icon to not be selectable by the user, 
and removes the animation */
.icon {
    animation: none;
    user-select: none;
    max-width: 70px;
    max-height: 70px;
}

.icon img {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}

/* Sets the animation to be played when the icon is hovered */
.icon:hover {
    animation: selected 0.7s steps(1) infinite;
}