* {
    padding: 0;
    margin: 0;
}

body {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    margin: 6px;
    background: #fae8e8;
    background: linear-gradient(125deg, rgba(250, 232, 232, 0.15) 0%, rgba(83, 163, 237, .5) 100%);
    background-size: 400% 400%;
    animation: bodyBG 20s ease infinite;
}

.aFirstPage {
    color: aquamarine;
}

.linkNoUnderline {
    text-decoration: none;
    color: black;
}

@keyframes bodyBG {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }

}
.soundcloud{
    text-align: center;
}

.columnContainer {
    display: grid;
    grid-template-columns: 12vw auto;
    grid-template-rows: 1fr;
    grid-auto-rows: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "left right";
}

.left {
    grid-area: left;
    height: calc(100vh - 12px);
}

.right {
    grid-area: right;
    margin-left: 6px;
    background-image: url(elevator.jpg);
    background-size: 100%;
    background-position: center;
    height: 100%;
}

.rowContainer {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 1fr;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    gap: 6px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "one"
        "two"
        "three"
        "four";
    height: 100%;

}

/* Gaming */
.one {
    grid-area: one;
    background-image: url(astro\ carpet.jpg);
    background-size: 400%;
    animation: gamin 30s linear infinite;
}

.one button {
    color: rgb(255, 255, 254);
    text-shadow: black 2px 2px;
}

@keyframes gamin {
    0% {
        background-position: 0px 0px;
    }

    25% {
        background-position: 0px 600px;
    }

    50% {
        background-position: 600px 600px;
    }

    75% {
        background-position: 600px 0px;
    }

    100% {
        background-position: 0px 0px;
    }
}

/* Video Making */
.two {
    grid-area: two;
    background-image: url(kdenlive.png);
    background-size: 100%;
    background-repeat: no-repeat;
}

.two button {
    color: whitesmoke;
    text-shadow: black 2px 2px;
}

/* Music */
.three {
    grid-area: three;
    background-image: url(david\ bust.png);
    background-size: 15%;
    animation-name: davids;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
    animation-timing-function: linear;
}

.three button {
    color: yellow;
    text-shadow: black 1px 1px;
}

@keyframes davids {
    0% {
        background-position: 0px 0px;
    }

    100% {
        background-position: 686px 0px;
    }
}

/* Collecting */
.four {
    grid-area: four;
    background-image: url(me\ fr\ fr.png);
    background-size: 100%;
}

.four button {
    color: beige;
    text-shadow: black 1px 1px;
}

/* Biking */
.five {
    background-image: url(long\ day.jpg);
    background-size: 100%;
}

.five button {
    color: aquamarine;
    text-shadow: black 1px 1px;
}

/* 3d print */
.six {
    background-image: url("error.jpg");
    background-size: 180%;
    background-position: 50% 70%;
}

.six button {
    color: antiquewhite;
    text-shadow: black 1px 1px;
}

/* Website */
.seven {
    background-image: url(setup.jpg);
    background-size: 100%;
}


.seven button {
    color: antiquewhite;
    text-shadow: black 1px 1px;
}

.rowContainer div {
    text-align: center;
}


.rowContainer button {
    border-radius: 0px;
    border-color: rgba(205,
            0,
            237,
            0.15);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    font-size: 2.5vh;

}

.welcomeScreen {
    text-align: center;
    color: #eed6d6;
    text-shadow: rgb(19, 18, 18) 2px 2px;

}

.welcomeScreen h1 {
    margin: .5em;
    font-size: 10vw;
}

.welcomeScreen h3 {
    font-size: 1.8vw;
}

footer {
    margin-top: 1em;
    padding-bottom: 1em;
    font-style: italic;
    font-size: small;
    text-align: center;
}

.captions {
    font-size: 12px;
    font-weight: 200;
    margin-right: 30%;
    margin-left: 30%;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.captions img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 75%;
}

.captions p {
    margin-top: 1em;
}

/* this is all the CSS for the Gaming tab */

@font-face {
    font-family: mineyCrafta;
    src: url(Mojang-Bold.ttf);
}

.gaming {
    height: calc(100vh - 12px);
    overflow: scroll;
}

.mine {
    font-size: 12px;
    margin: 1em;
    font-style: italic;
}

.crap {
    font-family: mineyCrafta;
    font-size: 15vh;
    text-align: center;
    margin: 2em;
    text-shadow: red 5px 5px;
    animation: brownBricks 8s infinite linear;
}

@keyframes brownBricks {
    0% {
        text-shadow: red 5px 5px 1px;
    }

    25% {
        text-shadow: blue 10px 10px 2px;
    }

    50% {
        text-shadow: green 10px 10px 5px;
    }

    75% {
        text-shadow: orange -10px -5px 10px;
    }

    100% {
        text-shadow: red 5px 5px 1px;
    }

    0% {
        rotate: 2deg;
    }

    50% {
        rotate: -2deg;
    }

    100% {
        rotate: 2deg;
    }
}

