/*個別項目定義*/
#TITLE_OF_PROFILE{
    font-size:30px;
    text-align:center;
}

/*Profiles*/
section[id="PROFILE"] h2{
    margin:0px 0px;
}

section[id="PROFILE"] div[class="Contents"]{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    position:relative;
}

section[id="PROFILE"] div[class="Contents"] div[class="SubSubContents"]{
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    align-content:center;
    flex-wrap:wrap;
}

section[id="PROFILE"] div[class="Contents"] div[class="Texts"]{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);    
}

img[id="MY_ICON"]{
    width:8em;
    height:8em;
    object-fit:cover;
    border-radius:100%;
    border:dashed 0.3rem #000;
    margin:1em;
    position:relative;
    /* bottom:50%;
    transform:translate(0%,-50%); */
    transition:all 1s;
}

img[id="MY_ICON"]:hover{
    border:solid 5px #000;
    transform:scale(1.05);
    cursor:pointer;
}

 /*Productions*/
#PRODUCTIONS a{
    color:#fff;
}

#PRODUCTIONS div{
    border-radius:1rem;    
}

#PRODUCTIONS ul,li{
    transform:translate(5px,0px);
}

#PRODUCTIONS div:hover{
    background-color:#550;
    border-radius:1rem;
}

/* Skill */
section[id="SKILL"]{
    padding-bottom:1rem;
    width:100%;
}

section[id="SKILL"] div[class="Contents"]{
    display:flex;
    flex-direction:row;
    justify-content:space-around;
    align-content:center;
}

section[id="SKILL"] div[class="SubContents"]{
    flex:0.3 0.3;
    max-width:auto;
    font-family:sans-serif;
    padding:0rem 2rem 1rem 2rem;
    border:solid 1px #000;
    border-radius:1rem;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    /* margin:0rem 1rem 0rem 1rem; */
}

section[id="SKILL"] div[class="SubSubContents"]{
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:flex-start;
    align-content:center;
}

section[id="SKILL"] div[class="SubContents"] > p{
    /* text-align:center; */
    font-weight:bold;
}

section[id="SKILL"] div[class="Contents"] table,ul{
    /* display:inline-block; */
    padding:0rem 0.3em 0rem 0.3em;
    margin:0rem 0.3em 0rem 0.3em;
    font-size:1.11rem;
    font-family:sans-serif;
}

section[id="SKILL"] div[class="Contents"] table{
    display:table;
}

section[id="SKILL"] div[class="Contents"] td,li{
    width:auto;
    min-width:20px;
    background-size:1em;
    background-position:0em 0.3em;
    padding-right:0.5rem;
    background-repeat:no-repeat;
}

section[id="SKILL"] div[class="Contents"] td{
    white-space:nowrap;
}

section[id="SKILL"] div[class="Contents"] tr td:nth-of-type(1){
    width:1.5em;
}

section[id="SKILL"] div[class="Contents"] tr td:nth-of-type(2){
    width:3em;
    text-align:center;
    flex:0 1;
}

section[id="SKILL"] div[class="Contents"] tr td:nth-of-type(3){
    width:6em;
}

#Language2{
    display:none;
}

