@charset "UTF-8";

/* CSS Document */

@media (min-width: 0px) {

    /* Box-Sizing */
    html {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    *,
    *:before,
    *:after {
        -webkit-box-sizing: inherit;
        -moz-box-sizing: inherit;
        box-sizing: inherit;
    }

    /* Links Reset */
    a {
        color: inherit;
    }

    /* Start Styles */
    main {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    #hero_container {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    #hero {
        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://ik.imagekit.io/angelogiomateo/assets/hero.png);
        background-attachment: local;
        background-position: 60% 50%;
        background-repeat: no-repeat;
        background-size: cover;
        font-size: 0;
        line-height: 0;
        width: 100%;
        height: 100vh;
        display: flex;
        align-content: normal;
        flex-wrap: wrap;
        justify-content: center;
        box-shadow: none;
        position: relative;
    }

    #logo_float {
        max-height: 350px;
        max-width: 350px;
        align-self: center;
    }

    #nav_bar {
        height: 100px;
        width: 100%;
        /* background-color: rgba(48, 145, 218, 1); */
        display: flex;
        justify-content: space-around;
        align-content: center;
        flex-wrap: wrap;
    }

    .nav_box_1 {
        display: inline-flex;
        align-content: center;
        justify-content: flex-start;
        width: 20%;
        padding-left: 15%;
    }

    .nav_box_2 {
        display: inline-flex;
        justify-content: flex-end;
        padding-left: 25%;
        padding-right: 10%;
        width: 80%;
    }

    .nav_item {
        height: auto;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        font-size: 30px;
        font-family: 'Oswald', sans-serif;
        color: #FFFFFF;
        text-decoration: none;
        margin-left: 2.5%;
        margin-right: 2.5%;
    }

    #a_about {
        text-decoration: none;
    }

    #a_instagram {
        text-decoration: none;
    }

    #agm_logo {
        max-height: 75px;
        max-width: 75px;
        display: inline-flex;
        border-radius: 50%;
        background-color: rgb(218, 126, 48);
    }

    #div_title {
        position: relative;
        align-self: flex-end;
        margin-bottom: 200px;
        /*        margin-right: 35%;
        margin-left: 15%;*/
        /*background-color: rgba(48, 145, 218, 0.75); */
        /*background-color: rgba(0, 0, 0, 0.25);*/
        padding: 15px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        width: 100%;
        /*        flex-direction: column;*/
    }

    .title_text {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        margin-left: 20px;
    }

    /*    .th-bg-1 {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(57, 160, 215, 1);
        border-radius: 50%;
        width: 530px;
        height: 530px;
    }
    .th-bg-2 {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(229, 125, 48, 1);
        border-radius: 50%;
        width: 515px;
        height: 515px;
    }*/

    #title {
        font-family: 'Oswald', sans-serif;
        color: #ffffff;
        font-size: 125px;
        /*word-wrap: normal; */
        position: relative;
        line-height: 110%;
        margin-bottom: 10px;
        text-shadow: 10px 10px #e57d30, 15px 15px #39a0d7;
    }

    /*    #title:hover{
        color: #ffffff;
        text-shadow: 10px 10px #e57d30, 15px 15px #39a0d7;
    }*/
    .sub-title {
        font-family: 'Oswald', sans-serif;
        color: #ffffff;
        font-size: 50px;
        /*word-wrap: normal; */
        position: relative;
        line-height: 110%;
        margin-top: 10px;
    }

    .title_headshot {
        height: 500px;
        width: 500px;
        background-size: 500px;
        border-radius: 50%;
        border: 8px solid rgba(255, 255, 255, 0.75);
        /*background-image: url(https://ik.imagekit.io/angelogiomateo/assets/angelo%20headshot.jpg)*/
        background-image: url(https://angelogiomateo/assets/agm-headshot-june-2025.jpg);
        /*box-shadow: 20px 20px #ffffff;*/
        background-position: right 10%;
    }

    /*    .title_headshot:hover{
        box-shadow: 20px 10px #e57d30, 30px 20px #39a0d7;
    }*/
    .content_text {
        font-family: 'Cabin', sans-serif;
        font-size: 15px;
        align-self: flex-start;
        margin-top: 10px;
    }

    .section-bg1 {
        width: 100%;
        height: 100%;
        background-color: #ffffff;
        display: flex;
    }

    .content {
        margin-top: 75px;
        margin-bottom: 75px;
        height: 100%;
        width: 100%;
        padding-left: 15%;
        padding-right: 15%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .content_title {
        font-family: 'Oswald', sans-serif;
        color: #000000;
        font-size: 65px;
        font-size-adjust: auto;
        margin-bottom: 20px;
    }

    .content_text_1 {
        font-family: 'Cabin', serif;
        font-size: 35px;
        margin-bottom: 12.5px;
    }

    .content_about {
        margin-top: 75px;
        margin-bottom: 75px;
        padding-left: 15%;
        padding-right: 15%;
        display: inline-flex;
        justify-content: center;
        align-items: flex-start;
        align-content: space-between;
        flex-wrap: wrap;
        height: inherit;
        width: 100%;
    }

    #headshot_container {
        display: inline-flex;
        flex-direction: column;
        height: inherit;
        margin-bottom: 20px;
    }

    #headshot {
        height: 250px;
        width: 250px;
        background-size: 250px;
        border-radius: 50%;
        /*background-image: url(https://ik.imagekit.io/angelogiomateo/assets/angelo%20headshot.jpg)*/
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/casual%20sq.jpg?tr=w-300,h-300);
    }

    #soc_med_container {
        display: inline-flex;
        margin-top: 20px;
        justify-content: space-around;
        width: 250px;
    }

    .soc_med {
        height: 50px;
        width: 50px;
        border-radius: 50%;
        background-color: rgba(48, 145, 218, 1);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        color: #ffffff;
        text-decoration: none;
    }

    #about_content {
        width: 50%;
        margin-left: 7.5%;
        display: inherit;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        height: inherit;
    }

    .about_text {
        font-family: 'Cabin', serif;
        font-size: 20px;
        hyphens: auto;
        margin-bottom: 10px;
        margin-right: 20%;
    }

    .footer {
        position: absolute;
        width: 100%;
        height: 200px;
        background-color: rgba(48, 145, 218, 1);
        display: inline-flex;
    }

    /*bg2 section*/

    .section-bg2 {
        width: 100%;
        height: 100%;
        background-color: rgba(57, 160, 215, 0.1);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        padding: 5% 0;
    }

    .content_text_bg2 {
        font-family: 'Cabin', serif;
        font-size: 2em;
        margin-bottom: 1.25em;
        font-weight: bold;
        text-align: right;
    }


    .bg2-1 {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 0 10%;
    }

    .bg2-1-left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-right: 100px;
        align-items: flex-end;
        justify-content: center;
        width: 50%;
    }

    .bg2-pic1 {
        height: 400px;
        width: 400px;
        background-size: 400px;
        background-position: center;
        border-radius: 50%;
        /*background-image: url(https://ik.imagekit.io/angelogiomateo/assets/angelo%20headshot.jpg)*/
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/raptors_fireworks_sq.jpeg?tr=w-500,h-500);
        margin-bottom: 25px;
    }

    /*end bg3*/

    /*bg3 section*/

    .section-bg3 {
        width: 100%;
        height: 100%;
        /*background-color: rgba(229, 125, 48, 0.25);*/
        background-color: white;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        padding: 5% 15%;
    }

    .exp-section {
        display: flex;
        flex-direction: column;
        width: 100%;
        /*margin-top: 75px;*/
        padding: 0 15%;
        margin-bottom: 75px;
    }

    .exp-title {
        font-family: 'Oswald', sans-serif;
        color: #000000;
        font-size: 50px;
        font-size-adjust: auto;
        margin-bottom: 20px;
        /*        text-shadow: 10px 10px #e57d30, 15px 15px #39a0d7;*/
    }

    .title-heading {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 50px;
    }

    .title-box {
        background-color: #ffffff;
        width: 500px;
        height: 100px;
        box-shadow: 10px 10px #e57d30, 15px 15px #39a0d7;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding-left: 20px;
        border: 5px solid #1c506c;
        /*align-self: flex-end;*/
    }


    .exp-box {
        margin: 50px 0;
        display: flex;
        flex-direction: column;
    }

    .exp-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    .exp-logo {
        width: 100px;
        height: 100px;
        background-size: 100px;
    }

    #studio {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/studio.png?tr=w-200,h-200);
    }

    #tarana {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/tarana.png?tr=w-200,h-200);
    }

    #lc {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/lc_2.png?tr=w-200,h-200);
    }

    #pcg {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/pcgto_2.png?tr=w-200,h-200);
    }

    #omar {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/alghabra_2.png?tr=w-200,h-200);
    }

    #ryerson {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/ryerson_2.png?tr=w-200,h-200);
    }

    #uoft {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/uoft_2.png?tr=w-200,h-200);
    }

    .exp-head-right {
        display: flex;
        flex-direction: column;
    }

    .exp-icon {
        width: 75px;
        height: 75px;
        background-size: 75px;
        margin-right: 25px;
    }

    #edu-icon {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/education%20icon.png?tr=w-150,h-150);
    }

    #prof-icon {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/professional_exp_icon.png?tr=w-150,h-150);
    }

    .school {
        font-family: 'Cabin', serif;
        font-size: 20px;
        margin-bottom: 5px;
        text-align: right;
        font-style: italic;
    }

    .degree {
        font-family: 'Cabin', serif;
        font-size: 25px;
        margin-bottom: 5px;
        text-align: right;
        font-weight: bold;
    }

    .place {
        font-family: 'Cabin', serif;
        font-size: 22px;
        margin-bottom: 5px;
        text-align: right;
        font-style: italic;
    }

    .position {
        font-family: 'Cabin', serif;
        font-size: 30px;
        margin-bottom: 5px;
        text-align: right;
        font-weight: bold;
    }

    .about_exp {
        font-family: 'Cabin', serif;
        font-size: 18px;
        hyphens: auto;
        text-align: left;
        margin: 12px 0 12px 0;
    }

    .exp-box ul {
        list-style-type: square;
    }

    .about_exp li {
        font-family: 'Cabin', serif;
        font-size: 18px;
        hyphens: auto;
        text-align: justify;
        margin: 12px 0 12px 0;
        padding-left: 20px;
        line-height: 1.5em;
    }

    /*end b3 section*/

    /*b4 section*/

    .section-bg4 {
        width: 100%;
        height: 100%;
        background-color: rgba(229, 125, 48, 0.25);
        /*background-color: white;*/
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        padding: 5% 15%;
    }

    .bg4-1 {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        /*padding: 0 10%;*/
    }

    .bg4-pic1 {
        height: 400px;
        width: 400px;
        background-size: 400px;
        background-position: top;
        border-radius: 50%;
        /*background-image: url(https://ik.imagekit.io/angelogiomateo/assets/angelo%20headshot.jpg)*/
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/ridedonthide.jpeg?tr=w-500,h-500);
        margin-bottom: 25px;
    }

    .bg4-1-right {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 100px;
        align-items: flex-end;
        justify-content: center;
        width: 50%;

    }

    .content_text_bg4 {
        font-family: 'Cabin', serif;
        font-size: 2em;
        margin-bottom: 1.25em;
        font-weight: bold;
        text-align: left;
    }

    .about_text_bg4 {
        font-family: 'Cabin', serif;
        font-size: 20px;
        hyphens: auto;
        margin-bottom: 10px;
    }

    .bg4-2 {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 10%;
        margin-top: 100px;
    }


    .under_text_bg4 {
        font-family: 'Cabin', serif;
        font-size: 2em;
        margin-bottom: 1.25em;
        font-weight: bold;
        text-align: center;
    }



    /*end b4 section*/

    /*b5 section*/

    .section-bg5 {
        width: 100%;
        height: 100%;
        /*background-color: rgba(229, 125, 48, 0.25);*/
        background-color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 5% 15%;
    }

    .bg5-1 {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 0 10%;
        margin-bottom: 50px;
    }

    .bg5-2 {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 10%;

    }

    .content_text_bg5 {
        font-family: 'Cabin', serif;
        font-size: 2em;
        margin-bottom: 1.10em;
        text-align: center;
        line-height: 1.15em;
        padding: 0 10%;

    }

    .s_logo {
        width: 400px;
        height: 400px;
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/s_logo.png?tr=w-500,h-500);
        background-size: cover;
    }

    .bg5-eps {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 40vw;
        align-items: center;
        justify-content: center;

    }

    .ep-pic {
        width: 250px;
        height: 250px;
        background-size: cover;
        margin: 10% 10% 10% 10%;
    }

    .ep-pic:hover {
        transform: scale(1.5);
        box-shadow: 5px 5px rgba(229, 125, 48, 0.5), 10px 10px rgba(57, 160, 215, 0.5);
        opacity: 1;
        z-index: 2;
        border-radius: 0;
    }

    #s_maha {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/s_maha_sq.png?tr=w-300,h-300);
    }

    #s_louise {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/s_louise_sq.png?tr=w-300,h-300);
    }

    #s_ayla {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/s_ayla_sq.png?tr=w-300,h-300);
    }

    #s_amy {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/s_amy_sq.jpg?tr=w-300,h-300);
    }

    #s_lex {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/s_lex_sq.jpg?tr=w-300,h-300);
    }



    /*end b5 section*/

    /*bg6*/

    .section-bg6 {
        width: 100%;
        height: 100%;
        background-color: rgba(57, 160, 215, 0.1);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 5% 0;
    }


    #music {
        flex-direction: row;
    }

    .bg6-sec {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 10%;
        margin: 50px 0 50px 0;
    }

    .content_text_bg6 {
        font-family: 'Cabin', serif;
        font-size: 2em;
        margin-bottom: 1.25em;
        font-weight: bold;
        text-align: center;
    }

    /*    .content_text_bg6::after {
        content: "";
        margin: 0 auto;
        position: absolute;
        height: 5px;
        background-color: black;
        width: 50%;
        bottom: 0;
    }*/

    #lovemusic {
        font-size: 4em;
        margin: 0 50px 0 0;

    }

    .bg6-1-left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-right: 100px;
        align-items: flex-end;
        justify-content: center;
        /*width: 50%;*/
    }

    .bg6-pic {
        height: 400px;
        width: 400px;
        background-size: 400px;
        background-position: center;
        border-radius: 50%;
        margin-bottom: 25px;
        transition: transform .2s;
        opacity: 0.75;
    }

    .bg6-pic:hover {
        transform: scale(1.5);
        box-shadow: 5px 5px rgba(229, 125, 48, 0.5), 10px 10px rgba(57, 160, 215, 0.5);
        opacity: 1;
    }

    #bg6-pic1 {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/confetti_sq.jpg?tr=w-600,h-600);
        margin-left: 50px;
        height: 500px;
        width: 500px;
        background-size: 500px;
        background-position: center;
        border-radius: 50%;
        margin-bottom: 25px;
        transition: transform .2s;
    }


    .bg6-gallery {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 60vw;
        align-items: center;
        justify-content: space-around;

    }

    .bg6-pic {
        width: 250px;
        height: 250px;
        background-size: cover;
        /*margin: 2.5%;*/
        border-radius: 50%;
        background-position: center;
    }

    #c_bss {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/concerts/c_bss.jpeg?tr=w-350,h-350);
    }

    #c_lcd {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/concerts/c_lcd.jpg?tr=w-350,h-350);
    }

    #c_lc {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/concerts/c_lc.jpg?tr=w-350,h-350);
    }

    #c_stars {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/concerts/c_stars.jpg?tr=w-350,h-350);
    }

    #c_chvrches {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/concerts/c_chvrches.jpg?tr=w-350,h-350);
    }

    #c_aq {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/concerts/c_aq.jpeg?tr=w-350,h-350);
    }

    #c_feist {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/concerts/c_feist.jpg?tr=w-500,h-500);
    }

    #v_sit {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/vinyl/v_sit.jpg?tr=w-350,h-350);
    }

    #v_vinyl {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/vinyl/v_vinyl.jpg?tr=w-350,h-350);
        /*transform: rotate(45deg);*/
    }

    #v_lf {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/vinyl/v_lf.jpeg?tr=w-350,h-350);
    }

    #v_bg {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/vinyl/v_bg.jpeg?tr=w-350,h-350);
    }

    #v_stars {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/vinyl/v_Stars.jpg?tr=w-350,h-350);
    }

    #write_about_music {
        font-size: 4em;
    }

    .writing {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        /*flex-wrap: wrap;*/
        /*width: 60vw;*/
    }

    .writing_ex {
        height: 50vh;
        width: 45vw;
        /*opacity: 0.8;*/
        transition: transform .5s;
        margin: 0 20px 20px 20px;
        transition: all 0.5s ease-in;
        background-repeat: no-repeat;
        padding: 0 0 5% 0;
    }

    #boniver {
        background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url(https://ik.imagekit.io/angelogiomateo/assets/bon-iver-22.jpg);
        background-size: cover;
        background-position: top;
    }

    #nxne {
        background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url(https://ik.imagekit.io/angelogiomateo/assets/nxne.jpg);
        background-size: cover;
        background-position: center;
    }

    #musiccity {
        background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url(https://ik.imagekit.io/angelogiomateo/assets/confetti_sq.jpg);
        background-size: cover;
        background-position: center;
    }

    #mc_title {
        padding: 0 10% 0 10%;
    }



    /*  .writing_ex h2 {
        
    }*/

    .writing_title {
        font-family: 'Cabin', serif;
        font-size: 2em;
        margin-top: 10%;
        margin-bottom: 1.25em;
        font-weight: bold;
        text-align: center;
        color: #ffffff;
    }

    .writing_ex h3 {
        opacity: 0;
        font-family: 'Cabin', serif;
        font-size: 1.25em;
        margin-bottom: 1em;
        text-align: left;
        color: #ffffff;
        padding: 0 10% 0 10%;
        transition: all 0.5s ease-in;
        display: flex;

    }

    .writing_ex p {
        opacity: 0;
        display: none;
        font-family: 'Cabin', serif;
        font-size: 18px;
        hyphens: auto;
        text-align: justify;
        line-height: 1.5em;
        color: #ffffff;
        padding: 0 15% 0 15%;
        margin: 15px 0 15px 0;
        transition: all 0.5s ease-in;
        /*overflow: scroll;*/
    }

    #boniver:hover {
        height: 100vh;
        width: 60vw;
        margin: 0;
        overflow: auto;
        /*position: absolute;*/
        /*border: 500px solid rgba(0,0,0,0.5);*/
        /*        transform: scaleY(1.5);
        transform: scaleX(1.25);*/
        /*transform: translateY(25%);*/
        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://ik.imagekit.io/angelogiomateo/assets/bon-iver-22.jpg);
    }

    .writing_ex:hover {
        margin: 0;
    }

    .writing_ex:hover h3 {
        opacity: 1;
        display: flex;
    }

    .writing_ex:hover p {
        opacity: 1;
        display: flex;
    }

    #nxne:hover {
        height: 100vh;
        width: 60vw;
        margin: 0;
        overflow: auto;
        /*position: absolute;*/
        /*        transform: scaleY(1.5);
        transform: scaleX(1.25);*/
        /*transform: translateY(-25%);*/
        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://ik.imagekit.io/angelogiomateo/assets/nxne.jpg);
    }

    #musiccity:hover {
        height: 100vh;
        width: 60vw;
        margin: 0;
        overflow: auto;
        /*position: absolute;*/
        /*        transform: scaleY(1.5);
        transform: scaleX(1.25);*/
        /*transform: translateY(-25%);*/
        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://ik.imagekit.io/angelogiomateo/assets/confetti_sq.jpg);
    }

    /*    .fadebg {
        min-width: 100%;
        min-height: 100%;
        position: absolute;
        overflow: hidden;
        background-color: rgba(0, 0, 0, 0.75);
        background-color: black;
        opacity: 0;
        transition: all 0.5s ease-in;
        pointer-events: none;
    }

    .writing_ex:hover~.fadebg {
        opacity: 1;
        z-index: -1;
    }*/

    /*    #nxne:hover, #boniver~.fadebg {
        opacity: 1;
        /*background: black;
        z-index: 1;
    }*/



    /*end b6*/

    /*bg7*/

    .section-bg7 {
        width: 100%;
        height: 100%;
        background-color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 5% 0 5% 0;
    }

    .title-bg7 {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-bottom: 5%;
    }

    .content_text_bg7 {
        font-family: 'Cabin', serif;
        font-size: 2em;
        font-weight: bold;
        text-align: center;
    }

    #lovefilm {
        font-size: 4em;
        margin-left: 50px;
    }

    .agm-film {
        height: 400px;
        width: 400px;
        background-size: 400px;
        background-position: center;
        border-radius: 50%;
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/tiff_film_sq.jpg?tr=w-500,h-500);
        margin-right: 50px;
    }

    #favourites {
        margin-bottom: 2.5%;
        font-size: 3em;
    }

    .bg7-gallery {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 60vw;
        align-items: center;
        justify-content: center;

    }

    .bg7-pic {
        width: 200px;
        height: 200px;
        background-size: cover;
        /*margin: 2.5%;*/
        border-radius: 50%;
        background-position: center;
        transition: transform .2s;
        opacity: 0.75;
        margin: 5px;
    }

    .bg7-pic:hover {
        transform: scale(1.5);
        box-shadow: 5px 5px rgba(229, 125, 48, 0.5), 10px 10px rgba(57, 160, 215, 0.5);
        opacity: 1;
        z-index: 2;
        width: 200px;
        height: 300px;
        border-radius: 0;
    }

    #m_sunrise {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/movies/sunrise.jpg?tr=w-600,h-400);
    }

    #m_eternal {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/movies/eternal.jpg?tr=w-600,h-400);
    }

    #m_mood {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/movies/mood.jpg?tr=w-600,h-400);
    }

    #m_columbus {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/movies/columbus.jpg?tr=w-600,h-400);
        background-position: bottom;
    }

    #m_juno {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/movies/juno.jpg?tr=w-600,h-400);
    }

    #m_sunset {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/movies/sunset.jpg?tr=w-600,h-400);
    }

    #m_midnight {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/movies/midnight.jpg?tr=w-600,h-400);
    }

    #m_parasite {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/movies/parasite.jpg?tr=w-600,h-400);
    }

    #m_indigo {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/movies/indigo.jpg?tr=w-600,h-400);
    }

    #m_pilgrim {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/movies/pilgrim.jpg?tr=w-600,h-400);
        background-position: 0 15%;
    }

    #m_moonlight {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/movies/moonlight.jpg?tr=w-600,h-400);
    }

    #m_cleo {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/movies/cleo.jpg?tr=w-600,h-400);
    }

    #m_journey {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/movies/journey.jpg?tr=w-600,h-400);
    }

    #m_royal {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/movies/royal.jpg?tr=w-600,h-400);
        background-position: top;
    }

    #m_translation {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/movies/translation.jpg?tr=w-600,h-400);
    }

    #m_casablanca {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/movies/casablanca.jpg?tr=w-600,h-400);
        background-position: top;
    }

    #m_boyhood {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/movies/boyhood.jpg?tr=w-600,h-400);
    }

    #m_short {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/movies/short.jpg?tr=w-600,h-400);
    }

    #write_about_film {
        margin: 10% 0 10% 0;
        font-size: 4em;
    }

    .lb-div {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 50px;
    }

    .letterboxd-logo {
        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://ik.imagekit.io/angelogiomateo/assets/letterboxd-logo.png);
        height: 150px;
        width: 300px;
        /*width: auto;*/
        background-size: cover;
        border-radius: 10%;
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform .2s;
    }

    .letterboxd-logo:hover {
        transform: scale(1.5);
    }


    #lb-username {
        color: white;
        font-size: 1.5em;
    }

    #columbus {
        background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url(https://ik.imagekit.io/angelogiomateo/assets/movies/columbus.jpg);
        background-size: cover;
        background-position: bottom;
    }


    #columbus:hover {
        height: 100vh;
        width: 60vw;
        margin: 0;
        overflow: auto;
        background-position: center;
        /*position: absolute;*/
        /*        transform: scaleY(1.5);
        transform: scaleX(1.25);*/
        /*transform: translateY(-25%);*/
        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://ik.imagekit.io/angelogiomateo/assets/movies/columbus.jpg);
    }

    #us_cut {
        margin-top: 0;
    }

    #mood_indigo {
        background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url(https://ik.imagekit.io/angelogiomateo/assets/movies/indigo.jpg);
        background-size: cover;
        background-position: 0 50%;
    }

    #mood_indigo:hover {
        height: 100vh;
        width: 60vw;
        margin: 0;
        overflow: auto;
        background-position: center;
        /*position: absolute;*/
        /*        transform: scaleY(1.5);
        transform: scaleX(1.25);*/
        /*transform: translateY(-25%);*/
        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://ik.imagekit.io/angelogiomateo/assets/movies/indigo.jpg);
    }



    /*end bg7*/

    /*conclusion section*/

    .conclusion {
        width: 100%;
        min-height: 100vh;
        background-size: cover;
        background-position: bottom;
        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://ik.imagekit.io/angelogiomateo/assets/c_bg_today.jpg);
        /*background-color: rgba(229, 125, 48, 0.25);*/
        /*background-color: white;*/
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        padding: 5% 15%;
        position: relative;

    }

    .conclusion_para {
        display: flex;
        flex-direction: column;
        margin: 5% 0 2.5% 0;
    }

    .conclusion-title {
        font-family: 'Oswald', sans-serif;
        color: #ffffff;
        font-size: 4em;
        /* word-wrap: normal; */
        position: relative;
        line-height: 110%;
        margin-top: 10px;
        /*text-shadow: 10px 10px rgba(0,0,0,0.5);*/
    }

    .identity_links {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        align-self: center;
    }

    #c_soc_med_container {
        display: flex;
        flex-direction: column;
        margin-top: 20px;
        justify-content: flex-start;
        align-items: center;
        width: 25vw;
        margin-right: 15%;
    }

    .contact-info {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 25px;
    }

    .contact-info a {
        text-decoration: none;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 500px;
    }

    .c_soc_med {
        height: 75px;
        width: 75px;
        border-radius: 50%;
        background-color: rgba(48, 145, 218, 1);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        color: #ffffff;
        text-decoration: none;
        margin-right: 60px;
        transition: transform .2s;
        background-size: 50px;
        background-repeat: no-repeat;
        background-position: center;
    }

    .c_soc_med:hover {
        transform: scale(1.5);
        box-shadow: 5px 5px rgba(229, 125, 48, 0.5), 10px 10px rgba(57, 160, 215, 0.5);
        opacity: 1;
    }

    #email-icon {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/email.png);
    }

    #tw-icon {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/twitter.png);
    }

    #ig-icon {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/instagram.png);
    }

    #linkedin-icon {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/linkedin.png);
    }

    #studio-icon {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/studio.png?tr=w-200,h-200);
        background-size: cover;
        background-position: center;
    }


    #tarana-icon {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/tarana.png?tr=w-200,h-200);
        background-size: cover;
        background-position: center;
    }


    #lb_logo {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/lb_logo_circle.png);
        background-size: cover;
        background-position: center;
    }

    .socmedia_text_bg7_c {
        font-family: 'Cabin', serif;
        font-size: 2.25em;
        font-weight: bold;
        text-align: left;
        color: white;
    }

    #c_stories {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/s_logo.png?tr=w-500,h-500);
        background-size: cover;
    }

    .content_text_bg7_c {
        font-family: 'Cabin', serif;
        font-size: 2em;
        font-weight: bold;
        text-align: center;
        color: white;
    }

    .feist-box {
        display: flex;
        align-items: center;
    }

    #feist-text {
        font-size: 1em;
        margin-left: 20px;
        font-weight: normal;
    }

    #c_feist {
        width: 100px;
        height: 100px;
        background-size: cover;
        opacity: 1;
    }

    #c_feist:hover {
        transform: scale(3);
    }


    /*end b7

/*sec_instagram*/

    /*    .sec_instagram {
        width: 100%;
        height: 1000px;
        background-color: rgba(229, 125, 48, 0.25);
        background-color: white;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        padding: 5% 15%;
    }

    #instafeed {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, 1fr);
        grid-column-gap: 0.5rem;
        grid-row-gap: 0.5rem;
        max-width: 64rem;
        margin: auto;
    }*/

    /*end sec_instagram*/

    #footer_1 {
        height: 100%;
        width: 50%;
        display: inline-flex;
        justify-content: flex-end;
        align-items: center;
        padding-right: 10px;
    }

    #footer_2 {
        height: 100%;
        width: 50%;
        display: inline-flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        padding-left: 10px;
    }

    .footer_text {
        font-family: 'Cabin', sans-serif;
        font-size: 14px;
        color: #ffffff;
        text-decoration: none;
    }

    .footer_text#footer_text_1 {
        text-align: right;
        width: 350px;
    }

    .soc_med_ft {
        height: 25px;
        width: auto;
        display: inline-flex;
        font-size: 20px;
        color: #ffffff;
        text-decoration: none;
    }

    #email_footer_logo {
        margin-right: 10px;
    }

    #tw_footer_logo {
        margin-right: 10px;
    }

    #ig_footer_logo {
        margin-right: 10px;
    }
}

