@import url('https://fonts.googleapis.com/css2?family=Bungee+Spice&family=Inconsolata&family=Poppins&family=Raleway:wght@700&family=Source+Sans+Pro:ital,wght@0,400;0,600;1,400&display=swap');

:root{
    --dark: #03045e;
    --light: #90e0ef;
    --neutral: #00B4D8;
    --lightNeutral: #00b4d8;
    --darkNeutral: #0077b6;
    --blue-grey: #0D5B6D;
    
    --turquoise: #18DFCE;
    --green-cyan: #019B65;
    --dark-green: #016441;
    
  }
  
  /** BODY **/
  body{
    display:flex;
    flex-direction: column;
    background: linear-gradient(50deg, #0DBD9A, var(--dark-green));
    padding: 0px;
    margin: 0px;
    height: 100%;
  }

    /** MAIN STYLING **/
    /** abides by the body flexbox**/
    main{
        display: flex;
        align-items: center;
        flex-direction: column;
    }

        /** TITLE STYLEING **/
        /** abides by the main flexbox**/
        .page-title{
            font-family: Raleway;
            color: var(--light);
            align-self: center;
            width: fit-content;
            font-size: 60px;
        }

        
        /** ABOUT ME SECTION **/
        /** abides by the main flexbox**/
        .about-me-section{
            background-color: transparent;
            padding: 20px;
            display: flex;
            flex-direction: row;
        }
        
            /** COLLAGE **/
            /** abides by the .about-me-section flexbox**/
            .collage{
                width: 50%;
                height: fit-content;

                background-color: var(--lightNeutral);

                border-radius: 10px;

                display: flex;
                flex-wrap: nowrap;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                align-self: center;
            }

            .collageCol{
                width: 50%;
                display: flex;
                flex-wrap: nowrap;
                flex-direction: column;
                background-color: transparent;
                justify-content: space-between;

                margin: 5px;
            }
            
            /** abides by the collage flexbox**/
            img{
                width: 100%;
                margin-bottom: 10px;
                border-radius: 10px;
                border: 0px solid;
                background-color: black;
            }
        
            /** CAPTION **/
            /** abides by the .about-me-section flexbox**/
            .caption-group{
                width: 50%;
                display: flex;
                flex-direction: column;
                /*background-color: var(--light);*/
            }
            
            #goals-container{
                background-color: var(--green-cyan);
                border-color: var(--green-cyan);
            }

            #goals-container > h3{
                color: var(--light);
                background-color: var(--dark-green);
            }

            .about-me{
                height: wrap-content;
                background-color: var(--dark);
                border-radius: 20px;
                margin: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                color: var(--light);
                border-radius: 10px;
                border: 10px solid;
                border-color: var(--dark);
            }

            .about-me > h3{
                align-self: flex-start;
                background-color: var(--darkNeutral);
                border-radius: 5px;
                padding: 10px;
                margin: 0px;
                font-family: Raleway;

            }

            .about-me > *{
                padding: 20px;
                background-color: transparent;
                margin: 0px;
                text-align: center;
                font-family: Raleway;
            }

            .about-me > p{
                padding: 20px;
                background-color: transparent;
                margin: 0px;
                text-align: center;
                font-family: Raleway;
            }

            .about-me > ul{
                padding: 20px;
                background-color: transparent;
                margin: 0px;
                text-align: left;
                font-family: Raleway;
                align-self: flex-start;
            }


                /** abides by the about-me flexbox**/
                .nav-btns{
                    display:flex;
                    flex-direction: column;
                    height: 35%; 
                    justify-content: space-around;
                    align-items: center;
                }
                
                button{
                    width: 20%;
                }

    /** FOOTER **/
    /** abides by the body flexbox **/
    .wrapper {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        margin: 0 auto -200px; /* the bottom margin is the negative value of the footer's height */
    }

    footer, .push{
        background-color: yellow;
        color: var(--light);
        height: 200px; /*push must be the same height as the footer*/
        display: flex;
        justify-self: end;
        justify-content: center;
        font-family: Poppins;
    }

    .header-section{
        height: wrap-content;
        background-color: var(--darkNeutral);
        margin: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        color: var(--light);
        width: fit-content;
        height: fit-content;
        border-radius: 10px;
        border: 10px solid;
        border-color: var(--dark);
        font-family: Source Sans Pro;
        padding: 20px;
        
        align-self: center;

    }

    .live > * {
        animation: blink 1.7s infinite;
    }

    .circle{
        border-radius: 20px;
        background-color: red;
        width: 10px;
        height: 10px;
        margin-left: 10px;
    }


    .blinking{
        animation: blink 1.7s infinite;
    }

    a{
        font-family: inherit;
        color: turquoise;
        text-decoration: none;
    }

    a:hover{
        color: var(--green-cyan);
    }