/*Projects*/
.pic_box {
    position: relative;
    margin-left: 6em;
    margin-top: 100px;
    margin-bottom: 10em;
    width: 40%;
    height: 0;
    padding-bottom: 35%;
    display: block;
    background-color: #2222228c;
    border-radius: 20%;

    opacity: 0;
    transform: translateX(-15em);
    transition: transform 2s .25s cubic-bezier(0.42, 0, 0, 0.95),
                opacity .5s .25s cubic-bezier(0.67, 0.01, 0.99, 1);
    will-change: transform, opacity;
}

.pic_box.is_visible {
    opacity: 1;
    transform: translate(.05em);
}

/*Bobble Basketball*/
.bobble_basketball1 {
    position: absolute;
    width: 100%;
    height: 40em;
    left: 8%;
    top: 4%;

    opacity: 0;
    transform: scale(0.5) translateX(-15em) rotateZ(-5deg);
    transition: opacity .5s .25s cubic-bezier(0.67, 0.01, 0.99, 1),
                transform 2s .25s cubic-bezier(0.42, 0, 0, 0.95);
}

.bobble_basketball1 img {
    width: 100%;
    height: auto;
}

.bobble_basketball1.is_visible {
    opacity: 1;
    transform: scale(1) translateX(0em) rotateZ(2deg);
}

.bobble_basketball2 {
    position: absolute;
    width: 18%;
    height: 10em;
    top: 23em;
    left: 1.5em;

    opacity: 0;
    transform: scale(0.5) translateX(15em) rotateZ(5deg);
    transition: opacity .5s .25s cubic-bezier(0.67, 0.01, 0.99, 1),
                transform 2s .25s cubic-bezier(0.42, 0, 0, 0.95);
}

.bobble_basketball2 img {
    width: 100%;
    height: auto;
}

@media (min-width: 1500px) {
    .bobble_basketball2.is_visible {
        opacity: 1;
        transform: scale(1) translateX(0em) rotateZ(-3deg);
    }
}

.bobble_basketball3 {
    position: absolute;
    width: 7%;
    height: 1em;
    top: 30em;
    left: 37%;

    opacity: 0;
    transform: scale(1.5) rotateZ(-10deg);
    transition: opacity .5s .25s cubic-bezier(0.67, 0.01, 0.99, 1),
                transform 2s .25s cubic-bezier(0.42, 0, 0, 0.95);
}

.bobble_basketball3 img {
    width: 100%;
    height: auto;
}

@media (min-width: 1500px) {
    .bobble_basketball3.is_visible {
        opacity: 1;
        transform: scale(1) translateX(0em) rotateZ(5deg);
    }
}

.gameDiv {
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 0;
    padding-bottom: 35%;
}

/*Dimensional Tic Tac Toe*/

.tictactoe1 {
    position: absolute;
    width: 100%;
    height: 40em;
    left: 8%;
    top: 4%;

    opacity: 0;
    transform: scale(0.5) translateX(-15em) rotateZ(-5deg);
    transition: opacity .5s .25s cubic-bezier(0.67, 0.01, 0.99, 1),
                transform 2s .25s cubic-bezier(0.42, 0, 0, 0.95);
}

.tictactoe1 img {
    width: 100%;
    height: auto;
}

.tictactoe1.is_visible {
    opacity: 1;
    transform: scale(1) translateX(0em) rotateZ(2deg);
}

.tictactoe2 {
    position: absolute;
    width: 30%;
    height: auto;
    top: 23em;
    left: 1.5em;

    opacity: 0;
    transform: scale(0.5) translateX(15em) rotateZ(5deg);
    transition: opacity .5s .25s cubic-bezier(0.67, 0.01, 0.99, 1),
                transform 2s .25s cubic-bezier(0.42, 0, 0, 0.95);
}

.tictactoe2 img {
    width: 100%;
    height: auto;
}

@media (min-width: 1500px) {
    .tictactoe2.is_visible {
        opacity: 1;
        transform: scale(1) translateX(0em) rotateZ(-3deg);
    }
}

/*Icecream Truck*/

.icecreamtruck1 {
    position: absolute;
    width: 100%;
    height: 40em;
    left: 8%;
    top: 4%;

    opacity: 0;
    transform: scale(0.5) translateX(-15em) rotateZ(-5deg);
    transition: opacity .5s .25s cubic-bezier(0.67, 0.01, 0.99, 1),
                transform 2s .25s cubic-bezier(0.42, 0, 0, 0.95);
}

.icecreamtruck1 img {
    width: 100%;
    height: auto;
}

.icecreamtruck1.is_visible {
    opacity: 1;
    transform: scale(1) translateX(0em) rotateZ(2deg);
}