@media only screen and (min-width: 0px) and (max-width: 1800px) {

    .bg4-pic1 {
        height: 300px;
        width: 300px;
        background-size: 300px;
    }

}

@media only screen and (min-width: 0px) and (max-width: 1440px) {
    .title_headshot {
        width: 250px;
        height: 250px;
        background-size: 250px;
    }

    #title {
        font-size: 90px;
    }

    .sub-title {
        font-size: 40px;
    }


    .writing_title {
        font-size: 1.5em;
    }

    .writing_ex p {
        font-size: 0.85em;
    }

    .writing_ex h3 {
        font-size: 1em;
    }

    .conclusion_para {
        display: flex;
        flex-direction: column;
        margin: 5% 0 2.5% 0;
    }

    .conclusion-title {
        font-family: 'Oswald', sans-serif;
        color: #ffffff;
        font-size: 3em;
        /* word-wrap: normal; */
        position: relative;
        line-height: 110%;
        margin-top: 10px;
        /*text-shadow: 10px 10px rgba(0,0,0,0.5);*/
    }

    .identity_links {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
    }

    #c_soc_med_container {
        display: flex;
        flex-direction: column;
        margin-top: 20px;
        justify-content: flex-start;
        align-items: center;
        width: 25vw;
        margin-right: 15%;
    }

    .contact-info {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 25px;
    }

    .contact-info a {
        text-decoration: none;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 500px;
    }

    .c_soc_med {
        height: 75px;
        width: 75px;
        border-radius: 50%;
        background-color: rgba(48, 145, 218, 1);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        color: #ffffff;
        text-decoration: none;
        margin-right: 50px;
        transition: transform .2s;
        background-size: 50px;
    }


    .c_soc_med:hover {
        transform: scale(1.5);
        box-shadow: 5px 5px rgba(229, 125, 48, 0.5), 10px 10px rgba(57, 160, 215, 0.5);
        opacity: 1;
    }

    #lb_logo {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/lb_logo_circle.png);
        background-size: cover;
        background-position: center;
    }

    .socmedia_text_bg7_c {
        font-family: 'Cabin', serif;
        font-size: 2.25em;
        font-weight: bold;
        text-align: center;
        color: white;
    }

    #c_stories {
        background-image: url(https://ik.imagekit.io/angelogiomateo/assets/s_logo.png?tr=w-500,h-500);
        background-size: cover;
    }

    .content_text_bg7_c {
        font-family: 'Cabin', serif;
        font-size: 2em;
        font-weight: bold;
        text-align: center;
        color: white;
    }

    .feist-box {
        display: flex;
        align-items: center;
    }

    #feist-text {
        font-size: 1em;
        margin-left: 20px;
        font-weight: normal;
    }

    #c_feist {
        width: 100px;
        height: 100px;
        background-size: cover;
        opacity: 1;
    }

    #c_feist:hover {
        transform: scale(3);
    }

}

