* {
    margin: 0;
    box-sizing: border-box;
}

.main-layout {
    width: 100%;
    height: 100%;
    /* height: 100vh; */
    overflow-y: auto;

    display: flex;
    flex-direction: row;
}

/* .mobile-icons-layout {
    display: flex;
    flex-direction: row;
} */

@media (min-width: 600px) {
    .mobile-icons-layout {
        display: none;
    }
  }
  @media (max-width: 599px) {
    .mobile-icons-layout {
        width: 70vw;
        height: 6vh;
        display: flex;
        flex-direction: row;
        margin-bottom: 1vh;
        margin-top: 1vh;
        margin-left: 5vw;
        /* margin-top: 3vh; */
    }
  }

  /* @media (min-width: 600px) {
    .mobile-label-layout {
        display: none;
    }
  }
  @media (max-width: 599px) {
    .mobile-label-layout {
        width: 70vw;
        height: 3vh;
        display: flex;
        flex-direction: row;
        margin-bottom: 1vh;
        /* margin-top: 1vh; */
        /* margin-left: 6vw;
        margin-top: 3vh;
    }
  } */

/* .main-layout-left {
    width: 15vw;
} */

@media (min-width: 600px) {
    .main-layout-left {
        width: 15vw;
    }
  }
  @media (max-width: 599px) {
    .main-layout-left {
        width: 5vw;
    }
  }

/* .main-layout-center {
    width: 70vw;
} */

@media (min-width: 600px) {
    .main-layout-center {
        width: 70vw;
    }
  }
  @media (max-width: 599px) {
    .main-layout-center {
        width: 90vw;
    }
  }

/* .main-layout-right {
    width: 15vw;
} */

@media (min-width: 600px) {
    .main-layout-right {
        width: 15vw;
    }
  }
  @media (max-width: 599px) {
    .main-layout-right {
        width: 5vw;
    }
  }

/* .home-icon-layout {
    width: 3vw;
    height: 6vh;
    margin-left: 4vw;
    margin-top: 5vh;
} */

@media (min-width: 600px) {
    .home-icon-layout {
        width: 3vw;
        height: 6vh;
        margin-left: 4vw;
        margin-top: 5vh;
    }
  }
  @media (max-width: 599px) {
    .home-icon-layout {
        display: none;
    }
  }

  @media (min-width: 600px) {
    .home-icon-layout-mobile {
        display: none;
    }
  }
  @media (max-width: 599px) {
    .home-icon-layout-mobile {
        width: 17vw;
        height: 5vh;
        margin-left: 5vw;
        margin-top: 1vh;
    }
  }

/* .folder-icon-layout {
    width: 3.5vw;
    height: 6.5vh;
    margin-top: 10vh;
    margin-left: 8vw;
} */

@media (min-width: 600px) {
    .folder-icon-layout {
        width: 3.5vw;
        height: 6.5vh;
        margin-top: 10vh;
        margin-left: 8vw;
    }
  }
  @media (max-width: 599px) {
    .folder-icon-layout {
        display: none;
    }
  }

  @media (min-width: 600px) {
    .folder-icon-layout-mobile {
        display: none;
    }
  }
  @media (max-width: 599px) {
    .folder-icon-layout-mobile {
        width: 16vw;
        height: 5vh;
        margin-left: 5vw;
        margin-top: 1vh;
    }
  }

/* .cd-icon-layout {
    width: 3vw;
    height: 6vh;
    margin-top: 15vh;
    margin-left: 4vw;
} */

@media (min-width: 600px) {
    .cd-icon-layout {
        width: 3vw;
        height: 6vh;
        margin-top: 15vh;
        margin-left: 4vw;
    }
  }
  @media (max-width: 599px) {
    .cd-icon-layout {
        display: none;
    }
  }

  @media (min-width: 600px) {
    .cd-icon-layout-mobile {
        display: none;
    }
  }
  @media (max-width: 599px) {
    .cd-icon-layout-mobile {
        width: 16vw;
        height: 5vh;
        margin-left: 6vw;
        margin-top: 1vh;
    }
  }

/* .trash-icon-layout {
    width: 3vw;
    height: 6vh;
    margin-top: 5vh;
} */

@media (min-width: 600px) {
    .trash-icon-layout {
        width: 3vw;
        height: 6vh;
        margin-top: 5vh;
    }
  }
  @media (max-width: 599px) {
    .trash-icon-layout {
        display: none;
    }
  }

  @media (min-width: 600px) {
    .trash-icon-layout-mobile {
        display: none;
    }
  }
  @media (max-width: 599px) {
    .trash-icon-layout-mobile {
        width: 16vw;
        height: 5vh;
        margin-left: 3vw;
        margin-top: 1vh;
    }
  }


