/*UNIVERSAL STYLING*/

:root{
    --selection:#ffcdef;
    --background-color:#d6ecf3;
    --background-img: url("/img/webring_bg.png");
    --font-color:#6e45ff;
    --link-color:6e45ff;
    --header-color:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(189,236,255,1) 25%, rgba(189,236,255,1) 75%, rgba(255,255,255,0) 100%);
}

[data-theme="dark"] {
    --selection:#5310ff;
    --background-color:#432f46;
    --background-img: url("/img/webring_bg-darker.png");
    --font-color:#ddd;
        --link-color:#c786ff;
        --header-color:#432f46;
}


body{
    font-family:'ＭＳ Ｐゴシック', sans-serif;
    color:var(--font-color);
    letter-spacing:1px;
    background-image: var(--background-img);
    background-position: center;
  /* Center and scale the image nicely */
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}

::selection {
  background: var(--selection);
}

a{
    color:var(--link-color);
    text-decoration:none;
    letter-spacing:1px;
    font-weight:bold;
}

p{
    text-align:justify;
    width:100%;
}

hr{
    border-bottom:1px dotted;
    border-top:none;
    border-left:none;
    border-right:none;
}

h1{
    border-bottom: 1px dotted;
   border-top:none;
  border-left:none;
  border-right:none;
  margin-right:10px;
    text-transform:uppercase;
font-size:1em;
    
}

.container{
    background-color: var(--background-color);
    border: 1px solid #6e45ff;
    margin:0 auto;
    width:1000px;
}

.header{
    margin:0 auto;
    padding:5px;
    text-align:center;
    background: var(--header-color);
    border-bottom:1px dotted #6e45ff;
}

.flex{
 display: flex;
}
    #nav{
    /*margin-right:5px;*/
    /*width:10%;
    min-width:100px;
    padding:15px;*/
    border-right:1px dotted #6e45ff;
    margin:0 auto;
    }

    .title{
    width:100%;
    display: table;
    margin: 0 auto;
    text-align:center;
    background: var(--header-color);
    border-bottom:1px dotted #6e45ff;
    }
    
    .nav-links{
        /*padding:0 25px;*/
        /*width:10%;*/
        max-width:125px;
        margin:0 auto;
    }
    
    .buttons{
        padding:15px;
        margin:0 auto;
    }
    
    .nav-links div{
        border-bottom:1px solid;
        padding:2px 3px;
    }
    
        /*.nav-links div:nth-child(even){
        background:#ebfaff;
    }*/
    
    
    #content{
        margin-left:5px;
        padding:15px;
        width:90%;
    }
    
    .mobile{
        display:block;
    }

/*BROWSE SITES STYLING*/



@media screen and (max-aspect-ratio:16/9) {
    
    .container{
    width:95%;
    }
    
    .flex{
        display:block;
        width:100%;
    }
    
    #nav{
    display: block;
    order: 1;
    margin-right:0;
    border-right:none;
    width:100%;
    }
    
    #content{
    display: block;
    order: 2;
    margin-left:0;
    border-top:1px dotted #6e45ff;
    }
    .nav-links{
    display:inline-table;
    vertical-align:top;
    padding:1px;
    padding-left:14px;
    }
    
    .
    
        .mobile{
        display:none;
    }
}