@media only screen and (min-width: 0px) and (max-width: 1200px) {

    .title-box {
        height: 100px;
        width: 250px;
    }

    .exp-title {
        font-size: 2em;
        line-height: 1em;
    }

    .bg4-pic1 {
        height: 250px;
        width: 250px;
        background-size: 250px;

    }

    .about_text_bg4 {
        font-size: 0.9em;
    }

    .bg4-2 {
        margin-top: 50px;
    }

    .s_logo {
        width: 300px;
        height: 300px;
    }

    .content_text_bg5 {
        font-size: 1.5em;
        margin-bottom: 0.8em;
        padding: 0;

    }

    .bg5-eps {
        width: 60vw;
    }

    #bg6-pic1 {
        height: 350px;
        width: 350px;
        background-size: 350px;
    }

}


@media only screen and (min-width: 0px) and (max-width: 1024px) {

    #div_title {
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .title_text {
        justify-content: center;
        align-items: center;
    }

    #title {
        text-align: center;
    }

    .sub-title {
        text-align: center;
    }

    .content_title {
        font-size: 2em;
    }

    .content_text_1 {
        font-size: 1.2em;
    }

    .about_text {
        font-size: 0.85em;
    }

    .content_text_bg2 {
        font-size: 1.2em;
    }

    .bg2-1-left {
        margin-right: 50px;
    }

    .bg2-pic1 {
        height: 250px;
        width: 250px;
        background-size: 250px;
    }

    .exp-logo {
        width: 75px;
        height: 75px;
        background-size: 75px;
    }


    .place {
        font-size: 1em;

    }

    .position {
        font-size: 1.5em;
    }

    .about_exp li {
        font-size: 0.75em;
        margin: 8px 0 8px 0;
        line-height: 1.5em;
    }

    .exp-box {
        margin: 50px 0 10px 0;
    }

    .school {
        font-size: 1em;

    }

    .degree {
        font-size: 1.5em;
    }

    #music {
        align-items: center;
        justify-content: center;
        flex-direction: column-reverse;
    }

    #bg6-pic1 {
        margin: 0 0 10px 0;

    }

    #lovemusic {
        margin: 10px 0 0 0;
    }

    .bg7-gallery {
        width: 90vw;
    }

}