/* .video-icon-layout {
    width: 3vw;
    height: 6vh;
    margin-top: 10vh;
} */

@media (min-width: 600px) {
    .video-icon-layout {
        width: 3vw;
        height: 6vh;
        margin-top: 10vh;
    }
  }
  @media (max-width: 599px) {
    .video-icon-layout {
        display: none;
    }
  }

  @media (min-width: 600px) {
    .video-icon-layout-mobile {
        display: none;
    }
  }
  @media (max-width: 599px) {
    .video-icon-layout-mobile {
        width: 15vw;
        height: 5vh;
        margin-left: 5vw;
        margin-top: 1vh;
    }
  }


/* .text-layout {
    width: 4vw;
    height: 2vh;
    /* margin-left: 3.75vw;
}*/

/* .name-container {
    line-height: 1.25;
    margin-left: 5vw;
    width: 40vw;
    height: 20vh;
} */

.main-layout-content {
    background-color: rgb(255 255 255 / 50%);
    backdrop-filter: blur(4px) saturate(150%);
    height: fit-content;
}

@media (min-width: 600px) {
    .main-layout-content-main {
        background-color: rgb(255 255 255 / 50%);
        backdrop-filter: blur(4px) saturate(150%);
        height: 100%;
    }
  }
  @media (max-width: 599px) {
    .main-layout-content-main {
        background-color: rgb(255 255 255 / 50%);
        backdrop-filter: blur(4px) saturate(150%);
        height: fit-content;
    }
  }


.blueberry {
    position: absolute;
    width: 100vw;
    height: 100vh;
    z-index: -2;
    background-image: url('/pictures/blueberry_background.jpg');
    background-size: cover;
    background-position: center;
    background-color: #33acb4;
}

.grape {
    position: absolute;
    width: 100vw;
    height: 100vh;
    z-index: -2;
    background-image: url('/pictures/grape_background.png');
    background-size: cover;
    background-position: center;
    background-color: #6805b0;
}

.strawberry {
    position: absolute;
    width: 100vw;
    height: 100vh;
    z-index: -2;
    background-image: url('/pictures/strawberry_background.png');
    background-size: cover;
    background-position: center;
    background-color: #d33b7c;
}

.lime {
    position: absolute;
    width: 100vw;
    height: 100vh;
    z-index: -2;
    background-image: url('/pictures/keylime_background.png');
    background-size: cover;
    background-position: center;
    background-color: #48d838;
}

.tangerine {
    position: absolute;
    width: 100vw;
    height: 100vh;
    z-index: -2;
    background-image: url('/pictures/tangerine_background.png');
    background-size: cover;
    background-position: center;
    background-color: #ca6400;
}

.home_icon {
    /* width: 3vw;
    height: 6vh; */
    /* margin-top: 5vh;
    margin-left: 4vw; */
    max-width: 100%;
    max-height: 100%;
}

/* .home {
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 1rem; 
    margin-left: 3.75vw; 
    margin-top: .5vh;
    color: white;
    text-shadow: 2px 2px 2px black;
} */

@media (min-width: 600px) {
    .home {
        font-family: 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        font-size: 1rem; 
        margin-left: 3.75vw; 
        margin-top: .5vh;
        color: white;
        text-shadow: 2px 2px 2px black;
    }
  }
  @media (max-width: 599px) {
    .home {
        display: none;
    }
  }

  @media (min-width: 600px) {
    .home-mobile {
        display: none;
    }
  }
  @media (max-width: 599px) {
    .home-mobile {
        font-family: 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        font-size: .625rem; 
        margin-left: 4.75vw; 
        /* margin-top: .5vh; */
        color: white;
        text-shadow: 2px 2px 2px black;
    }
  }

.trash_icon {
    /* width: 3vw;
    height: 6vh;
    margin-top: 5vh; */
    max-width: 100%;
    max-height: 100%;
}

/* .trash {
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    margin-left: 4.75vw;
    font-size: 1rem;
    color: white;
    text-shadow: 2px 2px 2px black;
    margin-top: .25vh;
} */

@media (min-width: 600px) {
    .trash {
        font-family: 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        margin-left: 4.75vw;
        font-size: 1rem;
        color: white;
        text-shadow: 2px 2px 2px black;
        margin-top: .25vh;
    }
  }
  @media (max-width: 599px) {
    .trash {
        display: none;
    }
  }

  @media (min-width: 600px) {
    .trash-mobile {
        display: none;
    }
  }
  @media (max-width: 599px) {
    .trash-mobile {
        font-family: 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        /* font-size: .625rem;  */
        font-size: .625rem;
        margin-left: 6vw; 
        /* margin-top: .5vh; */
        color: white;
        text-shadow: 2px 2px 2px black;
    }
  }

