/*general*/
@font-face {
    font-family: inter;
    src: url(fonts/Inter_24pt-Regular.ttf);
}
@font-face {
    font-family: inter-black-italic;
    src: url(fonts/Inter_18pt-BlackItalic.ttf);
}
@font-face {
    font-family: vtc-screamitloud;
    src: url(fonts/VTC_ScreamItLoud-Regular.ttf);
}
*{
    box-sizing:border-box;
}
body{
    margin:0;
    padding:0;
    overflow-x:hidden;
    background-color:#FFEBD4;
    position: relative;
    min-height: 100vw;
    font-family: inter;
}
.page-wrapper{
    display:flex;
    flex-direction:column;
    overflow: hidden;
    min-height:100vh;
}
h1{
    font-family: inter-black-italic;
    font-size:6rem;
}
h3{
    font-weight: 100;
}
/*homepage body*/


/*homepage header*/
.home-header{
    background-color: #3A2124;
    color:white;
    margin:0;
    display:flex;
    flex-direction: column;
    position:relative;
    height: 8rem;
    width:100%;
}
.home-name{
    margin-top:0;
    color:#F2CE9A
}
.header-subhead{
    margin:0;
    padding-bottom:3rem;
    color:black;
}

/*homepage top art*/
.home-circle{
    background-color: #523B43;
    position:absolute;
    height:50rem;
    width:50rem;
    left:50%;
    transform:translateX(-50%);
    border-radius:50%;
    margin-top:-4rem;
    margin-left:5rem;
}

.home-star{
    position:absolute;
    margin-top:-20rem;
    margin-left:5rem;
    left:50%;
    transform:translateX(-50%);

}
.home-main-drawing{
    width:50%;
    height:auto;
    position:absolute;
    margin-left:5rem;
    top:0;
    left:50%;
    transform:translateX(-50%);

}

/*homepage nav*/
.home-nav{
    display:flex;
    flex-direction:column;
    margin:1rem;
    margin-left:5rem;
    margin-top:12rem;
    rotate:20deg;
    width:fit-content;
}
.home-navlinks{
    background-color: #3A2124;
    color:#F2CE9A;
    font-family: vtc-screamitloud;
    text-decoration:none;
    font-size: 2rem;
    padding:.5rem;
    margin:1rem;
    margin-bottom:2rem;
    margin-right:auto;
}
#second-nav-link{
    margin-left:5rem;
}

/*beginning of about me*/
.home-title{
    margin-left:1rem;
}



/**Start of list pages**/

/*back buttons*/
.back-arrow{
    position:absolute;
}

.back-to-home{
    top:0;
}
.home-button{
    color:#F2CE9A;
    text-decoration: none;
    font-size: 1.5rem;
    position:absolute;
    margin-top:2.3rem;
}   
/*LO list page specific -button*/
.arrow-LO-list{ 
    left:80%;
}
.LO-list-button{ 
    left:84%;
}
/*Project list page specific -button*/

.project-list-button{
    right:80%
}


/*list headers*/
.list-title{
    padding-left:2rem;
    padding-right:2rem;
    padding-top:.5rem;
    padding-bottom:1rem;
}

/*Learning outcome Specific -title*/
.LO-title{
   rotate:15deg; 
   text-shadow:.25rem .25rem #B9514B;
   position: relative;
}
#LO-Learning{
    font-size:5rem;
    color:#F2CE9A;
    background-color: #743F3F;
    top:7rem;
    position:absolute;
    left:50%;
    transform:translate(-50%);
}
#LO-Outcomes{
    font-size:5rem;
    color:#F2CE9A;
    background-color: #3A2124;
    top:15rem;
    position:absolute;
    margin-left:5rem;
    left:50%;
    transform:translate(-50%);
}

/*project specific -title*/
#project-list-title{
    font-size:5rem;
    color:#F2CE9A;
    text-shadow:.25rem .25rem #B9514B;
    background-color: #3A2124;
    top:7rem;
    position:absolute;
    left:50%;
    transform:translate(-50%);
    rotate:-15deg;
}