@media only screen and (min-width: 0px) and (max-width: 900px) {

    /* Styles */
    .content_title {
        font-size: 45px;
    }

    .content_text_1 {
        font-size: 20px;
    }

    #hero {
        align-content: flex-start;
    }

    #div_title {
        top: 10%;
    }

    #title {
        font-size: 75px;
        text-align: center;
    }

    .content_title {
        font-size: 40px;
    }

    .content_text_1 {
        font-size: 28px;
    }

    #about_content {
        width: 95%;
        display: inherit;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        height: inherit;
    }

    .about_text {
        font-family: 'Cabin', serif;
        font-size: 14px;
        hyphens: auto;
        margin-bottom: 10px;
        text-align: justify;
        width: 100%;
    }

    .bg4-1 {
        flex-direction: column;
    }

    .bg4-1-right {
        margin: 0;
        width: 60vw;
    }

    .content_text_bg4 {
        text-align: center;
    }

    .bg4-1-right .about_text_bg4 {
        text-align: justify;
    }

    .bg-gallery {
        width: 90vw;
    }

    .bg6-pic {
        width: 150px;
        height: 150px;
    }

    .writing_title {
        padding: 0 10% 0 10%;
    }

    .writing_ex {
        width: 70vw;
    }

    #boniver:hover {
        width: 80vw;
    }

    #nxne:hover {
        width: 80vw;
    }

    #musiccity:hover {
        width: 80vw;
    }

    #columbus:hover {
        height: 100vh;
        width: 80vw;

    }

    #mood_indigo:hover {
        width: 80vw;
    }

    .footer_text#footer_text_1 {
        width: 60%;
    }

    .agm-film {
        height: 300px;
        width: 300px;
        background-size: 300px;

    }