.folder_icon {
    /* width: 3vw;
    height: 6vh;
    margin-top: 10vh;
    margin-left: 8vw; */
    max-width: 100%;
    max-height: 100%;
}

/* .blog {
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 1rem;
    margin-left: 8.25vw;
    margin-top: .125vw;
    color: white;
    text-shadow: 2px 2px 2px black;
} */

@media (min-width: 600px) {
    .blog {
        font-family: 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        font-size: 1rem;
        margin-left: 8.25vw;
        margin-top: .125vw;
        color: white;
        text-shadow: 2px 2px 2px black;
    }
  }
  @media (max-width: 599px) {
    .blog {
        display: none;
    }
  }

  @media (min-width: 600px) {
    .blog-mobile {
        display: none;
    }
  }
  @media (max-width: 599px) {
    .blog-mobile {
        font-family: 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        font-size: .625rem; 
        margin-left: 6vw; 
        /* margin-top: .5vh; */
        color: white;
        text-shadow: 2px 2px 2px black;
    }
  }

.posts {
    height: 25vh;
    width: 62vw;
    margin-left: 4vw;
    margin-top: 4vh;
    margin-bottom: 3vh;
}

.post-container >:not(:last-child) {
    border-bottom: black 2px solid;
}

.cd_icon {
    /* width: 3vw;
    height: 6vh;
    margin-top: 15vh;
    margin-left: 4vw; */
    max-width: 100%;
    max-height: 100%;
}

/* .music {
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 1rem;
    margin-left: 4vw;
    color: white;
    text-shadow: 2px 2px 2px black;

} */

@media (min-width: 600px) {
    .music {
        font-family: 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        font-size: 1rem;
        margin-left: 4vw;
        color: white;
        text-shadow: 2px 2px 2px black;
    }
  }
  @media (max-width: 599px) {
    .music {
        display: none;
    }
  }

  @media (min-width: 600px) {
    .music-mobile {
        display: none;
    }
  }
  @media (max-width: 599px) {
    .music-mobile {
        font-family: 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        font-size: .625rem; 
        margin-left: 7vw; 
        /* margin-top: .5vh; */
        color: white;
        text-shadow: 2px 2px 2px black;
    }
  }

.song-container >:not(:last-child) {
    border-bottom: black 2px solid;
}

.songs {
    /* border-width: 1vh;
    border-style: double;
    border-color: black; */
    height: 20vh;
    width: 62vw;
    margin-left: 4vw;
    margin-top: 4vh;
    margin-bottom: 3vh;
}

.video_icon {
    /* width: 3vw;
    height: 6vh;
    margin-top: 10vh; */
    max-height: 100%;
    max-width: 100%;
}

/* .video {
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 1rem;
    margin-left: 4vw;
    margin-top: .125vw;
    color: white;
    text-shadow: 2px 2px 2px black;
} */

@media (min-width: 600px) {
    .video {
        font-family: 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        font-size: 1rem;
        margin-left: 4vw;
        margin-top: .125vw;
        color: white;
        text-shadow: 2px 2px 2px black;
    }
  }
  @media (max-width: 599px) {
    .video {
        display: none;
    }
  }

  @media (min-width: 600px) {
    .video-mobile {
        display: none;
    }
  }
  @media (max-width: 599px) {
    .video-mobile {
        font-family: 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        font-size: .625rem; 
        margin-left: 4.75vw; 
        /* margin-top: .5vh; */
        color: white;
        text-shadow: 2px 2px 2px black;
    }
  }

.videos {
    margin-left: 12.5vw;
    margin-bottom: 2vh;
}

/* .name {
    line-height: 1.25;
    margin-left: 5vw;
    font-size: 9rem;
    font-family: "Apple-Garamond", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: black;
} */

@media (min-width: 600px) {
    .name {
        line-height: 1.25;
        margin-left: 5vw;
        font-size: 9rem;
        font-family: "Apple-Garamond", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        color: black;
    }
  }
  @media (max-width: 599px) {
    .name {
        /* line-height: 2; */
        /* height: 6vh; */
        margin-left: 3vw;
        margin-top: 2vh;
        font-size: 3.75rem;
        font-family: "Apple-Garamond", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        color: black;
    }
  }

  @media (min-width: 600px) {
    .top.container {
        display: none;
    }
  }
  @media (max-width: 599px) {
    .top-container {
        /* line-height: 2; */
        height: 2vh;
        width: 70vw;
    }
  }



/* .introducing {
    line-height: .5;
    margin-left: 36.25vw;
    font-size: 5rem;
    font-family: "Apple-Garamond-Light";
    color: black;
} */