/*articles for LOs and Project list*/
.list-wrapper{
    margin-top:25rem;
}
.article-block{
    display:flex;
    flex-direction:column;
    background-color: #3A2124;
    padding:2rem;
    margin:5rem;
}
.article-title{
    color:#F2CE9A ;
    font-size:3rem;
}
.article-img{
    padding-left:8rem;
    padding-bottom:5rem;
    /*placeholder bg color before relevent img*/
    background-color: beige;
}
/*LO list page specific -articles*/
.LO-list{
    transform:rotate(15deg);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
}
/*Project list page specific -articles*/
.Project-list{
    transform:rotate(-15deg);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
}


/**LO & Project Pages**/


.arrow-general{
    right:80%;
}
.button-general{
    right:84%
}

.list-links{
    display:flex;
    justify-content:end;
}
.small-nav-link{
    background-color: #3A2124;
    font-size:2rem;
    color:#F2CE9A;
    padding:1rem 1rem 1rem 2rem;
    margin-bottom:3rem;
}
.big-nav-link{
    background-color: #743F3F;
    font-size:2rem;
    color:#F2CE9A;
    padding:1rem;
    box-shadow: -.2rem .2rem .25rem rgba(0,0,0,0.15), -.3rem .3rem .35rem rgba(0,0,0,0.10);
}

/*header styling -LO Pages*/

.LO-header{
    position:relative;
    height:25rem;
}
    .LO-name-wrapper{
        position:absolute;
        background-color:#743F3F;
        color:#F2CE9A;
        text-shadow:.25rem .25rem #B9514B;
        padding-bottom:2rem;
        padding-right:2rem;
        width:75%;
      
    }
        .LO-name{
           text-align:right;
            margin-top:1rem;
        }
        .header-indent{
            display:inline-block;
            margin-right:10rem;
        }
    
    .LO-description{
        color:#F2CE9A;
        background-color: #3A2124;
        position:absolute;
        padding:2rem;
        max-width:50%;
        left:35%;
        bottom:-2rem;
        z-index:5;
    }

/*header styling -project pages*/
.project-header{
    margin-top:2rem;
    height:25rem;
}
    .project-name-wrapper{
        display:flex;
        align-items:center;
        background-color:#3A2124;
        color:#F2CE9A;
        text-shadow:.25rem .25rem #B9514B;
        padding-bottom:2rem;
        width:100%;
      
    }
        .project-name{
           margin-left:5%;
            margin-top:1rem;
        }

    

/*main content section- LO pages*/

/*LO reflection selection buttons*/
.button-section{
    background-color: #743F3F;
    position:absolute;
    left:0;
    top:50%;
    z-index:5;
}
.buttons{
    display:flex;
    flex-direction:column;
    padding-left:4rem;
    color:#F2CE9A;
 
}
.button-header{
    padding-left:-3rem;
}
.reflection-cycle{
    font-size:1rem;
    text-align: end;
    border:none;
    text-decoration: underline;
    background-color: #743F3F;
    color:#F2CE9A;
    padding-left: 2rem;
    padding:.5rem;
}
/**Project Page styling**/
.project-shape-div{
    position: absolute;
    width:20rem;
    height:20rem;
    border-radius:100%;
    top:22%;
    left:1%;
    background-color: #B9514B;
}
.project-icon{
    max-width:20rem;
}
.project-main-content{
    position:relative;
    display:flex;
    margin:2rem;
  
    justify-content:flex-start;
    align-items: flex-end;
}
    .project-text-sections{
        display:flex;
        flex-direction: column;
        min-width:60%;
        margin:2rem;
    }
        .project-first-paragraph{
            color:#F2CE9A;
            background-color:#743F3F;
            padding:2rem 1rem 2rem 1rem;
            margin:2rem;
        }
        .project-paragraph-w-links{
            color: #F2CE9A;
            background-color: #3A2124;
            padding:2rem 1rem 2rem 1rem;
            margin-bottom:0;
            margin:2rem;
       }
       .project-right-paragraph{
         color:#F2CE9A;
            background-color:#3A2124;
            padding:2rem 1rem 2rem 1rem;
            overflow-wrap:break-word;
            hyphens: auto;
            max-width:32%;

       }
       
    .project-main-image{
        position:absolute;
        right:5%;
        max-width:30%;
        top:25%;

    }