/*    .conclusion {
        height: 100;
    }*/

    .identity_links {
        flex-direction: column;
    }

    #c_feist {
        width: 75px;
        height: 75px;
    }


}

@media only screen and (min-width: 0px) and (max-width: 768px) {


    .bg2-1 {
        flex-direction: column-reverse;
    }

    .content_text_bg2 {
        text-align: justify;

    }

    .bg2-1-left {
        margin-right: 0;
        width: 60vw;
    }


    .exp-head {
        flex-direction: column;
    }

    .exp-head-right {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        margin-top: 5%;
    }


    .exp-head-right p {
        text-align: center;
    }

    .exp-icon {
        width: 50px;
        height: 50px;
        background-size: 50px;

    }

    .title-heading {
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;
    }

    .exp-title {
        font-size: 1.35em;
    }

    .title-box {
        height: 75px;
        width: 150px;
    }

    .ep-pic {
        width: 150px;
        height: 150px;

    }

    .bg5-eps {
        width: 80vw;
    }

    .bg4-2 {
        width: 80vw;

    }

    .under_text_bg4 {
        font-size: 1.5em;
    }

    .section-bg4 {
        align-items: center;
        justify-content: center;


    }

    .title-bg7 {
        flex-direction: column;
    }

    .agm-film {
        margin: 0;
    }

    #lovefilm {
        margin: 25px 0 25px 0;
    }

    .socmedia_text_bg7_c {
        font-size: 1.85em;
    }


    .c_soc_med {

        height: 50px;
        width: 50px;
        background-size: 25px;



    }

    #tarana-icon, #studio-icon {
        background-size: cover;
        background-position: center;
    }

    .contact-info a {
        width: 75vw;
    }

    .feist-box {
        flex-direction: column-reverse;
        justify-content: space-between;
        margin-top: 20px;
    }

    #feist-text {
        margin: 0 0 15px 0;
    }


}