@media (min-width: 600px) {
    .introducing {
        line-height: .5;
        /* margin-left: 36.25vw; */
        text-align: right;
        margin-right: 5vw;
        font-size: 5rem;
        font-family: "Apple-Garamond-Light";
        color: black;
    }
  }
  @media (max-width: 599px) {
    .introducing {
        /* line-height: .5; */
        /* margin-left: 27vw; */
        text-align: right;
        margin-right: 3vw;
        font-size: 2rem;
        font-family: "Apple-Garamond-Light";
        color: black;
        margin-bottom: 1.5vh;
    }
  }

/* .hello {
    margin-top: 10vh;
    margin-left: 5vw;
    font-size: 3rem;
    font-family: "Apple-Garamond-Italic";
    color: black;
} */

@media (min-width: 600px) {
    .hello {
        margin-top: 10vh;
        margin-left: 5vw;
        font-size: 3rem;
        font-family: "Apple-Garamond-Italic";
        color: black;
    }
  }
  @media (max-width: 599px) {
    .hello {
        /* margin-top: 1vh; */
        margin-left: 5vw;
        font-size: 3rem;
        font-family: "Apple-Garamond-Italic";
        color: black;
    }
  }

/* .about {
    margin-top: 2vh;
    margin-left: 10vw;
    margin-right: 10vw;
    font-size: 2rem;
    font-family: "Apple-Garamond-Light";
    color: black;
    text-wrap: wrap;
} */

@media (min-width: 600px) {
    .about {
        margin-top: 2vh;
        margin-left: 10vw;
        margin-right: 10vw;
        font-size: 2rem;
        font-family: "Apple-Garamond-Light";
        color: black;
        text-wrap: wrap;
    }
  }
  @media (max-width: 599px) {
    .about {
        margin-top: 2vh;
        margin-left: 8vw;
        margin-right: 5vw;
        font-size: 2rem;
        font-family: "Apple-Garamond-Light";
        color: black;
        text-wrap: wrap;
    }
  }

/* .explore {
    margin-top: 7vh;
    margin-left: 10vw;
    margin-right: 10vw;
    font-size: 2rem;
    font-family: "Apple-Garamond-Light";
    color: black;
    text-wrap: wrap;
} */

@media (min-width: 600px) {
    .explore {
        margin-top: 7vh;
        margin-left: 10vw;
        margin-right: 10vw;
        font-size: 2rem;
        font-family: "Apple-Garamond-Light";
        color: black;
        text-wrap: wrap;
    }
  }
  @media (max-width: 599px) {
    .explore {
        margin-top: 3vh;
        margin-left: 8vw;
        margin-right: 5vw;
        font-size: 2rem;
        font-family: "Apple-Garamond-Light";
        color: black;
        text-wrap: wrap;
        margin-bottom: 5vh;
    }
  }

.video_title {
    margin-top: 4vh;
    margin-left: 10vw;
    font-size: 2rem;
    font-family: "Apple-Garamond-Italic-Light";
    color: black;
}

/* @media (min-width: 600px) {
    .video_title {
        margin-top: 4vh;
        margin-left: 10vw;
        font-size: 2rem;
        font-family: "Apple-Garamond-Italic-Light";
        color: black;
    }
  }
  @media (max-width: 599px) {
    .video_title {
        margin-top: 4vh;
        margin-left: 10vw;
        font-size: 1rem;
        font-family: "Apple-Garamond-Italic-Light";
        color: black;
    }
  } */

.parent {
    display: flex;
    flex-flow: row;
}

.scroll {
    height: 100vh;
    overflow-y: auto;
    width: 100%;
    height: 100%;
    /* overflow-y: hidden; */
}

.right_margin {
    margin-left: 5vw;
}

#content {
    width: 70vw;
    height: 100vh;
    margin-left: 15vw;

    /*background-color: rgb(15 75 103 / 50%);*/
    background-color: rgb(255 255 255 / 50%);

    backdrop-filter: blur(4px) saturate(150%);
    /*border-left: 1rem solid rgb(15 75 103 / 50%);
    border-right: 1rem solid rgb(15 75 103 / 50%);*/
}

@font-face {
    font-family: "Apple-Garamond";
    src: url('./fonts/apple-garamond/AppleGaramond.ttf') format('truetype');
}

@font-face {
    font-family: "Apple-Garamond-Light";
    src: url('./fonts/apple-garamond/AppleGaramond-Light.ttf') format('truetype');
}

@font-face {
    font-family: "Apple-Garamond-Italic";
    src: url('./fonts/apple-garamond/AppleGaramond-Italic.ttf') format('truetype');
}

@font-face {
    font-family: "Apple-Garamond-Italic-Light";
    src: url('./fonts/apple-garamond/AppleGaramond-LightItalic.ttf') format('truetype');
}