html {
    height: 100vh;
    z-index: -100;
    background-color: rgb(69, 17, 255);
    font-family:'Courier New', Courier, monospace,"source-han-serif-jp-variable", sans-serif;
font-variation-settings: "wght" 250;
    color:rgb(255, 255, 255);
}

body {
    width:100vw;
    /* height:100vh; */
    position:absolute;
    margin:0;
}

.name_container {
    color:rgb(255, 255, 255);
    font-size:2rem;
    position:fixed;
    height:100vh;
}
.name {
    /* text-align: center; */
    letter-spacing:0.7rem;
    position:absolute;
    width: 100vw;
    font-family:'Courier New', Courier, monospace;
    /* text-shadow: 0px 0px 20px rgb(0, 0, 0); */
    text-decoration:none;
    color:white;
}

a {
    text-decoration: none;
}

#t {
    width:auto;
    margin-left: 20vw;
    margin-top: 100px;
    font-size: 10rem;
    transform: rotate(90 deg);
}
#t:hover {
    color:rgb(94, 94, 94);
}
#o {
    margin-top: 50vh;
    text-align: center;
    font-size: 3rem;
}
#m {
    margin-right:30vw;
    bottom:50vh;
    text-align: right;
    transform: translate(-100px,0px);
    font-size: 5rem;

}
.icon {
    transform: translate(0,0);
    text-decoration: none;
    letter-spacing: 0.2rem;
    color:rgb(0, 0, 0);
    font-size:2rem;
    position: absolute;
    display:block;
    /* cursor : pointer; */
    /* text-shadow: 0px 0px 20px rgb(0, 0, 0); */
}

#camera-img {
    /* z-index: 100 !important; */
    pointer-events: none;
}
.icon:hover {
    font-size:3rem;
    background-color: rgb(255, 255, 255);
}

#make-img {
    /* z-index: 100 !important; */
    pointer-events: none;
}

#pc-img {
    /* z-index: 100 !important; */
    pointer-events: none;
}



.link {
    z-index:100;
    width:100%;
    height:100%;
}

#pc {
    transform:translate(10vw,calc(100vh - 300px));
    width:140px;
    /* margin-top:49vh; */
    /* bottom:200px; */
    /* margin-left: 10vw; */
    position: absolute;
}
#pc:hover {
    color:rgb(0, 0, 0);
}

#flower {
    font-size: 3rem;
    bottom: 0;
    margin-left: 40vw;
}

#random {
    position: absolute;
    margin-left:10px;
}

#index-comment {
    position: absolute;
    margin-top:50vh;
    margin-left:60vw;
    /* background-color: rgb(255, 255, 255); */
    /* border-radius: 10px:; */
    color:rgb(255, 255, 255);
    padding-left: 2px;
    width: 30vw;
    padding-left:1rem;
}
#index-comment:hover {
    color:rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
    border-radius: 1rem;
}

#hover {
    visibility: hidden;
    position: relative;
    margin-left:10px;
}


.page_title {
    width:100%;
}

.black {
    color:black;
}


@media screen and (max-width: 768px) {
    #hover {
    visibility: visible;
    }
}





/*-------------------------- bio-------------------------- */
.bio-container {
    padding-left:100px;
    padding-top:100px;
}

.self-img {
    width:200px;
    height:200px;
}

.self-img img {
    width:200px;
    height:200px;
}


.title {
    letter-spacing: 1rem;
}

.contact a {
    color:white;
    border-bottom:0cap;
    text-decoration: none;
}


.home {
    font-size:2rem;
    text-decoration: none;
    text-align: center;
}

@media screen and (max-width: 768px) {
    .bio-container {
        padding-left:0;
        padding-top:0;
    }
}


/*-------------------------- photos-------------------------- */
.bg_white {
    background-color: white;
    display: flex;
}

.align_center {
    justify-content: center;
    justify-content: center;
    display: flex;
}

.photos {
    display: box;
    justify-content: center;
    padding-top: 100px;
    width:calc(30vw + 100px);
}

.photo {
    margin-top: 150px;
    margin-bottom: 150px;
    width:calc(30vw + 100px);
    height:calc(30vw + 100px);
    display: flex;
    align-items: center;
    justify-content: center;
    position:relative;
    box-shadow: 10px 10px 30px rgb(220, 220, 220);
}

.photo img {
    width:30vw;
    height:30vw;
    position:absolute;
}

/*-------------------------- works-------------------------- */
.bg_blue {
    background-color: rgb(162, 162, 162);
    display: flex;
}

.white {
    color:white !important;
}

