.reddit-mono-RedditMono {
  font-family: "Reddit Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.nav {
    display: flex;

    img{
        width: 4vh
    }

    p{
        margin:1vh 0;
        font-size: 3vh;
    }
}

button {
    &:hover{
        background-color: #333 !important;
    }

    &:active{
        background-color: #444 !important;
    }
}

body {
    color: white;
    font-family: sans-serif;

    && :focus{
        outline: 3px solid #444;
    }
    #header-bg{
        background-color: #050505;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;

        #header{
            display: flex;
            top: 0px;
            left: 0px;
            z-index: 9999;
            max-width: 88vw;
            height:9dvh;
            align-items: end;
            margin: auto;

            #icon_img {
                width: 9dvh;
            }

            p {
                margin: auto;
                margin-left: 1vw;
                font-size: 3.5vmin;
                text-align: center;
            }

            button {
                color: whitesmoke;
                background-color: #050505;
                height:9dvh;
                font-size: 2.5vmin;
                border: none;
                margin: 0vw 0.2vw;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                padding: 0 0.5vw;
                
                img{
                    margin: 0 0;
                    width: 6dvh;
                }

                &:hover{
                    background-color: #333;
                }

                &:active {
                    background-color: #444;
                }
            }
        }
    }

    #workspace {
        margin: 0 auto;
        margin-top: 9dvh;
        width: 88vw;
        display: flex;

		.TaskArea{
			background-color: #1b1b1b;
			color: whitesmoke;
			border-radius: 2dvh;
		}

        #leftspace {
            width: 42.5vw;

            #memory_div {
                height: 25dvh;
                display: flex;
                flex-direction: column;

                #memory{
                    white-space: pre-wrap;
                    flex-grow: 1;
                    overflow: scroll;
                    font-size: 2.5dvh;
                    overflow-x: hidden;  /* 横スクロールバーを非表示 */
                    overflow-y: scroll;
                    padding: 1dvh;
                    font-family: Reddit Mono;
                    margin:0;
                    .highlight {
                        background-color: rgb(120, 189, 120); /* 蛍光ペンの色 */
                        padding: 0; /* ハイライトの範囲を少し広げる */
                        border-radius: 0; /* 角を少し丸める */
                    }

                    span{
                        margin-right: 1vw;
                        display: inline-block;

                    }
                }
            }

            #code_div {
                height: 55dvh;
                display: flex;
                flex-direction: column;

                #code_nav {
                    display: flex;
                    label{
                        margin-top: 1dvh;
                        margin-bottom: 1dvh;
                        height: 5dvh;
                        font-size: 3vmin;
                    }

					#code_buttons{
						margin-left: auto;
						display: flex;
						button {
							border-radius: 50%;
							border: none;
							background-color: #0000;
							height: 5dvh;
							font-size: 3vmin;
							width:5vh;
							height: 5vh;
							margin: 1dvh 0.5dvh;
							display: flex;
							align-items: center;
							padding:0.5vh;

							&:hover {
								background-color: #333;
							}

							&:active {
								background-color: #444;
							}

							img {
								height:4dvh;
								margin:auto;
							}
						}
					}
                }

                #code{
                    border: none;
                    resize: none;
                    font-size: 3dvh;
                    flex-grow: 1;
                    font-family: Reddit Mono;
                    tab-size: 4;
                    word-break: break-all;
                    white-space: pre-wrap;
                    padding: 1dvh;
                    overflow-y: scroll;
                }

                #preview {
                    margin-bottom: 1vmin;
                    word-break: break-all;
                    height: 55dvh;
                    display: none;
                    font-size: 3dvh;
                    font-family: Reddit Mono;
                    white-space: pre-wrap;
                    flex-grow: 1;
                    overflow: scroll;
                    overflow-x: hidden;  /* 横スクロールバーを非表示 */
                    overflow-y: scroll;
                    padding: 1dvh;
                    margin:0;

                    .highlight {
                        background-color: rgb(120, 189, 120); /* 蛍光ペンの色 */
                        padding: 0; /* ハイライトの範囲を少し広げる */
                        border-radius: 0; /* 角を少し丸める */
                    }
                }
            }
        }

        #space {
            width: 3vw;
        }

        #rightspace{
            width: 42.5vw;

            #console_div {
                height:65dvh;
                display: flex;
                flex-direction: column;

                #console {
                    height:40dvh;
                    line-height: 1.5;
                    white-space: pre-wrap;
                    flex-grow: 1;
                    overflow: scroll;
                    font-size: 2.5dvh;
                    overflow-x: hidden;  /* 横スクロールバーを非表示 */
                    overflow-y: scroll;
                    padding: 1dvh;
                    
                    margin:0;

                    .result_pre {
                        overflow: hidden;
                        margin: 0.5vmin;
                        min-height: 3.5dvh;
                        font-family: Reddit Mono;
                    }
                    .console-raw-div {
                        display: flex;
                        border-bottom: 1px solid #555;
                        margin: auto;
                        align-items: center;

                        .left{
                            text-align: center;
                            font-size: 3.5dvh;
                            margin: auto 0;
                            color: #58739e;
                        }
                    }

                }
            }

            #input_div {
                height: 15dvh;
                display: flex;
                flex-direction: column;

                #input {
                    border: none;
                    resize: none;
                    font-size: 3dvh;
                    flex-grow: 1;
                    font-family: Reddit Mono;
                    tab-size: 4;
                    word-break: break-all;
                    white-space: pre-wrap;
                    padding: 1dvh;
                }
            }
        }
    }

    #footer-bg {
        background-color: #0e0e0e;
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;

        #footer {
            display: flex;
            bottom: 0px;
            left: 0px;
            z-index: 9999;
            max-width: 88vw;
            height:9dvh;
            align-items: end;
            margin: auto;

            button{
                height: 7dvh;
                width: 7dvh;
                margin: 1dvh;
                background-color: #050506;
                border: none;
				border-radius: 2dvh;
                color: whitesmoke;
                cursor: pointer;
                text-align: center;
                justify-content: center;
                align-items: center;
                display: flex;
                aspect-ratio: 1 / 1;

                img {
                    height: 4dvh;
                }
            }

            #speed {
                margin: auto 0 auto auto;
                display: flex;
                justify-content: center;
                align-items: center;

                img {
                    height: 3.5dvh;
                }

                label {
                    font-size: 3dvh;
                }

                #speed_input {
                    margin: auto 1dvh;
                    background-color: #050506;
                    color: white;
                    border: none;
                    height: 4dvh;
                    font-size: 3dvh;
                    padding: 0.5dvh;
                    width: 50px;
					border-radius: 2dvh;
                }

                select {
                    background-color: #050506;
                    border: none;
                    color: white;
                    height: 5dvh;
                    width: 5vw;
                    font-size: 3dvh;
					border-radius: 2dvh;
                }
            }
        }
    }

    #myPopup{
        display: flex; /* JavaScriptで'flex'に変更して表示 */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒い背景 */
        justify-content: center; /* 中央寄せ */
        align-items: center; /* 中央寄せ */
        z-index: 1000; /* 最前面に表示 */

        p{
            font-size: 3dvh;
        }

        .popup-content {
            padding: 2dvh;
            border-radius: 2dvh;

            background-color: #fff;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            text-align: center;
            position: relative;
            background-color: #141414;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;

            .popup-close-btn {
                position: absolute;
                top: 1vmin;
                right: 3vmin;
                font-size: 6vmin;
                cursor: pointer;
                color: #888;

                &:hover{
                    color:#333;
                }
            }

            .contents {
                margin: 4vmin;
                width: 50vw;
                height: 70dvh;
                text-align: left;
                display: none;

                .Popup_title {
                    display: flex;

                    img {
                        height: 7dvh;
                        margin: auto 0;
                    }
                }

                #table {
                    display: flex;

                    table {
                        width: 20vw;
                        margin: 0 1vw;
                    }
                }

                tr {
                    height: 3dvh;
                    margin: 0;
                }

                thead {
                    background-color: #151515;
                }

                tbody {
                    tr:nth-child(odd) {
                        background-color: #171717 /* 薄いグレー */
                    }

                    tr:nth-child(even) {
                        background-color: #202020; /* 白 */
                    }
                }
            }

            #infocontent {
                display: block;
            }

            #settingcontent {

                h3 {
                    margin-left: 1vw;
                }

                table {
                    margin-left :2vw;
                    font-size: 2dvh;

                    tr {
                        background-color: #0000;
                        height: 4dvh;

                        input {
                            background-color: #101010;
                            color: white;
                            border: none;
                            width: 20vw;
                            height: 4dvh;
                            font-size: 3dvh;
                            font-family: Reddit Mono;
                            text-align: right; 
                        }
                    }
                }
            }

            #confirm_content {
                height: auto;
                text-align: left;

                p {
                    font-size: 3dvh;
                }

                #confirm_button {
                    height: 10vmin;
                    width: 30vmin;
                    font-size: 5vmin;
                    margin-left: auto;
                    margin-right: 5vmin;
                    border: none;
                    background-color: #171717;
                    color: white;
                }
            }
        }
    }

    #keyboard {
		border: white solid 1px;
        background-color: #171717;
        width: auto;
        height: auto;
        top: 50px; /* 初期位置 */
        left: 50px;
        position: absolute;
        opacity: 0.99;
        display: none;

        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;

        border-radius: 2dvh;
        
        #keyboard-head {
            .Popup_title{
                display: flex;
                cursor: grab;
                padding: 1dvh;
                background-color: #141414;
                border-radius: 2dvh;
                align-items: center;

                &:active{
                    cursor: grabbing;
                }

                img {
                    height: 7dvh;
                }

                #keyboard-title {
                    margin: 0;
                    display: flex;
                }
            }

            .keyboard-close-btn {
                position: absolute;
                top: 1dvh;
                right: 1dvh;
                width: 5dvh;
                height: 5dvh;
                font-size: 4dvh;
                border-radius: 1dvh;
                background-color: #0000;

                border: none;
                color: white;
            }
        }

        .keyboard-button {
            display: flex;
            
            button {
                width: 6vmin;
                height: 6vmin;
                margin: 0.5vmin;
                font-size: 3vmin;
                font-family: Reddit Mono;
                border-radius: 1dvh;
                background-color: #151515;
				justify-content: center;

                border: none;
                color: white;
            }
        }
    }
}

::-webkit-scrollbar {
  	width: 12px;
  	background-color: #191919;
}

::-webkit-scrollbar-thumb {
 	background-color: #555;
 	border-radius: 6px;
 	border: 3px solid #191919;
}

::-webkit-scrollbar-thumb:hover {
  	background-color: #777;
}

::-webkit-scrollbar-track {
  	background-color: #191919;
}

html {
  	scrollbar-color: #555 #191919;
  	scrollbar-width: thin;
}