.backgroundDevin {
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: -1;

    background: url(../IMG/1.jpg) no-repeat top 40% center;
    background-size: cover;

    transform: scale(105%);
    transition: 0.75s;
}



/* LEFT SIDE OF THE LANDING PAGE */

.landing {
    position: absolute;
    width: 100%;
    height: 100vh;
    z-index: 1;
}

.landing h1 {
    padding-left: 9.5vw;
    text-align: left;
    margin-top: 15vh;

    color: #fff;
    font-size: calc(0.5em + 5vw);
    text-shadow: #000 5px 5px 30px;
    font-weight: 100;
    font-family: "Caveat", cursive;
}

.landing h2 {
    padding-left: 10vw;
    padding-top: 5vh;
    text-align: left;

    color: #fff;
    text-shadow: #000 2px 2px 18px;
    font-weight: 400;
    font-size: calc(0.75em + 0.6vw);
}

.landing ul {
    padding-left: 10vw;
}

.landing ul li {
    float: left;
    list-style-type: none;
    padding-right: 10px;

    color: #fff;
    text-shadow: #000 1px 1px 10px;
    font-size: calc(0.5em + 0.6vw);
}



/* RIGHT SIDE OF THE LANDING PAGE */

#infoCard {
    position: absolute;
    top: 20vh;
    right: 10vw;
    height: fit-content;
    width: calc(10vh + 15vw);

    border: solid white 1px;
    border-radius: 10px;
    box-shadow: #0008 5px 5px 50px;

    opacity: 0%;
    transition: 0.75s;
    transform: translateY(50px);
}

#infoCard h1 {
    font-size: calc(2rem + 2vw);
    padding: 0px;
    margin: 0px;

    color: #fff;
    font-weight: 900;
    text-align: center;
}

#infoCard p {
    padding: 5vh 2vh 2vh;
    text-align: justify;
    text-align-last: left;

    font-size: calc(0.5em + 0.6vw);
    text-shadow: #000 2px 2px 15px;
    color: #fff;
}

unique {
    font-family: "Caveat", cursive;
    font-weight: 800;
    font-size: 1.1em;
}

.infoCardDetail1 {
    position: absolute;
    top: calc(75vh + 10px);
    right: 10vw;
    height: 15px;
    width: calc((10vh + 15vw) / 2);

    background-color: #fff;
    border-radius: 10px;
    box-shadow: #0008 5px 5px 50px;

    opacity: 0%;
    transform: translateY(25px);
    transition: 0.75s;
}

.infoCardDetail2 {
    position: absolute;
    top: calc(75vh + 35px);
    right: 10vw;
    height: 15px;
    width: 30px;

    background-color: #fff;
    border-radius: 10px;
    box-shadow: #0008 5px 5px 50px;

    opacity: 0%;
    transform: translateY(25px);
    transition: 0.65s;
}

.content {
    width: 100%;
    min-height: 100vh;
    transform: translateY(100vh);
    z-index: 1;
    margin-bottom: 5vh;

    background-color: #fff;
    box-shadow: #0008 0px 0px 50vh 10vh;
    overflow: hidden;
}

#animate1 {
    opacity: 0%;
    transform: translateY(50px);
    transition: 0.75s;
}

#animate2 {
    opacity: 0%;
    transform: translateY(50px);
    transition: 0.75s;
}

#animate3 {
    opacity: 0%;
    transform: translateY(50px);
    transition: 0.75s;
}



/* IMAGE SCROLLING BUTTONS */

#prevImage {
    position: absolute;
    height: 100vh;
    width: 10vw;
    top: 0px;
    left: 0px;

    background: linear-gradient(to right, #0008, #0000);
    
    transition: 0.5s;
}

#prevImage:active {
    filter: invert(100%);
}

#nextImage {
    position: absolute;
    height: 100vh;
    width: 10vw;
    top: 0px;
    right: 0px;

    background: linear-gradient(to left, #0008, #0000);

    transition: 0.5s;
}

#nextImage:active {
    filter: invert(100%);
}

#moreScroll {
    position: absolute;
    bottom: 5vh;
    width: 100%;

    text-align: center;
    color: #fff8;
    line-height: 10px;
    pointer-events: none;

    opacity: 0%;
    transition: 0.75s;
}



/* EVERYTHING INSIDE OF THE CONTENT CLASS */

.content h1 {
    text-align: center;

    color: #224;
    font-size: calc(0.5em + 5vw);
    font-weight: 100;
    font-family: "Caveat", cursive;
}

#contentDecoration1 {
    position: absolute;
    right: 15vw;
    width: 20vw;
    height: 20vw;

    background: url(../IMG/GRADUATION.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    transition: 0.5s;
    transform: scale(90%) translateX(55vw);
}

#contentDecoration2 {
    position: absolute;
    left: 15vw;
    width: 20vw;
    height: 20vw;

    background: url(../IMG/SKATING.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    transition: 0.5s;
    transform: scale(90%) translateX(-55vw);
}

#middleLine {
    position: absolute;
    width: 50%;
    margin-left: 20%;
    margin-right: 20%;
    padding-left: 5%;
    padding-right: 5%;
    height: 3px;

    background-color: #224;
    border-radius: 5px;
    text-align-last: justify;
    z-index: -1;

    transition: 0.5s;
}

.timelineDeco {
    display: inline-block;
    width: 3px;
    height: 20px;

    background-color: #224;
    border-radius: 5px;
    pointer-events: none;

    transition: 0.5s;
}

.timelineDecoBall {
    bottom: 0px;
    width: 5px;
    height: 5px;
    transform: translateX(-1px) translateY(15px);

    border-radius: 10px;
    background-color: #224;
    pointer-events: none;

    transition: 0.5s;
}

.leftTL {
    width: 40%;
    margin-left: 5%;
    margin-right: 50%;
    padding-right: 5%;
    margin-top: 5vh;

    box-shadow: inset #224 0px -1px;
    color: #224;
    text-align: justify;
    text-align-last: left;
    
    transition: 0.5s;
    opacity: 0%;
    transform: scale(90%);
}

.leftTL h2 {
    cursor: pointer;
}

.leftTL h2:hover {
    text-decoration: underline;
}

.rightTL {
    width: 40%;
    padding-left: 5%;
    margin-right: 5%;
    margin-left: 50%;
    margin-top: 5vh;

    text-align: right;
    box-shadow: inset #224 0px -1px;
    color: #224;
    text-align: justify;
    text-align-last: right;

    transition: 0.5s;
    opacity: 0%;
    transform: scale(90%);
}

.rightTL h2 {
    cursor: pointer;
}

.rightTL h2:hover {
    text-decoration: underline;
}