@charset "UTF-8";
/* CSS Document */
/* HeeJungLee Portfolio */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    margin: 0 auto;
}

h1,
h2,
h3 {
    font-family: "Rajdhani", sans-serif;
}

body {
    font-family: "Roboto", sans-serif;
}

:root {

/** Neon **/
--Lime-50: #FAFFE6;
--Lime-100: #F0FFC3;
--Lime-200: #E6FE8C;
--Lime-300: #DAFE4A;
--Primary-Lime-400: #CDFE00;
--Lime-500: #BEE900;
--Lime-600: #A4C200;
--Lime-700: #869700;
--Lime-800: #707A08;
--Lime-900: #61680C;
--Lime-950: #383C02;

/** Blue **/
--Blue-50: #E8F1FF;
--Blue-100: #D5E6FF;
--Blue-200: #B4D1FF;
--Blue-300: #86B1FF;
--Blue-400: #5786FF;
--Blue-500: #2F5DFF;
--Blue-600: #0434FF;
--Blue-700: #002AFC;
--Primary-Blue-800: #0027D3;
--Blue-900: #0E299D;
--Blue-950: #0A165B;

/** Red **/
--Red-50: #FFF5EC;
--Red-100: #FFE8D3;
--Red-200: #FFCDA6;
--Red-300: #FFAA6D;
--Red-400: #FF7B33;
--Red-500: #FF580A;
--Primary-Red-600: #FF4102;
--Red-700: #CC2A03;
--Red-800: #A2220B;
--Red-900: #821F0C;
--Red-950: #460B04;

/** Grey **/
--Grey-50: #F9FAFA;
--Grey-100: #F4F5F5;
--Primary-Grey-200: #DEE0DF;
--Grey-300: #D2D5D4;
--Grey-400: #A0A6A3;
--Grey-500: #6F7572;
--Grey-600: #505554;
--Grey-700: #3E4241;
--Grey-800: #252826;
--Primary-Black-900: #181B1A;
--Grey-950: #181B1A;

/** Cyan **/
--Cyan-50: #EFFEFC;
--Cyan-100: #C9FEF8;
--Cyan-200: #92FCF2;
--Cyan-300: #53F3EA;
--Cyan-400: #1EDED9;
--Cyan-500: #01C2C0;
--Primary-Cyan-600: #00A8AA;
--Cyan-700: #05797C;
--Cyan-800: #0A6063;
--Cyan-900: #0E5052;
--Cyan-950: #002E32;

/** Green **/

--Green-50: #F2F7F2;
--Green-100: #E0ECDF;
--Primary-Green-200: #B8D5B8;
--Green-300: #96BF99;
--Green-400: #699E6E;
--Green-500: #48814F;
--Green-600: #35663C;
--Green-700: #2A5231;
--Green-800: #234229;
--Green-900: #1E3623;
--Green-950: #101E13;


    /***********************************************************
    Spacing
    ***********************************************************/
    --spacing-null:0px;
    --spacing-xxs: 4px;
    --spacing-xs: 8px;
    --spacing-s: 16px;
    --spacing-m: 24px;
    --spacing-l: 32px;
    --spacing-xl:40px;
    --spacing-xxl:48px;
    --spacing-3xl:56px;
    --spacing-4xl:64px;

    
    /***********************************************************
    Radius
    ***********************************************************/
    --radius-null:0px;
    --radius-xs: 8px;
    --radius-s: 16px;
    --radius-m: 32px;
    --radius-l: 64px;
    --radius-xl:128px;



    /***********************************************************
    Typography
    ***********************************************************/

    /* Paragraph/Standard */
    font-style: normal;
    font-size: 1em;
    color: var(--primary-grey-900);
}

/** header/h1 **/
h1 {
font-size: 3em;
font-weight: 700;
line-height: normal; 
margin-bottom: var(--spacing-l);
}


/** header/h2 **/
h2{
font-size: 2em;
font-weight: 700;
line-height: normal; 
letter-spacing: 0.32px;
margin-bottom: var(--spacing-m);
}


/** header/h3 **/
h3{
font-size: 1.5em;
font-weight: 700;
line-height: normal; 
letter-spacing: 0.24px;
margin-bottom: var(--spacing-s);
margin-top: var(--spacing-xxl);
}