.works {
    /* display: box;
    justify-content: center; */
    padding-top: 100px;
    margin-left: 20vw;
    /* width:calc(30vw + 100px) */
}

.work {
    margin-top: 150px;
    margin-bottom: 150px;
    display: flex;
    /* align-items: center; */
    /* justify-content: center; */
    position:relative;
    text-decoration: none;
}

.work-img {
    /* box-shadow: 10px 10px 30px rgb(91, 91, 91); */
}


.descr {
    letter-spacing: 0.4rem;
    margin-left: 10px;
    font-size: 0.8rem;
/* width:50vw; */
    padding-left: 10px;
    padding-right: 10px;
    text-decoration: none;
}

.work-title {
    font-size: 1rem;
    /* color:rgb(0, 2, 148); */
    color:white;
    /* background-color: rgba(255, 255, 255, 0.636); */
}
.work-title:hover {
    color:rgb(0, 2, 148);
    background-color: rgba(255, 255, 255, 0.636);

}


.work-date {
    color:white;
    letter-spacing: 0.2rem;
}

@media screen and (max-width: 768px) {
    .works {
        margin-left: 10px;
    }
    /* .work img {
        width:150px;
    } */
    .work {
        display: block;
        margin-top: 80px;
        margin-bottom: 80px;
    }
    .work-title {
        font-size:1rem;
    }
    .work-date {
        font-size:0.7rem;
    }
    
}

.work-name {
    margin:0 auto;
    margin-top:150px;
    margin-bottom:40px;
    width:60vw;
}
.work-text {
    margin:0 auto;
    margin-top:20px;
    margin-bottom:40px;
    width:60vw;
    font-size: 0.8rem;
    line-height: 1.2rem;
}

.ja {
    font-family: serif;
    letter-spacing: 0.15rem;
    margin-bottom:20px;
}

.movie {
    width:50vw;
    display: block;
    height:50vh;
    margin:0 auto;
    margin-top: 150px;
    margin-bottom: 50px;
}

.movie iframe {
    width:100%;
    height: 100%;
    display:block;
    margin:0 auto;
}

#cl_voice-movie {
    height:100vh;
}



.work-container {
    color:rgb(61, 61, 61);
}


.work-picture {
    width:50vw;
    height:auto;
    margin:0 auto;
    margin-top: 100px;
    margin-bottom: 100px;
    display: block;
    /* align-items: center;
    justify-content: center;
    position:relative; */
    /* box-shadow: 10px 10px 30px rgb(220, 220, 220); */
}
.work-picture-large {
    width:70vw;
    height:auto;
    margin:0 auto;
    margin-top: 100px;
    margin-bottom: 100px;
    display: block;
    /* align-items: center;
    justify-content: center;
    position:relative; */
    /* box-shadow: 10px 10px 30px rgb(220, 220, 220); */
}

.work-picture-caption {
    display: block;
    color:rgb(0, 0, 0);
    font-size: 0.5rem;
    text-align: right;
}

.work-picture img {
    width:50vw;
    display: block;
    margin: 0 auto;
    align-items: center;
    /* height:30vw; */
    /* position:absolute; */
}

.work-picture-large img {
    width:70vw;
    display: block;
    margin: 0 auto;
    align-items: center;
    /* height:30vw; */
    /* position:absolute; */
}


.qiita {
    color:rgb(0, 146, 37);
    font-srgb(13, 255, 0)1rem;
}

.instagram-media{
    display: block;
    margin:0 auto !important;
    width:100%;
    margin-top:50px;
}


@media screen and (max-width: 768px) {
    .work-picture {
        width:60vw;
    }
    .work-picture img {
        width:60vw;
    }
    .work-picture-large {
        width:90vw;
    }
    .work-picture-large img {
        width:90vw;
    }
    

    .work-name {
        margin:0 auto;
        margin-top:150px;
        margin-bottom:10px;
        width:80vw;
        font-size: 1rem;
    }
    .work-text {
        margin:0 auto;
        margin-top:40px;
        margin-bottom:40px;
        width:80vw;
        font-size: 0.6rem;
        line-height: 0.9rem;
        letter-spacing: 0.01rem;
    }
    .ja {
        line-height: 1.2rem;
    }

    .movie {
        width:100vw;
    }
    
}


/*-------------------------- random-------------------------- */

#saying {
    width:100%;
    text-align: center;
    margin-top:45vh;
}

.fixed_page {
    width:100vw;
    height:100vh;
}
.footer {
    width:100%;
    position:absolute;
    bottom:40vh;
}