td[id="C++"]{
    width:10%;
    background-image:url(https://skillicons.dev/icons?i=cpp);
}

td[id="C"]{
    background-image:url(https://skillicons.dev/icons?i=c);
}

td[id="C#"]{
    background-image:url(https://skillicons.dev/icons?i=cs);
}

td[id="PYTHON"]{
    background-image:url(https://skillicons.dev/icons?i=py&theme=light);
}

td[id="JAVA"]{
    background-image:url(https://skillicons.dev/icons?i=java&theme=light);
}

td[id="MULTIIMAGES"]{
    width:10%;
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
}

td[id="MULTIIMAGES"] img{
    display:inline-block;
    width:70%;
    margin:0px 2px;
    position:relative;
    right:0.9rem;
    top:0.3rem;
    /* background-image:url(https://skillicons.dev/icons?i=html); */
}

td[id="RUBY"]{
    background-image:url(https://skillicons.dev/icons?i=ruby);
}

td[id="GO"]{
    background-image:url(https://skillicons.dev/icons?i=go);
}

#LFT2{
    display:none;
}

td[id="OPENCV"]{
    width:10%;
    background-image:url(https://skillicons.dev/icons?i=opencv&theme=light);
}

td[id="UNITY"]{
    width:10%;
    background-image:url(https://skillicons.dev/icons?i=unity&theme=light);
}

td[id="GOOGLE_COLAB"]{
    width:10%;
    background-image:url(./assets/logos/tool_google_colab.svg);
}

td[id="GIT"]{
    width:10%;
    background-image:url(https://skillicons.dev/icons?i=git);
}

td[id="REACT"]{
    transform:translate(0em,0.3em);
    background-image:url(https://skillicons.dev/icons?i=react);
}

td[id="NODEJS"]{
    transform:translate(0em,0.3em);
    background-image:url(https://skillicons.dev/icons?i=nodejs);
}

td[id="EXPRESS"]{
    transform:translate(0em,0.3em);
    background-image:url(https://skillicons.dev/icons?i=express);
}

td[id="MONGO_DB"]{
    transform:translate(0em,0.3em);
    background-image:url(https://skillicons.dev/icons?i=mongodb);
}

td[id="RAILS"]{
    transform:translate(0em,0.3em);
    background-image:url(https://skillicons.dev/icons?i=rails);
}

/* Achievements */
section[id="ACHIEVEMENTS"]{
    padding:0rem 0rem 1rem 0rem;
    margin:2rem 0rem;
}

section[id="ACHIEVEMENTS"] nav{
    display:inline;
}

#ACHIEVEMENTS ul,li{
    transform:translate(5px,0px);
}


/* RelatedLinks */

div[class="RelatedLinks"]{
    font-size:20px;
    color:#000;
    background-color:#aaa;
    border:5px #000 dashed;
    box-sizing:border-box;
    padding:0px 5px 5px 10px;
    border-radius:1rem;
    margin-left:0px;
    position:relative;
}

.RelatedLinks h2{
    text-align:center;
    margin:0px 0px;
}

/* .RelatedLinks ul{
    padding-left:20px;
    margin-top:2px;
    margin-bottom:2px;
    width:150px;
    display:inline-block;
} */

/* .RelatedLinks nav > div[class="SubContents"]:hover{
    background-color:#aa0;
} */

.RelatedLinks div[class="Contents"]{
    display:flex;
    flex-direction:row;
    justify-content:space-around;
    flex-wrap:wrap;
    align-items:center;
    align-content:space-around;
}

.RelatedLinks nav button{
    background-color:rgba(255,255,255,0.7);
    color:inherit;
    text-align:center;
    font-size:2rem;
    width:20rem;
    border:1px #333 solid;
    border-radius:1em;
    margin:0.1em 0.5em;
    transition:0.25s;
}

button[id="LINK_ATCODER"]{
    background:url(./assets/logos/atcoder_logo_transparent.png) no-repeat 0.25em 0px/1.1em;
}

button[id="LINK_QIITA"]{
    background:url(./assets/logos/qiita_icon.png) no-repeat 0.30em 0.10em/1.0em;
}

button[id="LINK_ZENN"]{
    background:url(./assets/logos/zenn_logo.svg) no-repeat 0.30em 0.10em/1.0em;
}

.RelatedLinks nav button:hover{
    text-decoration:underline;
    text-decoration-style:solid;
    transform:scale(1.1) translate(0em,-0.3em);
    box-shadow:0px 0em 1em 0.1em rgba(255,255,255,0.5);
    background-color:rgba(255,255,255,1.0);
}

nav button:hover{
    cursor:pointer;
}

/*共通項目定義*/
a{
    text-decoration:none;
    color:#0ff !important;
}

*{
    transition:background-color 0.5s ease-in-out;
}

html a:hover{
    font-weight:bold;
    text-decoration:underline;
}

li[class="Explanation"]{
    font-weight:350;
    font-family:"Helvetica Neue",sans-serif;
}

h3 + p{
    font-size:20px;
}

section:nth-of-type(2n-1){
    color:#000;
    background-color:rgba(0,0,0,0.1);
    padding-left:5px;
    border-radius:1rem;
}

section:nth-of-type(2n){
    color:#fff;
    background-color:#333;
    padding-left:5px;
    border-radius:1rem;
}

/* メディアクエリ */
/* Changed breakpoint from 1200px to 1350px to look better. */
@media (max-width:1350px){
    section[id="SKILL"] div[class="Contents"]{
        flex-direction:column;
        justify-content:space-around;
        align-items:center;
    }
    
    section[id="SKILL"] div[class="SubContents"]{
        width:50%;
        margin:1em 0em;
    }
}

@media (max-width:992px){
    #Language1{
        display:none;
        /* display:flex;
        flex-direction:column;
        justify-content:space-between;
        align-items:flex-start;
        align-content:center; */
    }

    #Language2{
        display:flex;
    }

    #LFT1{
        display:none;
    }

    #LFT2{
        display:flex;
    }
}

@media (max-width:768px){
    section[id="PROFILE"] div[class="SubContents"]{
        display:flex;
        flex-direction:column;
        justify-content:flex-start;
        align-items:center;
        align-content:space-between;
    }

    section[id="PROFILE"] div[class="Contents"] div[class="SubSubContents"]{
        flex-direction:column;
        justify-content:center;
        align-content:center;
        position:static;
    }
    
    section[id="PROFILE"] div[class="Contents"] div[class="Texts"]{
        align-self:center;
        position:static;
        transform:translate(0%,0%);    
    }
    
    img[id="MY_ICON"]{
        align-self:center;
    }
}

@media (max-width:512px){
    td[id="MULTIIMAGES"]{
        width:10%;
        display:flex;
        flex-direction:column;
        flex-wrap:nowrap;
    }

    td[id="MULTIIMAGES"] img{
        display:inline-block;
        width:70%;
        margin:0px 2px;
        position:relative;
        right:0.2rem;
        top:0.3rem;
    }

    #HTML_AND_CSS{
        font-size:0.95rem;
    }

    #JAVASCRIPT_AND_TYPESCRIPT{
        font-size:0.87rem;
    }
}
/* アイコン：https://icon-icons.com/ja/ */