@import url('https://fonts.googleapis.com/css2?family=Syne+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DotGothic16&family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap');
/* colors [light to dark]:#e6e2d7, #b3c7fb, #9bbb9f[green], #1e47b0, #27287a, #261559 */
/* Rei Ayanami - Neon Genesis Evangelion - https://www.cursors-4u.com/cursor/rei-ayanami-neon-genesis-evangelion */
 /* Wii Pointer #1 Tilt Normal - https://www.cursors-4u.com/cursor/wii-pointer-1-tilt-normal */
* {
  cursor: url('https://cdn.cursors-4u.net/previews/wii-pointer-1-tilt-normal-7f3b1ab2-32.webp') 40 34, auto !important;
}
/* End www.Cursors-4U.com Code */
::selection{
    background-color:#9bbb9f;
}
/* ::-moz-selection{
    background-color:white;
    text-shadow:0px 0px 5px #989788;
} */
/* End www.Cursors-4U.com Code */
html{
    background-image:url(https://files.catbox.moe/injxqf.png);
}
h1{
    font-family:Syne Mono;
    color:#27287a;
}
h2{
    font-family:Syne Mono;
    color:#27287a;
}
h3{
    font-family:Syne Mono;
    color:#27287a;
}
p{
    font-family:Sour Gummy;
    color:#1e47b0;
}
/*divider*/
.emoji{
    width:50px;
    height:50px;
}
.banner{
    display:flex;
    width:700px;
    height:200px;
    position:center;
    margin-left:auto; 
    margin-right:auto;
    outline:5px solid #e6e2d7;
}
.divider{
    width:600px;
    position:center;
    margin-left:auto; 
    margin-right:auto;
}
.back{
    width:100px;
    height:50px;
    text-align:center;
    padding:5px;
    outline:5px double #9bbb9f;
    text-decoration:none;
    font-family:Sour Gummy;

}
.back:hover{
    transition:0.3s;
    outline:5px double #261559;
}
/*sona*/
.ccAbout{
    width:400px;
    height:400px;
}
.ccAbout:hover{
    transition:0.3s;
    transform:rotate(10deg) scale(1.05);
}
/*ocs*/
.ocFullbody{
    width:400px;
}
.ocFullbody:hover{
    transition:0.3s;
    transform:rotate(-2deg);
}
.ocContainer{
    display:grid;
    grid-template-columns: auto auto;
    padding-right:10px;
    padding-left:10px;
}
.ocInfo{
    width:200px;
    height:400px;
    outline:2px solid #261559;
    box-shadow:20px 20px 0px #261559;
}
/*ocs but long*/
.ocFullBodyLong{
    width:700px;
}
.ocFullBodyLong:hover{
    transition:0.3s;
    transform:rotate(-2deg);
}
.ocInfoLong{
    display: flex;
    justify-content:space-evenly;
}
.ocTextLong{
    width:200px;
    text-align:center;
}
/* .ocInfoBoxLong{
    width:100px;
    height:120px;
    padding:10px;
    outline:2px solid #261559;
} */

.containerUpdates{
    flex:display;
    position:center;
    display:block;
    margin-left:auto; 
    margin-right:auto; 
    width:700px;
    height:150px;
    outline:5px double #261559;
    overflow:auto;
    padding:2px;
    background-color:#e6e2d7;
}
.containerTotal{
    flex:display;
    position:center;
    display:block;
    margin-left:auto; 
    margin-right:auto; 
    padding:2px;
    width:700px;
    outline:5px double #261559;
    background-color:#e6e2d7;
}
/*select*/
.containerSelect{
    display: grid;
    grid-template-columns: auto auto auto auto;
    padding:10px;
}
.containerSelect div{
    flex:display;
    outline:5px double #261559;
    width:120px;
    height:200px;
    position:center;
    position:center;
    display:block;
    margin-left:auto; 
    margin-right:auto;
    padding:10px;   
}
.containerSelect div:hover{
    transition:0.1s;
    transform:scale(1.03);
}
.selectimg{
    width:120px;
    position:center;
    display:block;
    margin-left:auto; 
    margin-right:auto;
}
.selectLink{
    text-decoration:none;
}
.selectTXT{
    font-size:20px;
    font-family:DotGothic16;
    text-align:center;
    font-style:bold;
    text-decoration:underline wavy;
    color:#27287a;
}
/*about*/
.containerAbout{
    flex:display;
    columns:2;
    position:center;
    display:block;
    margin-left:auto; 
    margin-right:auto; 
    padding:2px; 
}
/*quiz*/
.containerQuiz{
    display:grid;
    grid-template-columns: auto auto;

}
/*blinkies*/
.containerBlinkies{
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    position:center;
    display:block;
    margin-left:auto; 
    margin-right:auto; 
    padding:2px;
    width:700px;
    /*outline:5px double red;*/
}
.blinkie{
    height:20px;
    width:150px;
}
/*thoughts*/
details{
    padding:5px;
    width:650px;
    border-radius:10px;
    outline: 2px double #27287a;
}
summary{
    font-family:Syne Mono;
    font-size:18px;
    padding:5px;
    color:#27287a;
}
.thoughtText{
    background-color:#a8bca2D9;
    padding:10px;
    border-radius:10px;
    color:#081c4c;
}
#thoughts{
    flex:display;
    justify-content:center;
    align-items:center;
}