:root, [data-theme="light"]{
    --titleFont:titleFont1;
    --titleColor:#303030;
    --topSidebar: linear-gradient(rgb(167, 167, 167), rgb(78, 78, 78));
    --wallpaper:radial-gradient(white, rgb(204, 238, 250));
    --background:linear-gradient(white,white);
    --text:#303030;
    --text2:white;
    --sidebar:#303030;
    --icon:radial-gradient(white, rgb(204, 238, 250));
    --link-color: #0caf4e;
    font-family:subheadingFont;

}
[data-theme="mincho"]{
     --titleFont:titleFont;
     --titleColor:#ceede6;
    --topSidebar: linear-gradient(white, #ceede6);
    --wallpaper:linear-gradient(#303030, #303030);
    --background:linear-gradient(#616161,#303030);;
    --text:#ceede6;
    --text2:#303030;
    --sidebar:#ceede6;
    --icon:radial-gradient(white, #ceede6);
    --link-color: #ceede6;
    font-family:subheadingFont;
}
[data-theme="star"]{
    --titleFont:titleFont;
    --titleColor:#0caf4e;
    --topSidebar: linear-gradient(#0caf4e, #0caf4e);
    --wallpaper:linear-gradient(white, white);
    --background:linear-gradient(white,yellow);;
    --text:black;
    --text2:white;
    --sidebar:white;
    --icon:radial-gradient(#FF5F1F, #FF5F1F);
    font-family:subheadingFont;
}
/*icon for sidebar*/
.icon{
    border-radius: 10px;
    border: solid #000;
    border-width:2px;
    border-color: white;
    width: 70px;
    height: 70px;
    margin-top:10px;
    margin-bottom: 10px;
    background-image: var(--icon);
    color:#303030;
}
body{
    background-image:var(--background);
    color:var(--text);
    overflow-x:hidden;
}
table{
  width: auto;
  border: 2px dotted var(--text);
}
th{
  color: var(--text2);
  background-color: var(--text);
  border: 1px solid var(--text);
  }
td{
  padding:5px;
  border: 1px solid var(--text);
  }

#btn{
    font-family:titleFont1;
    color:var(--text);
    size:30px;
    border-style:inset;
    padding:10px;
    margin-top:10px;
    float: left;
    cursor:pointer;
}
.boutique {
  display:flex;
  flex-wrap:wrap;
  width:90%;
  justify-content:space-between;
}
.boutique img{
  width:300px;
  height:auto;
  justify-content:space-between;
  transition: transform 0.3s ease-in-out;
  }
  .boutique img:hover{
  transform: scale(1.1) rotate(10deg);
  }

.toolbar{
    background-image: var(--topSidebar);
    color:var(--text2);
    margin:0%;
    display: inline-flex;
    width:100%;
    justify-content:space-between;
}
.toolbar2{
    background-color: var(--text2);
    color:var(--text);
    border:solid;
    border-top:0;
    border-width:1px;
    border-bottom:0;
    justify-content:space-between;
    padding:2px;
}
.box{
    background-image: radial-gradient(var(--text2), var(--text2));
    margin:0%;
    height:400px;
    overflow-y:scroll;
    overflow:scroll;
    border:solid;
    border-width: 1px;
    border-color:var(--text);
    padding:2px;
}
a:link, a:visited, a:hover, a:active {
  color: var(--text);
  text-decoration: none;
}
/*accordion*/
.accordion {
  background-color: var(--text2);
  color: var(--text);
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: outset;
  text-align: left;
  outline: none;
  font-family: 'subheadingFont';
  font-size: 25px;
  transition: 0.7s;
}

.active, .accordion:hover {
  background-color: var(--text); 
  color: var(--text2);
  position: static;
  border-color:var(--text);
}
p.ds{ 
height:503px;
width: 400px;
background: url(https://duskytel.neocities.org/images/dsBgDither.png) no-repeat;
padding: 35px;
text-decoration:underline;}
div.text{
  float: middle;
  text-align: justify;
  margin: 20px;
  column-count: 3;
  column-gap:50px;
  column-rule: 3px dotted var(--text);}

.panel {
  color: var(--text);
  padding: 18px;
  display: none;
  overflow:hidden;
  width:95%;
   }
.material-icons{
    width:50px;
    color:var(--text2);
    text-align:center;
}
.material-symbols-outlined{
    width:50px;
    color:var(--text2);
    text-align:center;
}
.scanlines{
              position: absolute;
              inset: -1%;
              background-image: url(https://duskytel.neocities.org/images/scanline.png);
              opacity: 10%;
              animation: shift 2s linear infinite;
              pointer-events: none;
              z-index: 100;
              
              }
              @keyframes shift{
              0%{
                transform:  translateY(0.5%) }
              100%{
                transform: translateY(-0.5%) }
              }


/*title*/
#title{
    color: var(--titleColor);
    font-size: 100px;
    font-family: var(--titleFont);
    margin:0%;
    padding-left:20px;
    text-decoration: none;
}
#tagline{
    color: var(--text);
    font-size:20px;
    font-family: subheadingFont;
    margin:0%;
    padding-left:20px;
}
#greeting{
    color:var(--text);
}
/*top and left sidebar, main screen: change for dimensions and positioning*/
#topSidebar {
    font-family: subheadingFont;
    border-bottom:0px;
    color:var(--text2);
    background-image: var(--topSidebar);
    height:30px;
    }
#leftSidebar{
    width:64px;
    padding-top:5px;
    padding-left:5px;
    padding-right:5px;
    padding-bottom:15px;
    border:1px;
    border-style: solid;
    border-color: var(--text);
    border-right:0px;
    border-top:0px;
    height:490px;
    background-color:var(--sidebar);
}
#mainScreen{
    width:100%;
    border:1px;
    border-style: solid;
    border-left:0px;
    border-top:0px;
    border-color:var(--text);
    padding: 10px;
    height:490px;
    background-image:var(--wallpaper);/*change background color*/
}
/*os for encasing entire "screen" to add padding, display to enable flex for left sidebar and main */
#os {
    height:600px;
    width:1024px;
    padding: 20px;
    overflow: auto;
    }
#display {
    display: flex;
    width: 100%;
    overflow: auto;
    }

#copyright{
    float:right;
}
@font-face {
  font-family: titleFont;
  src: url("fonts/ThatThatNewPixelVariable-Italic.ttf");
}
@font-face {
  font-family: titleFont1;
  src: url("fonts/flintscript-Regular.otf");
}
@font-face {
  font-family: subheadingFont;
  src: url("fonts/ThatThatNewPixelFamily-Square.woff");
}