.icecreamtruck2 {
    position: absolute;
    width: 20%;
    height: auto;
    top: 23em;
    left: 1.5em;

    opacity: 0;
    transform: scale(0.5) translateX(15em) rotateZ(5deg);
    transition: opacity .5s .25s cubic-bezier(0.67, 0.01, 0.99, 1),
                transform 2s .25s cubic-bezier(0.42, 0, 0, 0.95);
}

.icecreamtruck2 img {
    width: 100%;
    height: auto;
}

@media (min-width: 1500px) {
    .icecreamtruck2.is_visible {
        opacity: 1;
        transform: scale(1) translateX(0em) rotateZ(-3deg);
    }
}

.icecreamtruck3 {
    position: absolute;
    width: 25%;
    height: auto;
    top: 28em;
    left: 30em;

    opacity: 0;
    transform: scale(0.5) translateX(-55em) rotateZ(-5deg);
    transition: opacity .5s .25s cubic-bezier(0.67, 0.01, 0.99, 1),
                transform 2s .25s cubic-bezier(0.42, 0, 0, 0.95);
}

.icecreamtruck3 img {
    width: 100%;
    height: auto;
}

@media (min-width: 1500px) {
    .icecreamtruck3.is_visible {
        opacity: 1;
        transform: scale(1) translateX(0em) rotateZ(3deg);
    }
}

/*Jetpack Joyride Extreme*/

.jetpack_joyride_img1 {
    position: absolute;
    width: 100%;
    height: 40em;
    left: 8%;
    top: 4%;

    opacity: 0;
    transform: scale(0.5) translateX(-15em) rotateZ(-5deg);
    transition: opacity .5s .25s cubic-bezier(0.67, 0.01, 0.99, 1),
                transform 2s .25s cubic-bezier(0.42, 0, 0, 0.95);
}

.jetpack_joyride_img1 img {
    width: 100%;
    height: auto;
}

.jetpack_joyride_img1.is_visible {
    opacity: 1;
    transform: scale(1) translateX(0em) rotateZ(2deg);
}

.jetpack_joyride_img2 {
    position: absolute;
    width: 20%;
    height: 10em;
    top: 25em;
    left: 2em;

    opacity: 0;
    transform: scale(0.5) translateX(15em) rotateZ(5deg);
    transition: opacity .5s .25s cubic-bezier(0.67, 0.01, 0.99, 1),
                transform 2s .25s cubic-bezier(0.42, 0, 0, 0.95);
}

.jetpack_joyride_img2 img {
    width: 100%;
    height: auto;
}

@media (min-width: 1500px) {
    .jetpack_joyride_img2.is_visible {
        opacity: 1;
        transform: scale(1) translateX(0em) rotateZ(-3deg);
    }
}

.jetpack_joyride_img3 {
    position: absolute;
    width: 13%;
    height: 1em;
    top: 30em;
    left: 30%;

    opacity: 0;
    transform: scale(1.5) rotateZ(-10deg);
    transition: opacity .5s .25s cubic-bezier(0.67, 0.01, 0.99, 1),
                transform 2s .25s cubic-bezier(0.42, 0, 0, 0.95);
}

.jetpack_joyride_img3 img {
    width: 100%;
    height: auto;
}

@media (min-width: 1500px) {
    .jetpack_joyride_img3.is_visible {
        opacity: 1;
        transform: scale(1) translateX(0em) rotateZ(5deg);
    }
}

.jetpack_joyride_img4 {
    position: absolute;
    width: 13%;
    height: 1em;
    top: 20em;
    left: 12%;

    opacity: 0;
    transform: scale(1.5) translateX(-15em) rotateZ(5deg);
    transition: opacity .5s .25s cubic-bezier(0.67, 0.01, 0.99, 1),
                transform 2s .25s cubic-bezier(0.42, 0, 0, 0.95);
}

.jetpack_joyride_img4 img {
    width: 100%;
    height: auto;
}

@media (min-width: 1500px) {
    .jetpack_joyride_img4.is_visible {
        opacity: 1;
        transform: scale(1) translateX(0em) rotateZ(-1deg);
    }
}

.jetpack_joyride_extreme {
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 0;
    padding-bottom: 35%;
}

/*Mine Sweeper*/

.minesweeper {
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 0;
    padding-bottom: 35%;
}

.mine_sweeper_img2 {
    position: absolute;
    width: 80%;
    height: 40em;
    left: 8%;

    opacity: 0;
    transform: scale(0.5) translateX(-15em) rotateZ(6deg);
    transition: opacity .5s .25s cubic-bezier(0.67, 0.01, 0.99, 1),
                transform 2s .25s cubic-bezier(0.42, 0, 0, 0.95);
}