@media only screen and (min-width: 0px) and (max-width: 500px) {


    .title_headshot {
        width: 200px;
        height: 200px;
        background-size: 200px;
    }

    .sub-title {
        font-size: 30px;
    }

    #title {
        font-size: 60px;
    }

    .content_title {
        font-size: 40px;
    }

    .content_text_1 {
        font-size: 28px;
    }

    #div_title {
        top: 15%;
    }


    #nav_bar {
        flex-direction: column;
        align-content: flex-start;
        justify-content: center;
        height: auto;
    }

    .nav_item a {
        font-size: 25px;
    }

    /* #hero {
                    max-height: 500px;
                } */
    .nav_box_1 {
        display: flex;
        align-content: center;
        justify-content: center;
        width: 100%;
        padding: 0;
        margin-top: 25px;
    }

    .nav_box_2 {
        padding-left: 10%;
        padding-right: 10%;
        width: 100%;
        justify-content: center;
        margin-top: 30px;
    }

    #about_content {
        width: 95%;
        display: inherit;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        height: inherit;
    }

    .about_text {
        font-family: 'Cabin', serif;
        font-size: 14px;
        hyphens: auto;
        margin-bottom: 10px;
        text-align: justify;
        width: 100%;
    }

    .title-heading {
        flex-direction: column;
    }

    .exp-icon {
        margin: 0 0 10px 0;

    }

    .exp-section {
        margin-bottom: 20px;
        margin-top: 20px;
        width: 70vw;
        padding: 0;
    }

    .section-bg3 {
        padding-top: 10%;
        padding-bottom: 10%;
    }

    .under_text_bg4 {
        font-size: 1.5em;
    }

    .bg6-gallery {
        width: 90vw;
    }

    .bg6-pic {
        width: 125px;
        height: 125px;
    }

    .footer {
        height: auto;
        flex-direction: column-reverse;
        padding: 5% 0 5% 0;
        justify-content: center;
        align-content: center;
    }

    #footer_1 {
        width: 100%;
        align-items: center;
        padding: 10px 0 10px 0;
        justify-content: center;
    }

    #footer_2 {
        width: 100%;
        align-items: center;
        padding: 10px 010px 0;
        justify-content: center;
    }

    .footer_text#footer_text_1 {
        text-align: center;
        width: 60%;
    }

    #footer_text_2 {
        text-align: center;
        width: 100%;
    }

    #lovefilm {
        font-size: 3em;
    }

    #favourites {
        font-size: 2.25em;
    }

    .agm-film {
        height: 200px;
        width: 200px;
        background-size: cover;
    }

    .bg7-pic {
        width: 125px;
        height: 125px;
    }

    .conclusion-title {
        font-size: 2em;
    }

    .socmedia_text_bg7_c {
        font-size: 1.5em;
    }
}

@media only screen and (min-width: 0px) and (max-width: 450px) {
    #div_title {
        top: 5%;
    }

    #title {
        margin-top: 20px;
    }

}