.gamingMainDiv {
    margin-top: 1em;
    background-image: url("large\ lambda.png");
    background-color: gray;
    background-repeat: repeat;
    width: 100%;
    height: auto;
    color: rgb(255, 255, 54);
    animation: lambda 10s linear infinite;
    text-shadow: black .5px .5px 1px;
}

/* prepare for unforeseen consequences */
@keyframes lambda {
    0% {
        background-position: 0px 0px;
    }

    100% {
        background-position: 300px 300px;
    }
}

.gamingMainDiv h1 {
    font-size: 100px;
    text-align: center;

}

.gamingIntro {
    font-weight: lighter;
    margin-bottom: 5em;
    font-size: 14px;
    text-align: center;

}

.gamingMainCourse {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin-top: .5em;
    margin-left: 2em;
    margin-right: 2em;
    font-size: 18px;
    line-height: 1.25;

}

.gameBlock {
    width: 100%;
    margin-bottom: 1em;
    padding-bottom: .5em;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-template-areas:
        "gameBlockLeft gameBlockRight";



    img {
        width: 75%;
        display: block;
        margin: auto;
    }

    p {
        margin-right: 2em;
    }

}

.gameBlockTitle {
    margin-left: 2.25em;
    margin-right: 1rem;
    margin-top: 1em;
    margin-bottom: .5em;
}

.gameBlockLeft {
    grid-area: gameBlockLeft;
    display: grid;
    place-items: center;

}

.gameBlockRight {
    grid-area: gameBlockRight;

}

.gamingMainDiv p,
.gamingMainDiv h2 {
    backdrop-filter: blur(10px);

}




/* CSS for music */

.music {
    height: calc(100vh - 12px);
    background-image: url("AlbumCovers/beach.gif");
    background-size: 100%;
    overflow: scroll;

    h1 {
        text-align: center;
    }


}

.albumCovers {
    display: flex;
    order: 5;
    gap: 4px 4px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: start;


    img {
        width: calc(20% - 8px);
        z-index: 0;
    }

    img:hover {
        transform: scale(1.1);
        z-index: 2;
    }
}

/* when you cant even say my name */
.invisible {
    display: none;
    height: 17vw;
    overflow: scroll;
}

/* thing that shows up on hover */

img:hover+.invisible,
.invisible:hover {
    display: block;
    position: relative;
    width: 18%;
    background-color: rgba(0, 191, 255, 0.75);
    z-index: 1;
    padding-left: 1%;
    padding-right: .4%;
    padding-bottom: .5%;
    padding-top: .5%;
}

.albumTitle {
    font-size: 1.5vw;
}

.albumArtist {
    font-weight: 200;
    font-size: .8vw;
    margin-bottom: .5em;
    text-indent: .2em;
}

.omfgThisAlbumIsSoGood {
    background: #000000;
    background: linear-gradient(215deg, rgba(0, 0, 0, 1) 0%, rgba(51, 74, 60, 1) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.lorge {
    font-size: larger;
}

.musicMainText {
    background-color: rgba(0, 191, 255, 0.75);
    text-align: center;
    margin: 1em;
    padding: .4em;
}

/* CSS for collecting */

.collecting {

    background-color: blanchedalmond;
    width: 100%;
    height: 100%;
    overflow: scroll;
    height: calc(100vh - 12px);
}

.collectingMainText {
    margin: 1em;
}

.collecting h1 {
    text-align: center;
    padding-top: .5em;

}

.collectingList {
    margin-left: 3em;
    margin-bottom: 1em;
    font-size: 14px;

}


.itemContainer {
    background-color: darkorchid;
    padding: 1em;
    height: auto;
}

.collect-o-maticTitle {
    img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
    }

}

/* 
if you're wondering why the Collect-O-Matic 5000 isnt exactly centered,
its because of how jankily I made the buttons on the left work.
*/


.collectType {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    background-color: bisque;
    padding-bottom: 1em;
    padding-top: 1em;
    width: calc(85vw - 12px);

    p {
        background-color: azure;
        padding: .5em;
        padding-right: 1em;
        padding-left: 1em;

    }
}

#itemPreviewContainer {
    background-color: indigo;
    width: calc(85vw - 12px);
    padding-top: 15px;
    padding-bottom: 15px;
    height: 100px;
    display: flex;
    flex-direction: row;
    
    flex-wrap: wrap;
    overflow-x: scroll;
    overflow-y: hidden;
    flex-wrap: nowrap;

}

.itemPreviewContainer2 {
    img {
        height: 80px;
    }

    color:aliceblue;
    font-size: 16px;
    text-align: center;
    padding-left: .8em;
    padding-right: .8em;
}

.loAndBehold {
    width: calc(85vw - 12px);
    text-align: center;
    background-color: rgb(22, 19, 49);
    color: rgb(233, 236, 206);
padding-bottom:1em;
padding-top:1em;
    img {
        max-width: 40%;

    }
}
#loAndBeholdText{
    background-color: bisque;
    border: dashed .1em blue;
    padding: .5em;
    
    h3{
        text-align: center;
    }
}