main.css

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Noto+Sans+KR&family=IBM+Plex+Sans+KR&display=swap');
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic&display=swap');
@import url('https://cdn.jsdelivr.net/gh/joungkyun/font-d2coding/d2coding.css');

:root{
    --bg-color: rgba(68,85,221,0.1);
    --txt-color: rgb(0,0,0);
    --responsive-table-left: 22%;
}

body{
    font-family: "IBM Plex Sans KR", "Noto Sans KR", "Noto Sans JP", "Nanum Gothic", "Malgun Gothic", sans-serif;
    font-size: 0.875rem;
    line-height: 1.73;
    /*
    background: linear-gradient(rgba(255,255,255,0.6),rgba(255,255,255,0.6)) no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center top;
    */
    background-color: var(--bg-color);
    color: var(--txt-color);
}

@media (prefers-color-scheme: dark) {
 body {
  background-color: var(--bg-color);
  color: rgb(255,255,255);
 }
}

#page-content{
    width: 1024px;
    max-width: 96%;
    margin: auto;
    padding: 1em;
}

input,button{font-family: inherit;}

#check-form{
    text-align: center;
    margin: auto;
    max-width: 100%;
}

#host{
    text-align: center !important;
    font-size: 1.25em;
    width: 480px;
    max-width: 50%;
}

#cf-scan{font-size: 1.25em;}

.about,.disclaimer{
    text-align: center;
    font-size: 0.875em;
    margin: 1em auto;
}

textarea{font-family: D2Coding, "D2 coding", monospace !important;}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    /* font-size: 24px; -- Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
  
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
  
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
  
    /* Support for IE. */
    font-feature-settings: 'liga';
  }

span{text-decoration: none;}

a:link{
    color: rgba(255,51,119,1);
    text-decoration: none;
}
a:active{
    color: rgba(255,51,119,0.75);
    text-decoration: none;
}
a:visited{
    color: rgba(255,51,119,1);
    text-decoration: none;
}
a:hover{
    color: rgba(255,136,187,0.75);
    text-decoration: none;
}

/*
a[href^="http://"]:not([class="plainlinks"],[class="with-addr"])::after,
a[href^="https://"]:not([class="plainlinks"],[class="with-addr"])::after{
    content: "";
    width: 11px;
    height: 11px;
    margin-left: 4px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
}
*/

.item-desc{
    display: inline-block;
    margin-top: -0.25em;
    margin-bottom: 1em;
}

a.with-addr[href]:after{
    font-size: 0.5em;
    width: auto;
    display: block;
    content: "("attr(href)")";
}

blockquote{font-family: "Courier New"}

abbr{cursor: help;}

table,th,tr,td{
    border-collapse: collapse !important;
    border: 1px hidden var(--bg-color) !important;
}

#tbl-webservices,
#tbl-webservices tr,
#tbl-webservices th,
#tbl-webservices td{
    border-collapse: collapse !important;
    border: 1px hidden var(--bg-color) !important;
}

@media only screen and (max-width:768px), (min-device-width: 768px) and (max-device-width: 1024px){
 .table-sitecontents table,
 .table-sitecontents thead,
 .table-sitecontents tbody,
 .table-sitecontents th,
 .table-sitecontents td,
 .table-sitecontents tr{
    display: block;
    border-collapse: collapse !important;
    border: 1px hidden var(--bg-color) !important;
 }

 .table-sitecontents tr:nth-of-type(1){display: none;}

 .table-sitecontents tr th{
    position: absolute;
    top: -9999px;
    left: -9999px;
 }
 .table-sitecontents td{
    border: none;
    position: relative;
    text-align: left;
    padding-left: var(--responsive-table-left);
    padding-bottom: 1em;
 }
 
 .table-sitecontents td:before{
    font-weight: bold;
    position: absolute;
    top: 5px;
    left: 5px;
    width: var(--responsive-table-left);
    padding-right: 15px;
    white-space: nowrap;
 }

 #table-sitenav td:nth-of-type(1):before{content: "컨텐츠";}
 #table-sitenav td:nth-of-type(2):before{content: "소도구";}
 #table-otherwebs td:nth-of-type(1):before{content: "다른 서비스";}
 #table-otherwebs td:nth-of-type(2):before{content: "다른 사이트";}
 #table-fediverse td:nth-of-type(1):before{content: "페디버스";}
}


th,td{padding: 0.25em;}

ul, ol{
    margin-left: -1.25em;
    margin-right: 1em;
    font-size: 13px;
    line-height: 1.35;
}

a.brightlink{color: #FFFFFF !important;}


.nonmarker{list-style-type: none;}

.notyetavail{color: #DEDEDE;}

.fonts_small{font-size: 72%;}

.icon_links{margin: 0.5em;}

#copyright,#recent_updated,#support,#domaininfo{
    text-align: center;
    font-size: 0.875em;
}

#headtext{
    text-align: center;
    background-color: #F5F8FA;
    padding-top: 1em;
    padding-bottom: 1em;
    border-radius: 1.4em;
}

label{font-size: 80%;}

.uinotes{font-size: 9px;}

.a_main{
    text-align: center;
    margin-bottom: 1em;
}

#sys_stats{
    width: 720px;
    max-width: 96%;
    border-radius: 1.5em;
    background-color: #99CDFF;
    margin: auto;
    padding: 0.5em 0.25em;

}

#stat_field div,
#net_stat div{margin: auto;}


.a_toc{
 position: fixed;
 right: 5px;
 width: 300px;
 background: rgba(0,0,0,0.5);
 padding: 0.5em;
 border: 1px solid rgb(0,0,0);
 border-radius: 0.5em;
}

#toc_main{display: none;}

@media (max-width: 50rem){
 .a_toc{display: none;}
}