body {margin:0;display:flex;flex-direction:column;height:100vh;font-family:Arial,sans-serif;}
a{text-decoration:none;color:inherit;}
a:active,a:hover{color:#000000;text-decoration:underline;}
em, i,span {font-style: normal;}
h1{font-weight: bold;font-size: 24px; height:28px;line-height: 28px;letter-spacing:1px;padding-left:3px;margin-top:5px;margin-bottom:5px;word-wrap: break-word;}
h2{font-weight: bold;font-size: 24px; height:28px;line-height: 28px;margin-top:5px;margin-bottom:5px;}
h3{font-weight: bold;font-size: 24px; height:28px;line-height: 28px;margin-top:5px;margin-bottom:5px;}
#topbar {background:#f8f8f8;padding:10px 10px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #eee;height:45px;box-sizing: border-box; top: 0;position: fixed;width:100%;z-index: 1000;}
#topbar .logo {font-weight:bold;color:#333333;font-size:18px;}
#topbar .slogan {font-weight:bold;color:#f43f5e;font-size:20px;}
#topbar .slogan h1{font-weight:bold;color:#f43f5e;font-size:25px;margin:0px;padding:0px;} 

#topbar .lang-switch {font-size:14px;color:#f43f5e;position: relative;cursor:pointer;height:44px;line-height:44px;}
#topbar .lang-switch select {margin-left:3px;padding:3px 3px;background-color:#fff;color:#f43f5e;border:1px solid #ccc;border-radius:2px;cursor:pointer;font-size:12px;width:100px;}

.lang-switch ul{ width:260px;margin:0;padding:0;position:absolute;right:0;left:auto;top:100%;box-shadow:0 2px 5px rgba(0,0,0,0.1);}
.lang-switch ul{display: none;}
.lang-switch:hover ul{display:block;position:absolute; z-index:1001;}
.lang-switch ul li{float:left;width:130px;height:38px;line-height:38px; list-style:none;overflow:hidden;margin:0px;letter-spacing:1px;margin-right:-1px;margin-bottom:-1px;border-bottom:1px solid #e0e0e0}
.lang-switch ul li a:link,.lang-switch ul li a:visited{ border-radius: 2px; font-size:13px;display:block; text-align:center; border:1px solid #e0e0e0;text-decoration:none;color:#000000;background:#f0f0f0; }
.lang-switch ul li a:hover,.lang-switch ul li a:active{background-color: #3366ff;color:#ffffff;}

.webabout{border:1px solid #e7e7e7;text-align:left;line-height:28px;padding:10px;position:relative; border-radius: 10px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);word-wrap:break-word;word-break:break-all;font-size:17px;}
.webabout i{color:#0000ff;font-weight: bold;}
.webabout h1{clear: both;color:#3366ff;word-break: break-all; display:inline-block;} 
.webabout h2{clear: both;color:#3366ff;word-break: break-all; display:inline-block;} 

#toolbar {padding:5px;background:#f0f0f0;display:flex;justify-content:center;gap:8px;flex-wrap:wrap;align-items:center;border-bottom:1px solid #ddd;margin-top: 45px;}

.buttonb{padding:5px 5px;background-color:#3366ff;color:white;border:none;border-radius:5px;cursor:pointer;font-size:18px;transition:background-color 0.3s ease;line-height:18px;}
.buttonb:hover {background-color:#f43f5e;}

.buttons{padding:5px 5px;background-color:#333333;color:white;border:none;border-radius:5px;cursor:pointer;font-size:14px;transition:background-color 0.3s ease;line-height:18px;}
.buttons:hover {cursor:not-allowed;background-color:#000000;}

.buttonr{padding:5px 5px;background-color:#f43f5e;color:white;border:none;border-radius:5px;cursor:pointer;font-size:14px;transition:background-color 0.3s ease;line-height:18px;}
.buttonr:before {content: "💾";margin-right:.2rem}
.buttonr:hover {background-color:#00cc00;}

.buttong{padding:5px 5px;background-color:#00cc00;color:white;border:none;border-radius:5px;cursor:pointer;font-size:14px;transition:background-color 0.3s ease;line-height:18px;}
.buttong:hover {cursor:help;background-color:#f43f5e;}

.color-option {width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid #fff;transition:transform 0.2s;box-shadow:0 1px 3px rgba(0,0,0,0.1);}
.color-option:hover {transform:scale(1.1);}

.size-option {width:18px;height:18px;background:#333333;border-radius:30%;cursor:pointer;margin:5px;box-shadow:0 1px 3px rgba(0,0,0,0.1);}
#canvas {flex:1;touch-action:none;cursor:none;margin-bottom:40px;border:1px solid #eee;background:#ffffff;}
#cursor {position:absolute;pointer-events:none;border-radius:50%;border:1px solid rgba(0,0,0,0.3);}

.path{text-align:left;line-height:35px;height:35px;color:#c2ccd0;font-size:13px;margin-bottom:0px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.path em{font-style:normal;color:#88ada6;}
.path a:link,.path a:visited {COLOR: #c2ccd0; TEXT-DECORATION:none;}
.path a:hover{color:#ff3300;TEXT-DECORATION:underline;} 

.page{width:90%;  margin: 0 auto; display: flex;  justify-content: center;}
.page li{float:left;min-width:80px;height:50px;line-height:48px; list-style:none;overflow:hidden;margin:0px;letter-spacing:1px;margin-right:-1px;margin-bottom:-1px;margin-top:-1px;background:#f5f5f5; border-radius: 2px; font-size:15px;display:block; text-align:center; border:1px solid #e0e0e0;}
.page li a:link,.page li a:visited{text-decoration:none;color:#364141;display:block}
.page li a:hover,.page li a:active{color:#f43f5e;}
.page li span {color:#f43f5e;}
.page:after {content: "";display: table;clear: both;}

#footer {background:#f0f0f0;padding:8px 0px;border-top:1px solid #ddd;position:fixed;left:0;bottom:0;width:100%;font-size:14px;color:#777;text-align:center;align-items: center;line-height:22px;display:flex;justify-content:space-around;}
#footer #upload-status {color:#999999;font-size:14px;}
#footer span {color:#f43f5e;font-size:14px;}
#footer a {font-size: 14px;}

#getdoodling {display:none;}

#cookie-notice {background-color: #333;color: white;padding: 0px;align-items: center;box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);border: 2px solid #333;border-radius: 5px;line-height:22px;}
#cookie-notice p {margin: 0;flex-grow: 1;font-size: 13px;line-height:22px;}
#cookie-notice a {text-decoration: underline;transition: color 0.3s;padding: 0px;margin-left:5px;}
#cookie-notice a:hover { color: #ddd;}
#cookie-notice .close {background: none;border: none;color: white;font-size: 15px;cursor: pointer;padding: 0px 0px;margin-left:6px;margin-right:3px;}

.doodle-about{color:#364141;padding:5px;}
.doodle-about h1{clear: both;color:#3366ff;word-break: break-all; display:inline-block;} 
.doodle-about span{color:#aaaaaa;font-size:13px;}
.doodle-about i{color:#f43f5e;}

.note{color:#aaaaaa;padding:5px;font-size:13px;}
.note span{color:#364141;}

.notes {display: flex;gap:6px;color:#666666;flex-direction: row;justify-content: center;line-height:22px;font-size: 14px;margin-top:5px;}
.notes span {color:#000000;}

.search{border:1px solid #e7e7e7;padding:10px;text-align:center;align-items: center;}
.search-input{color: #364141; border: solid 1px #ddd; width:50%; height: 30px;line-height:30px; padding: 4px 7px; padding-left:8px;  font-size: 16px; border-radius: 2px 0 0 2px; outline: none; }
.search-submit{color:#fff; border: none; background: #666666; height: 38px; line-height:38px;font-size: 14px; padding: 0 12px; border-radius: 0 2px 2px 0; cursor:pointer; }

.content{margin:50px 5px 40px 5px;border:1px solid #e7e7e7;text-align:left;line-height:28px;padding:10px;position:relative; border-radius: 10px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);word-wrap:break-word;word-break:break-all;text-align:center;}
.content b{color:#000000;letter-spacing:2px;font-size:20px;} 
.content h1{clear: both;color:#3366ff;} 
.content h2{clear: both;color:#3366ff;} 

.contents{margin:50px auto 50px;border:1px solid #e7e7e7;text-align:left;line-height:25px;padding:10px;position:relative; border-radius: 10px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);word-wrap:break-word;word-break:break-all;text-align:center;max-width:1200px;}
.contents img {max-width: 95%;max-height:95%;cursor: pointer;border:1px solid #e0e0e0;}
.contents b{color:#000000;letter-spacing:2px;font-size:20px;} 
.contents h1{clear: both;color:#3366ff;word-break: break-all; display:inline-block;} 
.contents h2{clear: both;color:#3366ff;} 

#opendiv {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);z-index: 100000;border:1px solid #e0e0e0;}
#divcontent {position: fixed;top:50%;left: 50%;transform: translate(-50%, -50%);width: 80%;background-color: #e0e0e0;padding: 10px;border-radius: 5px;z-index: 1001;text-align: left;box-sizing: border-box;line-height:28px;}
#divinto {background-color: #ffffff;margin-bottom:5px;padding: 5px;font-size:16px;color:#333333;max-height:500px;overflow-y:auto;}


.cbutton-container {display: flex;gap: 10px;color:#ffffee;flex-direction: row;justify-content: center;}
.cbutton {position: relative;padding: 10px;font-size: 15px;color: #0000ff;background-color: #dddddd;border: none;border-radius: 5px;transition: background-color 0.3s;display: flex;align-items: center;min-width: 100px;}

.cbutton i {width:100%;color:#3366ff;text-align:center;justify-content: center}
.cbutton[data-ucount] {background-color: #3366ff;cursor: pointer;}
.cbutton[data-ucount]:hover {background-color: #01cd74;}
.cbutton[data-dcount] {background-color: #333333;cursor: pointer;}
.cbutton[data-dcount]:hover {background-color: #666666;}
.cbutton .count {position: absolute;top: 50%;right: 10px;transform: translateY(-50%);font-size: 12px;color:#ffffee;}

.cbuttonf {position: relative;padding: 5px;font-size: 14px;color: #fff;background-color: #1877F2;border: none;border-radius: 5px;cursor: pointer;transition: background-color 0.3s;display: flex;align-items: center;}
.cbuttonf:after {content: "Facebook";}
.cbuttonf:hover {background-color: #22c55e;}

.cbuttont {position: relative;padding: 5px;font-size: 14px;color: #fff;background-color: #000000;border: none;border-radius: 5px;cursor: pointer;transition: background-color 0.3s;display: flex;align-items: center;}
.cbuttont:after {content: "Twitter(X)";}
.cbuttont:hover {background-color: #22c55e;}

.cbuttonp {position: relative;padding: 5px;font-size: 14px;color: #fff;background-color:#E60023;border: none;border-radius: 5px;cursor: pointer;transition: background-color 0.3s;display: flex;align-items: center;}
.cbuttonp:after {content: "Pinterest";}
.cbuttonp:hover {background-color: #22c55e;}

.cbuttonr {position: relative;padding: 5px;font-size: 14px;color: #fff;background-color:#FF4500;border: none;border-radius: 5px;cursor: pointer;transition: background-color 0.3s;display: flex;align-items: center;}
.cbuttonr:after {content: "Reddit";}
.cbuttonr:hover {background-color: #22c55e;}

.cbuttonl {position: relative;padding: 5px;font-size: 14px;color: #fff;background-color:#0077B5;border: none;border-radius: 5px;cursor: pointer;transition: background-color 0.3s;display: flex;align-items: center;}
.cbuttonl:after {content: "LinkedIn";}
.cbuttonl:hover {background-color: #22c55e;}

.tagcloud{padding:10px;text-align:center;border:1px solid #e0e0e0;border-radius: 2px;font-size:15px;margin-top:10px;margin-bottom:10px;overflow:hidden;}
.tagcloud em{color:#aaaacc;font-size:15px;line-height:24px;height:21px;padding: 0 6px;}
.tagcloud a{font-size:15px;opacity:0.80;filter:alpha(opacity=80);color:#FFFfff;display:inline-block;margin: 0 5px 5px 0;padding: 0 6px;line-height:30px;border-radius:2px;TEXT-DECORATION:none;background-color: #3388ff;letter-spacing:1px;}
.tagcloud a:hover{color:#ff0000; TEXT-DECORATION:none;} 
.tagcloud a i{TEXT-DECORATION:underline;}
.tagcloud a:nth-child(25n){background-color: #5a5a5a;}
.tagcloud a:nth-child(25n+1){background-color: #428BCA;}
.tagcloud a:nth-child(25n+2){background-color: #5CB85C;}
.tagcloud a:nth-child(25n+3){background-color: #D9534F;}
.tagcloud a:nth-child(25n+4){background-color: #567E95;}
.tagcloud a:nth-child(25n+5){background-color: #993366;}
.tagcloud a:nth-child(25n+6){background-color: #00ABA9;}
.tagcloud a:nth-child(25n+7){background-color: #B37333;}
.tagcloud a:nth-child(25n+8){background-color: #FF6600;}
.tagcloud a:nth-child(25n+9){background-color: #6699ff;}
.tagcloud a:nth-child(25n+10){background-color: #3388ff;}
.tagcloud a:nth-child(25n+11){background-color: #a1afc9;}
.tagcloud a:nth-child(25n+12){background-color: #70f3ff;}
.tagcloud a:nth-child(25n+13){background-color: #808080;}
.tagcloud a:nth-child(25n+14){background-color: #f47983;}
.tagcloud a:nth-child(25n+15){background-color: #758a99;}
.tagcloud a:nth-child(25n+16){background-color: #88ada6;}
.tagcloud a:nth-child(25n+17){background-color: #bce672;}
.tagcloud a:nth-child(25n+18){background-color: #ffa400;}
.tagcloud a:nth-child(25n+19){background-color: #4b5c44;}
.tagcloud a:nth-child(25n+20){background-color: #96ce54;}
.tagcloud a:nth-child(25n+21){background-color: #7fecad;}
.tagcloud a:nth-child(25n+22){background-color: #a88462;}
.tagcloud a:nth-child(25n+23){background-color: #665757;}
.tagcloud a:nth-child(25n+24){background-color: #9b4400;}


.clearfix:after { content: ""; display: table; clear: both;}
.doolelist {display: flex;flex-wrap: wrap;gap: 15px;padding: 5px;margin-top:10px;margin-bottom:20px;justify-content: center;}
.doole-item {border: 1px solid #ddd;border-radius: 8px;overflow: hidden;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);width: calc(33.33% - 16px);min-width: 140px;text-align:center;padding:2px;}
.doole-item img {width: 99%;height:auto;max-height: 170px;display: block;border:0;}

.doole-item a:link {text-decoration: none;color: #3366ff;font-size: 14px;}
.doole-item a:visited {text-decoration: none;color: #666666;font-size: 14px;}
.doole-item a:hover {text-decoration: underline;}
.doole-item:after {content: "";display: table;clear: both;}
.doolelist:after {content: "";display: table;clear: both;}
#imagePopup {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.8);z-index: 1000;justify-content: center;align-items: center;cursor: pointer;}
#popupImage {max-width: 90%;max-height: 90%;display: block;object-fit: contain;}

.links{text-align:left;font-size:12px;color:#aaaaaa;padding:3px;margin-top: 10px;line-height:28px;padding-top:5px;padding-bottom:5px;border-top:1px solid #e0e0e0}
.links li{float:left;width:calc(19% - 10px);min-width:165px;height:28px;line-height:28px;white-space:nowrap;font-size:12px;overflow:hidden;text-align:center;color:#999999;text-overflow:ellipsis;padding-right:3px;list-style:none;}
.links li a:link,.links li a:visited {font-size:12px;COLOR: #777777; TEXT-DECORATION:none;}
.links li a:hover{color:#000000;} 
.links i{color:#364141;}
.links:after {content: "";display: table;clear: both;}

@media screen and (max-width: 600px) {
#topbar .slogan {display:none;}
.cbuttonf {position: relative;padding: 5px;font-size: 13px;color: #fff;background-color: #1877F2;border: none;border-radius: 5px;cursor: pointer;transition: background-color 0.3s;display: flex;align-items: center;}
.cbuttont {position: relative;padding: 5px;font-size: 13px;color: #fff;background-color: #000000;border: none;border-radius: 5px;cursor: pointer;transition: background-color 0.3s;display: flex;align-items: center;}
.cbuttonp {position: relative;padding: 5px;font-size: 13px;color: #fff;background-color:#E60023;border: none;border-radius: 5px;cursor: pointer;transition: background-color 0.3s;display: flex;align-items: center;}
.cbuttonr {position: relative;padding: 5px;font-size: 13px;color: #fff;background-color:#FF4500;border: none;border-radius: 5px;cursor: pointer;transition: background-color 0.3s;display: flex;align-items: center;}
.cbuttonl {position: relative;padding: 5px;font-size: 13px;color: #fff;background-color:#0077B5;border: none;border-radius: 5px;cursor: pointer;transition: background-color 0.3s;display: flex;align-items: center;}
#footer {background:#f0f0f0;padding:8px 0px;border-top:1px solid #ddd;position:fixed;left:0;bottom:0;width:100%;font-size:13px;color:#777;text-align:center;align-items: center;line-height:24px;}
.doole-item {border: 1px solid #ddd;border-radius: 8px;overflow: hidden;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);width:45%;min-width: 140px;text-align:center;padding:2px;}

#footer #upload-status {color:#999999;font-size:13px;}
#footer span {color:#f43f5e;font-size:13px;}
#footer a {font-size: 13px;}
.links li{float:left;width:47%;min-width:150px;height:28px;line-height:28px;white-space:nowrap;font-size:12px;text-align:center;color:#999999;text-overflow:ellipsis;padding-right:3px;list-style:none;}
}