.mine_sweeper_img2 img {
    width: 100%;
    height: auto;
}

.mine_sweeper_img2.is_visible {
    opacity: 1;
    transform: scale(1) translateX(0em) rotateZ(-2deg);
}

.mine_sweeper_img1 {
    position: absolute;
    width: 13%;
    height: 1em;
    top: 30em;
    left: 4%;

    opacity: 0;
    transform: scale(1.5) translateX(-15em) rotateZ(-3deg);
    transition: opacity .5s .25s cubic-bezier(0.67, 0.01, 0.99, 1),
                transform 2s .25s cubic-bezier(0.42, 0, 0, 0.95);
}

.mine_sweeper_img1 img {
    width: 100%;
    height: auto;
}

@media (min-width: 1600px) {
    .mine_sweeper_img1.is_visible {
        opacity: 1;
        transform: scale(1) translateX(0em) rotateZ(2deg);
    }
}

.info {
    position: absolute;
    right: calc(2% + 2em);
    top: 0;
    width: 40%;
    height: 0;
    padding-bottom: 35%;
    border-radius: 20%;
    display: block;
    background:rgba(37, 37, 37, 0.493);
}

.info h1 {
    color: white;
    font-size: 35px;
}

.main_text {
    position: absolute;
    top: 50px;
    height: 0%;
    width: 100%;
    padding-bottom: 70%;
}

.main_text h6 {
    color: white;
    font-size: 20px;
}

.description {
    margin-left: 35px;
    margin-right: 35px;
}

.main_text a {
    color:rgb(89, 156, 255);
    text-align: center;
    font-size: 45px;
    transition: cubic-bezier(0, 0.68, 0.71, 0.93) .5s;
    line-height: 200%;
}

.main_text a:hover {
    font-size: 50px;
}

.main_text p {
    color: white;
    font-size: 1.4vw;
    text-align: left;
}

.main_text .divider {
    line-height: 200%;
}

@media (max-width: 1400px) {
    .main_text .divider {
        line-height: 40%;
    }

    .main_text a {
        line-height: 40%;
    }
}

@media (max-width: 1600px) {
    .main_text .divider {
        line-height: 120%;
    }

    .main_text a {
        line-height: 120%;
    }
}

@media (max-width: 1800px) {
    .main_text a {
        line-height: 140%;
    }

    .main_text .divider {
        line-height: 140%;
    }
}

@media (max-width: 1300px) {
    .main_text p {
        font-size: 0;
    }

    .main_text a {
        font-size: 30px;
    }

    .main_text a:hover {
        font-size: 25px;
        line-height: 200%;
    }

    .main_text h6 {
        font-size: 0;
    }

    .info h1 {
        font-size: 25px;
    }
}

/*Itch.io Games*/

.itch_io_games {
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 0;
    padding-bottom: 35%;
}

.itch_img1 {
    position: absolute;
    width: 20vw;
    height: 20vw;
    top: -2vw;
    left: 3vw;

    opacity: 0;
    transform: scale(0.5) rotateZ(3deg);

    transition: opacity .5s .25s cubic-bezier(0.67, 0.01, 0.99, 1),
                transform 2s .25s cubic-bezier(0.42, 0, 0, 0.95);
}

.itch_img1 img {
    width: 100%;
    height: auto;
}

.itch_img1.is_visible {
    opacity: 1;
    transform: scale(1) rotateZ(-2deg);
}

.itch_img2 {
    position: absolute;
    width: 20vw;
    height: 20vw;
    top: 2vw;
    left: 22vw;

    opacity: 0;
    transform: scale(0.5) rotateZ(-4deg);

    transition: opacity .5s .25s cubic-bezier(0.67, 0.01, 0.99, 1),
                transform 2s .25s cubic-bezier(0.42, 0, 0, 0.95);
}

.itch_img2 img {
    width: 100%;
    height: auto;
}

.itch_img2.is_visible {
    opacity: 1;
    transform: scale(1) rotateZ(1deg);
}

.itch_img3 {
    position: absolute;
    width: 20vw;
    height: 20vw;
    top: 17vw;
    left: 8vw;

    opacity: 0;
    transform: scale(0.5) rotateZ(20deg);

    transition: opacity .5s .25s cubic-bezier(0.67, 0.01, 0.99, 1),
                transform 2s .25s cubic-bezier(0.42, 0, 0, 0.95);
}

.itch_img3 img {
    width: 100%;
    height: auto;
}

.itch_img3.is_visible {
    opacity: 1;
    transform: scale(1) rotateZ(-2deg);
}