:root {
  --background: #000000;
  --foreground: #ffffff;
  --accent: #94e3fe;
  --radius: 0;
  --font-size: 1rem;
  --line-height: 1.54em;
}

@font-face {
  font-family: myFont; /* set name */
  src: url(PixelOperator.ttf); /* url of the font */
}

@font-face {
  font-family: codingFont; /* set name */
  src: url(JetBrainsMono-Medium.ttf); /* url of the font */
}

html {
  cursor: url('Cursor_Mew.png'), default;
  box-sizing: border-box;
}

body {
  color: white;
  font-family: myFont, Comic Sans MS;
  text-align: center;
  font-size: 50px;
  background: #2593A0;
  margin: 0;
  /* SFONDO CON IMMAGINE */
  background-image: url('https://i.pinimg.com/736x/ea/a1/01/eaa10194ccc4c8aec598324b81bf3827.jpg');
  
  /* colore di fallback se l'immagine non carica */
  background-color: black;
}

h1 {
  text-align: center;
  font-size: 100px;
  font-family: myFont
  text-decoration: underline;
}

ul.a {
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
}

ul.b{
  list-style-position: inside;
  list-style-image: url("https://img.pokemondb.net/sprites/sword-shield/normal/solosis.png");
}

li a {
  color: white;
  display:inline-block; /* this allows us to add margin to each item */
  margin:10px;
}

li a:hover {
  transform:rotate(2deg); 
  /* more CSS transform options: https://developer.mozilla.org/en-US/docs/Web/CSS/transform */
}


li a:active {
  color: lightblue;     /* colore mentre lo clicchi (opzionale) */
}


button {
  font-size: 50px;         
  background-color: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: myFont
}

button:hover {
  transform:rotate(-2deg); 
  /* more CSS transform options: https://developer.mozilla.org/en-US/docs/Web/CSS/transform */
}

.MainLayout {
  display: grid;
  grid-template:
    "leftside main rightside"
    "footer footer footer"
    / 1fr 2fr 1fr;
}

CenterColumn {
  grid-area: main;
}

LeftColumn{
  grid-area: leftside;
}

RightColumn {
  grid-area: rightside
}

.Row {
  display: flex;
  flex-direction: row;
  gap: 20px;
  justify-content: center;
  align-items: center;
}

  
.box{
  background:rgba(215,242,250,.8);
  border:3px solid #3fabde;
  border-radius:5px;
}

.banner{
  width: 100%;      /* prende tutta la larghezza della finestra */
  height: 300px;    /* altezza fissa del banner */
  overflow: hidden;
}

/* immagine dentro il banner */
.banner img {
  width: 100%;       /* si estende per tutta la larghezza */
  height: 100%;      /* riempie i 100px in altezza */
  object-fit: cover; /* riempie il box senza deformarsi, ritagliando */
  display: block;    /* niente spazio bianco sotto l’immagine */
}

#borderimg {
  border: 10px solid transparent; /* Required for border-image */
  padding: 15px;
  border-image: url(https://i.pinimg.com/1200x/9a/e3/e2/9ae3e2182b215b765507f3f782c37d37.jpg) 10 round;
}

/*A vast majority of this styling comes from 98.css code, if you're making a full windows 98 theme, I suggest you use the stylesheet this is sourced from - https://jdan.github.io/98.css/ */

.title-bar-controls button {
border:none;
border-radius:0;
box-sizing:border-box;
color:transparent;
min-height:23px;
min-width:75px;
padding:0 12px;
text-shadow:0 0 #222;
}

.title-bar-controls button {
background:silver;
box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
}

.title-bar-controls button:not(:disabled):active {
box-shadow:inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey;
text-shadow:1px 1px #222;
}

@media (not(hover)){
button:not(:disabled):hover {
box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey}
}

.title-bar-controls button:focus {
outline:1px dotted #000;
outline-offset:-4px;
}

.title-bar-controls button::-moz-focus-inner { border:0 }
    
@font-face {
font-family: "Pixelated MS Sans Serif";
src: url("https://files.catbox.moe/1za99g.woff") format("woff");
src: url("https://files.catbox.moe/8fwbkl.woff2") format("woff2");
font-weight: normal;
font-style: normal;
}   

.window, .title-bar {
font-family: myFont, Arial;
-webkit-font-smoothing: none;
font-size: 25px;
}

.window {
box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #ffffff;
background: #c0c0c0;
color:#000;
padding: 3px;
width:100%;
}

.title-bar {
background:linear-gradient(90deg, blue, lightblue);
padding: 3px 2px 3px 3px;
display: flex;
justify-content: space-between;
align-items: center;
}

.title-bar-text {
font-weight: bold;
color: white;
letter-spacing: 0;
margin-right: 24px;
}

.title-bar-controls {
display: flex;
}

.title-bar-controls button {
padding: 0;
display: block;
min-width: 16px;
min-height: 14px;
}

.title-bar-controls button:active {
padding: 0;
}

.title-bar-controls button:focus {
outline: none;
}

.title-bar-controls button[aria-label=Minimize]{
background-image:url("https://raw.githubusercontent.com/jdan/98.css/main/icon/minimize.svg");
background-position:bottom 3px left 4px;
background-repeat:no-repeat
}

.title-bar-controls button[aria-label=Maximize]{
background-image:url("https://raw.githubusercontent.com/jdan/98.css/4a2282dd9170cabf730fb5803d1153d86b2e94e3/icon/maximize.svg");
background-position:top 2px left 3px;
background-repeat:no-repeat;
}

.title-bar-controls button[aria-label=Close]{
background-image:url("https://raw.githubusercontent.com/jdan/98.css/main/icon/close.svg");
background-position:top 3px left 4px;
background-repeat:no-repeat;
margin-left:2px;
}

.window-body {
margin: 8px;
}

/* literally only part ive custom coded so it scrolls . i also like the effect the fieldset adds */
.fieldset {
border:1px gray solid;
box-shadow: white 1px 1px 0px inset, white 1px 1px 0px, white 0px 1px 0px, white 1px 0px 0px;
margin:0;
padding:10px;
overflow-y:auto; 
height: 190px;
}