/** paragraph/bold **/
h4{
font-size: 1em;
font-weight: 700;
line-height: 22px; /* 137.5% */
margin: var(--spacing-xs) var(--spacing-null);
}


/** paragraph **/
p{
font-size: 1em;
font-weight: 400;
line-height: 22px;
margin-bottom: var(--spacing-s);
}


/** Caption **/
.caption{
font-size: 0.75em;
font-weight: 300;
line-height: normal;
margin-bottom: 8px;
}


/*---------------  header & intro ---------------*/
/*---------------  header & intro ---------------*/
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: var(--Primary-Lime-400);
}

#favicon {
    width: 30%;
}

.navone {
    width: 50%;
    padding: 10px;
    cursor: pointer;
}

.navtwo {
    width: 80%;
    display: flex;
    justify-content: flex-end;
}

.navtwo p {
    padding-left: 5%;
}

header nav {
    margin-left: 20%;
    margin-right: 20%;
    display: flex;
    justify-content: flex-end;
}

.active {
    color: var(--Blue-400);
    text-decoration: underline;
}

.navtwo a {
    padding-left: 5%;
    text-decoration: none;
    color: var(--Primary-Black-900);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 0.7rem;
}

.navtwo a:hover {
    color: var(--Primary-Red-600);
    font-weight: bold;
}


/*---------------  (title)  ---------------*/

h1 {
    color: var(--Primary-Blue-800);
}

.title {
    padding-top: 20vh;
    padding-bottom: 13vh;
    text-align: center;
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    align-items: center;
    background-size: 100% auto;
}

.title h1 {
    margin: 0;
}

.title a {
    display: flex;
    align-items: center;
}

.arrow {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

#arrowL {
    transform: rotate(90deg);
}

#arrowR {
    transform: rotate(-90deg);
}
/*--------------- (button)---------------*/
button {
    float: right;
    padding: 1% 2%;
    width: 20%;
    border-radius: 5px;
    border: none;
    margin-right: 3%;
    background-color: var(--Lime-200);
}

button:hover {
    background-color: var(--Primary-Lime-400);
    cursor: pointer;
}

button a {
    color: var(--Primary-Red-600);
    text-transform: uppercase;
    text-decoration: none;
}

button a:hover {
    font-weight: 600;
}

/*--------------- (section)---------------*/
.introOne {
    height: 70vh;
    text-align: center;
}

#one {
    width: 90%;
    margin: 0 auto;
}

.contents {
    padding: 2%;
    margin-bottom: 20%;
}

h2 {
    padding-top: 100px;
    color: var(--Primary-Red-600);
    text-transform: uppercase;
}

p {
    font-size: 14px;
    font-weight: 200;
    color: #383838;
}

p span {
    font-weight: 400;
}

.toolsImg img {
    width: 5%;
    margin-right: 2%;
}

#imageFull {
    width: 100%;
}

.FVlinks {
    display: flex;
    flex-direction: column;
    margin-bottom: 1%;
}

.FVlinks a {
    color: #525252;
    display: list-item;
    list-style-type: disc;
    list-style-position: inside;
    text-transform: uppercase;
    cursor: pointer;
    font-size: 0.8rem;
}

.FVlinks a:hover {
    color: #9c9c9c;
    font-weight: 600;
}

/*--------------- media query ---------------*/
/*///////////////////////////////////////////*/
/*tablet and desktop*/
/*///////////////////////////////////////////*/

@media only screen and (min-width: 769px) {

    #one {
        width: 60%;
        margin: 0 auto;
    }

    /**section : intro  *****************************/
    .introOne {
        height: 79vh;
    }

    .introOne h1 {
        font-size: 3vw;
    }


    /**section 1: who am I  *****************************/
    .introTwo {
        width: 60%;
        height: 20vh;
        text-align: center;
        background-color: rgba(252, 252, 252);
    }

    #myFace {
        width: 200px;
    }

    .contentOne p {
        font-size: 16px;
    }


    h2 {
        font-size: 1.7rem;
    }

}

/*///////////////////////////////////////////*/
/*mobile*/
/*///////////////////////////////////////////*/
@media only screen and (max-width: 768px) {
    header {
        display: none;
    }

    #arrow {
        display: none;
    }

    .introOne h1 .box {
        display: none;
    }

    .introTwo {
        display: none;
    }

}