.LO-PDF{ /*remove later*/
    margin-top:20rem;
    margin-bottom:20rem;
    color:#FFEBD4;
    background-color: #3A2124;
    padding:2rem;
    display:flex;
    align-items:center;
    justify-content:center;
    
}

/**next button and bottom section used for LO and projects**/
    .next-button{
        background-color: #3A2124;
        color: #F2CE9A;
        font-family: vtc-screamitloud;
        font-size: 1.5rem;
        text-decoration: none;
        padding:.5rem;
        padding-left:1rem;
        position:absolute;
        right:8%;
        margin-top:-2rem;
    }
    .end-section{
        position: relative;
        display:flex;
        justify-content:center;
        width:80%;
        margin:auto;
        margin-bottom:4rem; /**compensates for the overlapping button**/
        max-width:80%;
        color:#F2CE9A;
        background-color:#743F3F;
        padding: 1rem 2rem 2rem 2rem;
    }
    .end-section-text{
       width:100%;
        text-align: left;
    }


/**main section -project page*/
.LO-main-content{
    display:none;
}
.LO-main-content.show{
    position:relative;
    display:flex;
   flex-direction: column;
}
.LO-main-content-top{
    display:flex;
    margin:2rem;
    margin-top:4rem;
    justify-content:flex-end;
    align-items: center;
}
    .LO-text-sections{
        display:flex;
        flex-direction: column;
        min-width:60%;
        margin:2rem;
    }
        .LO-first-paragraph{
            color:#F2CE9A;
            background-color:#743F3F;
            padding:2rem 1rem 2rem 1rem;
            margin-bottom:2rem;
        }
        .LO-paragraph-w-links{
            color: #F2CE9A;
            background-color: #3A2124;
            padding:2rem 1rem 2rem 8rem;
            margin-left:5rem;
       }
       .external-link{
        color:#F2CE9A;
       }
    .LO-main-image{
        max-width:30%;
        max-height: 50rem;
    }

    .LO-end-section{
        display:flex;
        justify-content:center;
        position:relative;
        width:80%;
        margin:auto;
        margin-bottom:4rem; /*doubled to compensate for the overlapping button*/
        max-width:80%;
        color:#F2CE9A;
        background-color:#743F3F;
        padding: 1rem 2rem 2rem 2rem;

    }
    .LO-end-section-text{
       width:100%;
        text-align: left;
    }



/**next button used for LO and projects**/
    .next-button{
        background-color: #3A2124;
        color: #F2CE9A;
        font-family: vtc-screamitloud;
        font-size: 1.5rem;
        text-decoration: none;
        padding:.5rem;
        padding-left:1rem;
        position:absolute;
        right:-5%;
        bottom:-2rem;
    }


.LO-PDF{
    margin-top:20rem;
    margin-bottom:20rem;
    color:#FFEBD4;
    background-color: #3A2124;
    padding:2rem;
    display:flex;
    align-items:center;
    justify-content:center;
    
}

/*beginning of footer*/
.footer{
    background-color:#3A2124;
    margin:0;
    margin-top:2rem;
    padding:0;
    display:flex;
    flex-direction:row;
}

.footer-section{
    color:white;
    display:flex;
    flex-direction:column;
    padding-left:3rem;
}

.footer-links{
    color:white;
    text-decoration:none;
    padding-left:0.5rem;
    padding-bottom:.25rem;
}