@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&display=swap');
* {
  margin: 0;
  box-sizing: border-box;
}
:root {
    --lightm-background: #232730;
    --lightm-background-lighter: #3A3E47;
    --lightm-background-highlight: #434c61;
    --lightm-lightblue: #04ACB5;
    --white: #EDEDED; 
}

body{
    height: 100vh;
    font-family: "Montserrat", sans-serif;
    display: grid;
   
    background-color: var(--lightm-background);
}

body#homepage {
    grid-template-areas: 
    'header header'
    'main main'
    'footer footer';
    gap: 5%;
}


body > * {
    padding: 1%;
}
header{
    grid-area: header;
   
    display: grid;
    grid-template-areas: 'top-card top-card nav';

    background-color: var(--lightm-background);
   
}
#top-card {
    grid-area: top-card;
    color: var(--lightm-lightblue);
}

nav {
    grid-area: nav;
    display: flex;
    align-items: top;
    justify-content: space-around;
}

nav a{
    
    text-align: center;
    max-height: 2em;
    padding: 1%;
    margin: 2%;
    padding-bottom: 0;
    text-decoration: none;
    color: var(--white);
    border-radius: 10%;
}

nav a:hover {
    color: var(--lightm-lightblue);
}

nav a:active{
    color: var(--lightm-lightblue);
    background-color: var(--white);
    
}

article{
    grid-area: main;
    display: grid;
    grid-template-areas: 'main image';
    align-items: center;
    max-width: 100%;
}

#intro{
    grid-area: main;
    color: var(--white);
    padding: 8%;

}

#intro h1{
    font-family: "Roboto Serif", serif;
    font-size: 3em;
    color: var(--lightm-lightblue);
    margin-bottom: 3%;
}

section > p{
    padding: 10%;
    background-color: var(--lightm-background-highlight);
    border-radius: 2%;

}

#my-pic{
    grid-area: image;
    border-radius: 2%;
    border: 2px var(--white) solid;
    min-width: 40%;
    max-width: 60%;
    margin-left: 25%;
}



/* About page */
body#aboutpage{
    grid-template-areas: 
    'header header'
    'main main'
    'footer footer';
}
section#aboutme {
    margin: 5% 10% 5% 10%;
    padding: 4% 5% 4% 5%;
    background-color: var(--lightm-background-lighter);
    grid-area: main;
    display: grid;
    grid-template-areas: 
    'about about'
    'about about'
    'about about'
    'hobby hobby'
    'hobby hobby'
    'goals goals' 
    'goals goals' ;
}

.aboutDetail{
    padding: 1%;
    grid-area: about;
    display: grid;
    grid-template-areas: 
    'aboutTitle'
    'aboutDetail'
    'aboutDetail';    
    margin-bottom: 4%;
    border-radius: 10px;
}

.aboutDetail h1{
    grid-area: aboutTitle;
    font-size: 2rem;
    color: var(--lightm-lightblue);
}

.aboutDetail p{
    grid-area: aboutDetail;
}

.hobby {
    padding: 1%;
    grid-area: hobby;
    display: grid;
    grid-template-areas: 
    'hobbyTitle'
    'hobbyDetail';
    margin-bottom: 4%;
    border-radius: 10px;    
}

.hobby h3 {
    grid-area: hobbyTitle;
    
}

.hobby dl {
    grid-area: hobbyDetail;
    list-style-type: none;
}
.hobby dt + dd{
    padding-left: 20px;
}
.goals {
    padding: 1%;
    grid-area: goals;
    display: grid;
    grid-template-areas: 
    'goalsTitle'
    'goalsDetail';
    border-radius: 10px;

}
.goals h3{
    grid-area: goalsTitle;
}

.goals p{
    grid-area: goalsDetail;
}

footer{
    display: flex;
    align-self: end;

    height: 10vh;
    max-height: 12vh;
    grid-area: footer;
    justify-content: center;
    align-items: center;
    
    text-align: center;
    font-size: smaller;

    background-color: var(--lightm-background-lighter);
    color: var(--white);
}

.reactive{
    transition: 300ms;
}

.reactive-img:hover {
    scale: 105%;

}

#my-pic.reactive-img:hover {
    border: 2px var(--lightm-lightblue) solid;
}

.reactive-textbox:hover {
    background-color: var(--white);
    color: var(--lightm-background);
    font-weight: bold;
}
.reactive-textbox:hover h1, .reactive-textbox:hover h3{
    text-decoration: underline;
}

.reactive-list:hover {
    background-color: var(--white);
    color: var(--lightm-background);
}
.reactive-list:hover dt, .reactive-list:hover h3{

    font-weight: bold;
    text-decoration: underline;
}


@media screen and (max-width: 768px){
    header{
        grid-template-areas: 'top-card top-card top-card'
        'nav nav nav';
        gap: 10%;        
    }

    nav a{
        border-bottom: var(--white) solid 2px; 
        border-radius: 2%;
    }

    #top-card{
        justify-self: center;
        align-self: center;
    }

    article{
      
        grid-template-areas: 'image image'
        'main main';
        
    }
    #intro h1{
        font-size: 2em;
    }
    #my-pic{
        margin-left: 20%;
    }

    .reactive-textbox:active {
        background-color: var(--white);
        color: var(--lightm-background);
        font-weight: bold;
    }

    .reactive-img:active {
        scale: 110%;
    }
}