/* Created by Beomsu Kim on Oct.1st 2023 */
* {
    padding: 0;
    margin: 0;
    line-height: 1.2rem;
}

html {
    background-color: rgb(30,50,50);
    color: white;
    font-family: Arial, Helvetica, sans-serif;
}

header {
    display: flex;
    justify-content: ;
    align-items: center;
    height: 2.5rem;
    background-color: darkslategray;
    opacity: .8;
    padding: .5rem;
}

main {
    padding: 2rem;
}

main a:link {
    color: rgb(22, 145, 104);
}
  
/* visited link */
main a:visited {
    rgb(106, 233, 191);
}
  

.copy-row-box { 
    display: flex;
    flex-direction: row;
    justify-content: center;
}

span {
    opacity: .4;
}

span.material-icons {
    margin-left: 0.3rem;
}

span.material-icons:hover, span.material-symbols-outlined:hover {
    cursor: pointer;
    color:gray;
    background-color: #ccc;
    border-radius: 2rem;
    padding:.2rem;
    /* font-size: small; */
}

#snackbar {
    padding:.5rem;
    display: none;
    position: fixed;
    bottom: .3rem;
    right: 50%;
    color: lightblue; 
    font-weight: bold;
    background-color: rgba(14, 133, 121,1);
    border-radius: .2rem;
}

address {
    height: 2.5rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

/* address */
address * {
    color:rgb(69, 180, 143);
    text-decoration: none;
}

h1 a {
    font-size: 2rem;
}

/* h1 */
h1 * {
    text-decoration: none;
    color:white;
}

/* h2 */
h2 {
    text-align: center;
    color: lightcoral;
}

h2 a {
    color: rgb(11, 164, 149);
}

h2#title, #job {
    color: rgb(97, 154, 219);
}

h2.subtitle {
    text-align: start;
}

hr.divider {
    border-color:rgb(223, 105, 105);
    border-width: .12rem;
    margin: .4rem 0;
}

/* checkbox */
.hidden {
    visibility: hidden;
}

details.skills {
    margin-bottom: .5rem;
}

input[type=checkbox]+label {
    color: #ccc;
    background-color: rgb(21, 26, 62);

    border-radius: .2rem;
    font-weight: bold;
}

input[type=checkbox]:checked+label {
    color: #ccc;
    background-color: rgb(0, 74, 9);
}

#education {
    width: 100%;
}

#education tr {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

/* wide screen */
@media screen and (min-width: 1400px) {
    body {
        display: flex;
        justify-content: space-between;
    }
    header {
        width: 20%;
        height: 100vh;
        position: fixed;
    }
    main {
        padding-left: 23%;
        width: auto;
        right: 0;
    }
}

/* media print */
@media print {
    html {
        background-color: white;
        color: black;
    }
    header {
        background-color: white;
    }

    main {
        padding: 0 .5rem;
    }
    
    /* address */
    address * {
        color:rgb(35, 127, 97);
    }

    input[type=checkbox]:not(:checked)+label {
        display: none;
        width:0;
        height:0;
        color: black;
    }

    input[type=checkbox]:not(:checked)+label + input  {
        width:0;
        height:0;
    }

    h1 a {
        color:black;
    }

    h2 {
        color: rgb(237, 97, 97);
    }

    hr.divider {
        border-style: solid;
        border-color:rgb(255, 168, 168);
    }



    .material-icons {
       visibility: hidden;
    }

    .material-symbols-outlined {
        visibility: hidden;
    }
    summary {
        display: none;
    }
 }