/*Colours to use within css, easier to reference this way*/

/*! Generated by Font Squirrel (https://www.fontsquirrel.com) */
 @font-face {
    font-family: 'Bevan';
    src: url('fonts/Bevan/bevan-regular-webfont.woff2') format('woff2'),
         url('fonts/Bevan/bevan-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/*! Generated by Font Squirrel (https://www.fontsquirrel.com) */
@font-face {
    font-family: 'NotoSans';
    src: url('fonts/Noto_Sans/notosans-variablefont_wdthwght-webfont.woff2') format('woff2'),
         url('fonts/Noto_Sans/notosans-variablefont_wdthwght-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


 :root{
    --cream: #FFFAEE;
    --accentBlue: #396CAB;
    --darkBlue: #04102B;
    --accentYellow: #FFD27B;
    --mainOrange: #DF8244;

    --header-font: "Bevan", sans-serif;
    --text-font:"NotoSans", sans-serif;
}

body{

    margin: 0px;
    padding-bottom: 0em;
    min-height:100%;
    background-color: var(--cream);
    
    cursor: url('src/ratCursorBrowse.png'),auto;

}

a{

     cursor: url('src/ratCursorClick.png'),auto;

}

button{

     cursor: url('src/ratCursorClick.png'),auto;

}

/*Header for all Pages*/
header{

    display:flex;
    align-items: center;
    justify-content: space-between;

    .headerButtons{

        display:flex;
        justify-content: space-evenly;

    }

    button{

        color:var(--accentBlue);
        border:none;
        background-color: transparent;
        font-size: 24px;
        padding-left: 3em;
        font-family: var(--header-font);

    }

    img{

        width: 6vw;
        margin: 1em;

    }

}

/*theme toggle button*/

.themeToggle{

    background-color: transparent;
    border:none;
    position:fixed;
    right:0;
    bottom:0;
    margin:2em;
    img{
        width: 7em;
        background-color: none;
    }

}

/*Generic text colour, size, and font for most of the text. Will be adjusted as need be within the document*/

h1{

    font-size: 8em;
    color:var(--mainOrange);
    font-family: var(--header-font);

}

h2{

    font-size: 3em;
    color:var(--accentBlue);
    font-family: var(--text-font);

}

p{            
    color: var(--accentBlue);
    font-size: 14px;
    font-family: var(--text-font);
}

/*-----------------------SECTION FOR INDEX-----------------------*/

.ratTitleWhole{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin-top:5em;

    .ratTitle{
        #indexH1{

            margin-bottom: 0em;
            margin-left: 1em;

        }

        #indexH2{

            margin-top:0em;
            margin-left:5em;

        }

    }

    img{

    width:25em;

    }
}


.projectH2{

    color: var(--mainOrange);
    font-family: var(--header-font);
    font-size: 50px;
    text-align: end;
    margin-right: 3em;
    margin-top:5em;
    margin-bottom:0em;
}

.indexProjects{

    display: flex;
    align-items: center;
    flex-direction: row;
    align-content: space-between;
    justify-content: space-around;
    width:100%;
    flex-wrap: wrap;

    img{

        width: 35em;
    }

    .indexProjectButtonsGroup{

        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-content: flex-start;
        flex-wrap: wrap;
        align-items:flex-start;
        width:35em;
        margin-right: 5em;

    }

    .indexProjectsButtons{

        /*https://cssgrid-generator.netlify.app/ used to assist in creating the grid*/
        /*Update: Edited the code heavily as it did not work for my usage, here is what the original was

        .parent {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.div1 { grid-area: 1 / 1 / 3 / 2; }
.div2 { grid-area: 1 / 2 / 2 / 3; }
.div3 { grid-area: 2 / 2 / 3 / 3; }*/

        display:grid;
        grid-column-gap: 1em;
        grid-row-gap: 0em;


        button{
            grid-area: 1 / 1 / 3 / 2;

            margin-top: 2em;
            width: 12em;
            height: 5em;
            border: none;
            border-radius: 1em;

            #projectWork{
                background-image: url('src/projectWorkImage.png');
            }

        }

        h3{
            grid-area: 1 / 2 / 2 / 3;

            color: var(--accentBlue);
            font-size: 20px;
            font-family: var(--header-font);

        }

        p{
            grid-area: 2 / 2 / 3 / 3;
        }

    }

}

.indexLO{

    width:100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 10em;


    h2{

        color: var(--mainOrange);
        font-size: 32px;
        text-align: right;
        font-family: var(--header-font);

    }

    .indexLOGroup{
       display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        margin: 2em;
    }
    .indexLOButtons{

        a{

           text-decoration: none; 

        }
        img{
            width: 9em;
            height:14em;
            object-fit: cover;
            border-radius: 1em;
            text-align: center;
        }

        h2{

            font-size: 32px;
            color: var(--accentBlue);
            font-family: var(--header-font);
            margin:0;
            text-align: center;

        }
    }

}

.kimchiFooter{

    margin-left: 8em;
    width: 35em;
    bottom: 0;
    overflow: none;

}

/*-----------------------SECTION FOR LEARNING OUTCOMES-----------------------*/

.LOMain{

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;

    .LOMainText{

        h1{
            font-size: 5em;
            margin-bottom: -45px;
            
        }

        h2{

            font-size: 2em;
            width:20em;
        }

        p{
            margin-top: 3em;
            font-size: 18px;
            width: 45em;
        }
    }

    img{
        width: 20em;
        height: 20em;
        border-radius: 1em;
        object-fit: cover;
        
    }
}

.LOProjectDescSection{

    margin: 3em;
    margin-top: 4em;

    h1{

        font-size: 3em;
        margin-bottom: -.5em;

    }

    p{
        font-size: 1.5em;
    }

}

.LOProjectLinks{

    margin: 3em;
    display: grid;
    grid-template-columns: 10% 90%;
    grid-column-gap:0em;

/* used https://cssgrid-generator.netlify.app/ as a reference on how to understand how to make the grid again

ORIGINAL CODE REFERENCED
.parent {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 1 / 2 / 2 / 3; }
.div3 { grid-area: 2 / 1 / 3 / 3; }*/

    p{

        font-size: 1em;

    }

    .LOTitleLink{
        
    
        grid-area: 1 / 1 / 2 / 2 ;

    }

    .LODescLink{

        grid-area: 1 / 2 / 2 / 3 ;

    }

    .LOLink{

        grid-area: 2 / 1 / 3 / 3 ;
        color: var(--accentBlue);
        font-size: 14px;
        font-family: var(--text-font);
        font-weight: bold;

    }

}

/*-----------------------SECTION FOR PROJECTS-----------------------*/

.ProjectImageLinks{
    margin:3em;
    margin-top: 8em;

    display: grid;
    grid-template-columns: repeat(4, 18em);
    grid-template-rows: repeat(5, 9em);


    h3{

        font-size: 2em;
        margin:1em;
        color:var(--mainOrange);
        font-family: var(--header-font);  
        grid-column: span 2 / span 2;

    }

    .ProjectsSummary{
        /*https://cssgradient.io/ Used for gradient creation*/
        padding: 2em;
        margin: 3em;
        line-height: 2em;

        border-radius: 1em;
        background: #FFD27B;
        background: linear-gradient(180deg, rgba(255, 210, 123, 0) 28%, rgba(255, 210, 123, 1) 91%);
        color: var(--darkBlue);

        grid-column: span 2 / span 2;
        grid-row: span 1 / span 4;
        grid-row-start: 2;

        overflow-y: scroll;
    }

    img{
        object-fit: cover;

        height: 100%;
        width: 100%;
        margin-bottom:1em;
        border-radius: 1em;

        grid-column: span 2 / span 2;
        grid-row: span 3 / span 3;
        grid-column-start: 3;

    }

    .ProjectsLinksFull{

            
        display: grid;
        grid-template-columns: 20em 20em;
        grid-template-rows: 8em 8em;
        border-radius: 1em;
       
        grid-column: span 2 / span 2;
        grid-row: span 2 / span 1;
        grid-row-start: 4;
        grid-column-start: 3;

        background: #FFD27B;
        background: linear-gradient(180deg, rgba(255, 210, 123, 0) 28%, rgba(255, 210, 123, 1) 91%);
        height: 15em;
        padding:1em;

        justify-items: center;
        justify-content: space-evenly;

        .ProjectsLinksSingle{

        width:6em;

        a{

           color: var(--mainOrange);
           font-family: var(--text-font);

        }

        a:hover{

            color: var(--darkBlue);
           font-family: var(--text-font);

        }

        p{

            background:none;

        }

    }

    }

}

.ProjectLinksOnly{

    margin:3em;

    display:grid;
    grid-template-columns: 0em 45em 25em 0em;
    grid-template-rows: 8em 30em;

    h3{
    font-size: 2em;
    margin:1em;
    margin-top: 3em;
        color:var(--mainOrange);
        font-family: var(--header-font);

        grid-column: span 3 / span 3;
        
    } 

    .ProjectsSummary{
        /*https://cssgradient.io/ Used for gradient creation*/
        padding: 2em;
        margin: 3em;
        line-height: 2em;

        height: 30em;

        border-radius: 1em;
        background: #FFD27B;
        background: linear-gradient(180deg, rgba(255, 210, 123, 0) 28%, rgba(255, 210, 123, 1) 91%);
        color: var(--darkBlue);

        overflow-y: scroll;
        grid-column-start: 2;
        grid-row-start: 2;

    }

.ProjectsLinksFull{
        display: grid;
        grid-template-columns: 15em 15em;
        grid-template-rows: 8em 8em;
        border-radius: 1em;

        background: #FFD27B;
        background: linear-gradient(180deg, rgba(255, 210, 123, 0) 28%, rgba(255, 210, 123, 1) 91%);
        height: 30em;
        padding:1em;

        align-content:center;
        justify-content: center;
        justify-items: center;

        grid-column-start: 3;
        grid-row-start: 2;
        grid-row: span 2 / span 2;

        .ProjectsLinksSingle{

            width:6em;

        a{

           color: var(--mainOrange);
           font-family: var(--text-font);

        }

        a:hover{

            color: var(--darkBlue);
           font-family: var(--text-font);

        }

        p{

            background:none;

        }

        }

    }

}

.ProjectImageOnly{

    margin:3em;
    margin-top: 5em;
    display:grid;
    grid-template-columns: 0em 40em 30em 0em;
    grid-template-rows: 8em 25em;

    h3{
        font-size: 2em;
        margin:1em;
        margin-top: 3em;

        color:var(--mainOrange);
        font-family: var(--header-font);

        grid-column: span 3 / span 3;
        
    } 

    .ProjectsSummary{
        /*https://cssgradient.io/ Used for gradient creation*/
        padding: 2em;
        margin: 3em;
        line-height: 2em;

        height: 100%;

        border-radius: 1em;
        background: #FFD27B;
        background: linear-gradient(180deg, rgba(255, 210, 123, 0) 28%, rgba(255, 210, 123, 1) 91%);
        color: var(--darkBlue);

        overflow-y: scroll;
        grid-column-start: 2;
        grid-row-start: 2;

    }

    img{
        border-radius: 1em;
        margin:1em;
        
        width:100%;
        height:25em;
        object-fit:cover;

        grid-column-start: 3;
        grid-row-start: 2;
        grid-row: span 1 / span 1;

    }
}

/*-----------------------SECTION FOR ABOUT ME-----------------------*/

.AboutMain{

    display: flex;
    flex-direction: row;
    margin:4em;

    img{

        width: 30em;
        height:25em;
        object-fit: cover;
        border-radius: 1em;

    }

    .AboutMainText{

        display: flex;
        flex-direction: column;
        margin-left: 2em;

        h1{

            margin-bottom: -.5em;

        }
    }

}

.AboutCharlotte{

    display: flex;
    flex-direction: row;

    justify-content: flex-end;
    align-items: center;

    img{

        text-align: right;

        height: 40em;
        width: 20em;
        object-fit: cover;

    }

    hgroup{

        h1{

            font-size: 4em;
            margin-bottom: -.75em;

        }

        h2{

            font-size: 3em;
            margin-bottom: 1em;

        }

        p{

            width: 50em;
            font-size: 18px;

        }

    }

}

.AboutRatsTitle{

    font-size: 3em;
    text-align: center;

}

.AboutRats{

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;

    .AboutRatsIndividual{

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        img{

            width:13em;
            height:20em;
            object-fit: cover;
            border-radius: 1em;

        }

        h3{

            font-family: var(--header-font);
            color: #DF8244;

        }

        p{

            margin-top:-1em;
            text-align: center;
            font-size: 18px;

        }

    }

}

/*-----------------------SECTION FOR READING-----------------------*/

.ReadingGuideHead{

    display:flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    align-items: center;

    img{

        width:35em;

    }

}

.readingGuide{

    font-size:5em;

}


.GuideSpecific{

    display:flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: space-evenly;



    embed{

        height:35em;
        width:25em;

        margin:4em;

    }

    .GuideSpecificUpdates{

        margin-top:2em;

        h2{

            color: var(--mainOrange);
            font-family: var(--header-font);
            font-size: 3em;

        }

        h3{

            color: var(--accentBlue);
            font-family: var(--text-font);
            font-size:1.5em;

        }

        ul{

            margin: 2em;

        }

    }

}