:root[data-theme="light"] {
--bg-img:url("https://raincandy.lol/a/sa2/sonic.png");
--container-color: rgb(7, 5, 122);
--text:  #cfcfec;
--shadow:rgb(250, 226, 13);
--title:#050549;
--border: rgba(94, 101, 126);
--button: rgb(250, 226, 13);
}

:root[data-theme="dark"] {
--bg-img:url("https://raincandy.lol/a/sa2/shadow.png");
--container-color: black;
--text: white;
--shadow: #b5b5b5;
--title: #333333;
--border: rgb(133, 16, 16);
--button: red;

}

body {
 background: var(--bg-img) repeat top left fixed;

}

.container {  display: grid;
  grid-template-columns: 3fr 0.6fr 3fr 0.6fr 3fr 0.6fr 3fr 0.6fr 3fr 0.6fr 3fr 0.6fr 3fr 0.6fr 3fr 0.6fr 3fr 0.6fr 3fr 0.6fr 3fr 0.6fr 3fr 0.6fr 3fr;
  grid-template-rows: 0.2fr 1fr 0.2fr 1fr 0.2fr 1fr 0.2fr 1fr 0.2fr 1fr 0.2fr 1fr 0.2fr 1fr 0.2fr 1fr 0.2fr 1fr 0.2fr 1fr 0.2fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
}

.BIGBOX { grid-area: 6 / 3 / 21 / 24; 
border: solid 4px var(--border);
padding: 20px;
height: 600px;
width:100%;
background-color: var(--container-color);
color: var(--text);
}

#titulo {
    margin:auto;
    font-family:"sonic";
    font-size: 3rem;
      text-shadow: 
          -2px -2px 0 var(--shadow),
     0   -2px 0 var(--shadow),
     2px -2px 0 var(--shadow),
    -2px  0   0 var(--shadow),
     2px  0   0 var(--shadow),
    -2px  2px 0 var(--shadow),
     0    2px 0 var(--shadow),
     2px  2px 0 var(--shadow);
      color: var(--title);
}

.two { grid-area: 2 / 3 / 5 / 24;
border: solid 4px var(--border);
padding: 20px;
background-color: var(--container-color);
color: var(--text);
text-align:center;
display:flex;
  justify-content: center;
}

.buttons { grid-area: 7 / 5 / 11 / 22; 
    padding: 20px;
border: solid 4px var(--border);
height: 100px;
width: 450px;
color: var(--text);
text-align:center;
}

.comtent { grid-area: 12 / 4 / 19 / 16; 
    padding:20px;
border: solid 4px var(--border);
margin:0;
height: 250px;
overflow-y:auto;
font-family: "ComicSans";
width: 90%;
color: var(--text);
}

.updates { grid-area: 12 / 17 / 20 / 23;
    padding: 20px;
border: solid 4px var(--border);
height: 280px;
overflow-y:auto;
font-family: "ComicSans";
color: var(--text);
}

.buttons button {
    border-radius: 20px;
    background-color:  var(--button);
border: solid 1px;
font-size: larger;
padding:10px;
text-shadow: 
  -1px -1px 0 white,
   0   -1px 0 white,
   1px -1px 0 white,
  -1px  0   0 white,
   1px  0   0 white,
  -1px  1px 0 white,
   0    1px 0 white,
   1px  1px 0 white;
 box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
}

.buttons button:active {
    background-color: black;
    color:white;
}

#main {
border-radius: 20px;

}

#fonty {
      text-shadow: 
          -2px -2px 0 var(--shadow),
     0   -2px 0 var(--shadow),
     2px -2px 0 var(--shadow),
    -2px  0   0 var(--shadow),
     2px  0   0 var(--shadow),
    -2px  2px 0 var(--shadow),
     0    2px 0 var(--shadow),
     2px  2px 0 var(--shadow);
      color: var(--title);
    font-family:"sonic"
}

    @font-face {
        font-family: "ComicSans";
        src: url(https://raincandy.lol/a/ComicSansMS3.ttf)
    }

        @font-face {
        font-family: "sonic";
        src: url(https://file.garden/aBi0tvXzESnPXzr_/NiseSegaSonic.TTF)
    }

        @font-face {
        font-family: "vip";
        src: url(https://file.garden/aBi0tvXzESnPXzr_/Vipnagorgialla%20Rg.otf)
    }