* {
    margin: 0;
    font-family: Inter, sans-serif;
}

body {
    background-color: #200c30;
}

.flex-container {
    display: flex;
    box-sizing: border-box;
    color: #FFFFFF;
}



.header-flex-container {
    height: 10vh;
    background-color: #45175c;
    justify-content: space-evenly;
    align-items: center;
}

.header-flex-item {
    font-size: 5vh;
    transition-property: font-size;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

header a {
    color: #FFFFFF;
    text-decoration: none;
}
.header-flex-item:hover {
    font-size: 7vh;
}

.grid-container {
    border-radius: 25px;
    display: grid;
    color: #FFFFFF;
    font-family: Inter;
}

.main-grid-container {
    grid-template-columns: 45% 25%;
    grid-template-rows: 50vh;
    column-gap: 10vw;
    margin-top: 25vh;
    justify-content: center;
}

.grid-item {
    background-color: #671c8c;
    text-align: center;
    border-radius: 25px;
}

.main-grid-item {
    font-size: 30px;
}
.profile-picture {
    width: 90%;
    height: 100%;
    object-fit: contain;
    object-position: bottom;
}
.profile-picture-grid-item {
    align-content: end;
    padding-bottom: 0%;
}
.programming-languages {
    background-color: #671c8c;
    grid-template-columns: repeat(2, 35vw);
    grid-template-rows: repeat(7, auto);
    margin-top: 5vh;
    margin-left: 5vw;
    margin-right: 5vw;
    justify-items: left;
    justify-content: space-between;
    align-content: space-between;
    padding: 5vh 5vw;
    line-height: 5vh;
    grid-template-areas:
    "languages-title languages-title"
    "html-logo python-logo"
    "html-name python-name"
    "html-explanation python-explanation"
    "css-logo java-logo"
    "css-name java-name"
    "css-explanation java-explanation";
}



.languages-title {
    grid-area: languages-title;
    font-size: 5vh;
    line-height: 7vh;
    text-align: center;
}
.language-logos {
    height: 15vh;
    margin-top: 20px;
}
.python-logo {
    grid-area: python-logo;
    
}
.html-logo {
    grid-area: html-logo;
}
.css-logo {
    grid-area: css-logo;
}
.java-logo {
    grid-area: java-logo;
}


.language-names {
    font-size: 4vh;
    text-align: left;
}
.python-name {
    grid-area: python-name;
}
.html-name {
    grid-area: html-name;
}
.css-name {
    grid-area: css-name;
}
.java-name {
    grid-area: java-name;
}

.language-explanations {
    font-size: 3vh;
    text-align: left;
    
}

.python-explanation {
    grid-area: python-explanation;
}
.html-explanation {
    grid-area: html-explanation;
}
.css-explanation {
    grid-area: css-explanation;
}
.java-explanation {
    grid-area: java-explanation;
}

.applications {
    background-color: #671c8c;
    grid-template-columns: repeat(2, 35vw);
    grid-template-rows: repeat(7, auto);
    margin-top: 5vh;
    margin-left: 5vw;
    margin-right: 5vw;
    justify-items: center;
    justify-content: space-between;
    align-content: space-between;
    padding: 5vh 5vw;
    line-height: 5vh;
    grid-template-areas:
    "applications-title applications-title"
    "figma-logo vscode-logo"
    "figma-name vscode-name"
    "figma-explanation vscode-explanation";
}

.applications-title {
    grid-area: applications-title;
    font-size: 5vh;
    line-height: 7vh;
    text-align: center;
}
.application-logos {
    height: 15vh;
    margin-top: 20px;
}
.application-names {
    font-size: 4vh;
}
.application-explanations {
    font-size: 3vh;
}

.figma-name {
    grid-area: figma-name;
}
.vscode-name {
    grid-area: vscode-name;
}

.figma-logo {
    grid-area: figma-logo;
}
.vscode-logo {
    grid-area: vscode-logo;
}

.figma-explanation {
    grid-area: figma-explanation;
}
.vscode-explanation {
    grid-area: vscode-explanation;
}

.projects {
    background-color: #671c8c;
    margin: 5vh 5vw;
    padding-top: 5vh;
    padding-bottom: 5vh;
    justify-items: center;
    font-size: 4vh;
    text-align: center;
    grid-template-columns: 40vw 5vw 40vw;
    grid-template-rows: 15vh 25vh 5vh;
    justify-content: space-around;
    align-content: space-around;
    grid-template-areas: 
    "projects-title projects-title projects-title"
    "portfolio-preview charity-website-preview ."
    "portfolio-name charity-website-name .";
}
.projects-title {
    font-size: 5vh;
    grid-area: projects-title;
    text-align: center;
}
.project-previews {
    max-width: 100%;
    max-height: 100%;
    
}
.project-names {
    font-size: 4vh;
}
.portfolio-preview {
    grid-area: portfolio-preview;
}
.portfolio-name {
    grid-area: portfolio-name;
}
.charity-website-preview {
    grid-area: charity-website-preview;
}
.charity-website-name {
    grid-area: charity-website-name;
}
a {
    color: #FFFFFF;
    text-decoration: none;
}
li {
    color: #FFFFFF;
    list-style-type: none;
}
.projects a:link {
    font-style: italic;
}
.projects a:hover {
    font-style: normal;
}

.info {
    background-color: #671c8c;
    margin: 35vh 5vw;
    font-size: 4vh;
    text-align: center;
}
.info-title {
    font-size: 5vh;
}

@media (max-width: 600px), (orientation: portrait) {
    .header-flex-item {
        font-size: 5vw;
    }
    .main-grid-container {
        grid-template-columns: 75vw;
        grid-template-rows: 30vh 30vh;
        row-gap: 5vh;
        margin-top: 5vh;
        justify-content: center;
    }
    
    .programming-languages {
        margin-top: 5vh;
        grid-template-columns: repeat(1, 80vw);
        grid-template-rows: repeat(13, auto);
        grid-template-areas:
        "languages-title"
        "html-logo"
        "html-name"
        "html-explanation"
        "css-logo"
        "css-name"
        "css-explanation"
        "python-logo"
        "python-name"
        "python-explanation"
        "java-logo"
        "java-name"
        "java-explanation";
    }
    .languages-title {
        font-size: 5vw;
    }
    .language-logos {
        height: 5vh;
        
    }
    .language-names {
        font-size: 4vw;
    }
    .applications {
        margin-top: 5vh;
        grid-template-columns: repeat(1, 80vw);
        grid-template-rows: repeat(7, auto);
        grid-template-areas:
        "applications-title"
        "figma-logo"
        "figma-name"
        "figma-explanation"
        "vscode-logo"
        "vscode-name"
        "vscode-explanation";
    }
    .application-logos {
        height: 5vh;
    }
    .projects {
        margin-top: 5vh;
        font-size: 4vw;
        grid-template-columns: repeat(1, 100%);
        grid-template-rows: 15vh 25vh 5vh 25vh 5vh;
        grid-template-areas: 
        "projects-title"
        "portfolio-preview"
        "portfolio-name"
        "charity-website-preview"
        "charity-website-name";
    }
    .projects-title {
        font-size: 5vw;
    }
    .info {
        margin-top: 35vh;
    }
}