/* Styling the images */
img{
    max-width: 100%;
}


/* Styling Background and setting the font */

/* Learned how to change the text hover selection colour https://www.braydoncoyer.dev/blog/change-text-highlight-color-with-css */
::selection{
    background-color: #88B29F;
}
*{
    /* White but slightly off so it matches the gif backround */
    font-family: 'Montserrat', sans-serif;
    cursor: url(/siat/student_projects/iat235_2024_spring/d101-1/Project4_Keyaan_Ethan_Haris/public_html/assets/cursor.svg), auto;
    box-sizing: border-box;
}

p{
    cursor: url(/siat/student_projects/iat235_2024_spring/d101-1/Project4_Keyaan_Ethan_Haris/public_html/assets/cursor-text.svg), auto;
}

h1{
    cursor: url(/siat/student_projects/iat235_2024_spring/d101-1/Project4_Keyaan_Ethan_Haris/public_html/assets/cursor-text.svg), auto;
}

h2{
    cursor: url(/siat/student_projects/iat235_2024_spring/d101-1/Project4_Keyaan_Ethan_Haris/public_html/assets/cursor-text.svg), auto;
}

body{
    background-color: #FBFBFA;
}

/* Making the Nav Bar at the top, referenced elements from: https://www.w3schools.com/css/css_navbar_horizontal.asp */

nav li{
    display: inline;
}
.left-align{
    float: left;
}
.right-align{
    float: right;
}
.nav-link{
    display: block;
    text-decoration: none;
    padding: 0.8rem;
    margin: 0.7rem;
    margin-left: 1.5;
    margin-right: 1.5;
    font-size: 1rem;
    color: black;
    transition: all 200ms;
    border-radius: 0.3rem;
    background-color: #FBFBFA;


}
.nav-link:hover{
    background-color:#13795f;
    color:#FDFDFD;

    transform: scale(105%);

    cursor: url(/siat/student_projects/iat235_2024_spring/d101-1/Project4_Keyaan_Ethan_Haris/public_html/assets/cursor-hover.svg), auto;

}

.nav-link:focus{
    background-color: #13795f;
    color: #FDFDFD;
}

.top-bar{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: fixed;
    width: 100%;
    top:0;
    left:0;
    background-color: #FBFBFA;
    border-bottom: #13795f solid 0.04rem;
    z-index: 2;
}

.active{
    background-color:#13795f;
    color:#FDFDFD;


}

/* Styling the BG-IMG */

.content{
    margin: auto;
    margin-top: 6rem;
    width: fit-content;
}


/* Styling the button */

.extern-button{
    border: #13795f solid 0.08rem;
    padding: 0.8rem;
    border-radius: 0.4rem;
    background-color: #FBFBFA;
    text-decoration: none;
    color: black;
    transition: all 200ms;
    margin:1.2rem;
    margin-left: 0rem;


}

path{
    fill:black;
}

.arrow svg{
    width: 8; 
    height: 9;
    fill: none; 
}

.extern-button:hover, .extern-button:focus{
    background-color:#13795f;
    color:#FDFDFD;

    transform: scale(105%);

    .arrow{
        svg{
            transform: rotate(46deg);
        }

        path{
            fill:#FDFDFD;
        }
    }

    cursor: url(/siat/student_projects/iat235_2024_spring/d101-1/Project4_Keyaan_Ethan_Haris/public_html/assets/cursor-hover.svg), auto;

}

.button:focus{
    background-color:#13795f;
    color:#FDFDFD;

    transform: scale(105%);

    .arrow{
        svg{
            transform: rotate(46deg);
        }

        path{
            fill:#FDFDFD;
        }
    }


}

.bottom{
    position: fixed;
    bottom:0;
    right:0;
    z-index: 2;
}

.arrow{
    display: inline;
    padding-left: 0.2rem;
}

svg{
    transition:all 200ms;
}

.bg-img{
    max-width: 100%;
    margin-top: 6rem;

}

.home-page{
    position: relative;
    height: fit-content;
	width: 75vw;
    margin-left: auto;
    margin-right: auto;
}

.heading-paragraph{
    max-width: 40rem;
    font-family: "Open Sans", sans-serif;
    font-size: 1rem;
    font-weight: 300;
    margin-top: 0rem;
}

.heading-text{
    margin-top: 5rem;
    display: grid;
    grid-template-columns: 1fr 0.5fr;
}

.text-indicator{
    font-family: "Open Sans", sans-serif;
    font-size: 1rem;
    font-weight: 200;
    font-style: italic;
    position: absolute;
    right:0;
    color: black;
    text-decoration: none;
    transition: all 0.1s;

}




.decorative-lines{
    width: 100vw;
    height: 5rem;
    border-top: #13795f solid 0.02rem;
    border-bottom: #13795f solid 0.02rem;
    margin: 0rem;
    padding: 0rem;
    position: absolute;
    left: 0;
    margin-top: 4rem;
}

.text-indicator:hover, .text-indicator:focus{
    color: #13795f;
    transform: scale(102%);

    .arrow{
        path{
            fill:#13795f;
            transform: translateY(0.05rem);
        }
    }

    cursor: url(/siat/student_projects/iat235_2024_spring/d101-1/Project4_Keyaan_Ethan_Haris/public_html/assets/cursor-hover.svg), auto;
}

.context-snippet{
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 8rem;
}

.down{
    margin-top: 14rem;
}

.context-text{
    max-width: 30rem;
    font-family: 'Open Sans', auto;
    font-weight: 300;
    margin-top: 2rem;
    margin-bottom: 4rem;
}

.snippet-left{
    margin-right: 2rem;
    position:relative;
    align-content: center;
    
}


.context-img{
    border-radius: 0.4rem;
    border: solid #13795f 0.04rem;
}

h1{
    margin: 0;
    font-size: 2rem;
}

.snippet-img{
    text-align: left;
}






@media(max-width: 30rem){
    .right-align{
        float: left;
    }

}

.footer{
    width: 100vw;
    background-color: #13795f;
    position: absolute;
    left: 0;
    margin-top: 8rem;
    padding: 3rem;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.footer-heading{
    font-size: 1.2rem;
    font-weight: 500;
    color:#FBFBFA;
}

.footer-copy{
    margin-top: 2rem;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 1rem;
    max-width: 45rem;
    color: #FBFBFA;
}

.copyright{
    margin-top: 2rem;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 0.8rem;
    color: #FBFBFA;
    font-style: italic;
}

.icon{
    width: 2rem;
    color: #13795f;
    transition: 0.2s;
}

.icon:hover{
    cursor: url(/siat/student_projects/iat235_2024_spring/d101-1/Project4_Keyaan_Ethan_Haris/public_html/assets/cursor-hover.svg), auto;
}

.external-links{
    margin-top: 5rem;
    list-style-type: none;
    margin-left: 0;
    li a{
        text-decoration: none;
        margin-right: 1rem;
    }
}

.external-links li a:hover, .external-links li a:focus{
    .icon{
        transform: scale(110%);
        transform: translateY(-0.2rem);
    }

    cursor: url(/siat/student_projects/iat235_2024_spring/d101-1/Project4_Keyaan_Ethan_Haris/public_html/assets/cursor-hover.svg), auto;
}

@media(max-width: 65.2rem){
    .context-snippet{
        grid-template-columns: 1fr;
    }

    .context-img{
        margin-top: 5rem;
    }

    .no-button{
        .context-img{
            margin-top: 0rem;
            margin-bottom: 2rem;
        }
        
    }

    .home-page{
        width: 75vw;
    }

    .heading-text{
        grid-template-columns: 1fr;
    }

    .text-indicator{
        position: relative;
        margin-top: 2rem;
    }
    .snippet-left{
        margin-right: 0;
    }

    .snippet-button{
        text-align: center;
    }

    .extern-button{
        display: inline-block;
    }
    
}

.content-container{
    position: relative;
    height: fit-content;
	width: 60vw;
    margin-left: auto;
    margin-right: auto;
}

@media(max-width: 24rem){
    .home-page{
        width: 85vw;
    }

    .nav-link{
        margin-right: 0.2rem;
    }
}