/* COLOUR SCHEMES */
/*
GALAXY THEME */
:root{
    --darkpur: #9999C7;
    --lipur: #C8BDE0;
    --palepurpi: #E8D9E0;
    --purpblue:#c8ceee;
    --offwhi: #FCFFF7;
    --pi: #DDA4A4;
    --phoneblue: #daeaf6;
    --textbub: #ACC7CB;
    --textbubr: #B7C3D3;

}

/* FONTS */ 
/* =========================================================================================================================== */
/* Fancy Title Page Font */
@font-face {
    font-family: 'Shilla';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/Shilla_CultureB-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

/* Classic Title Font */
@font-face {
    font-family: 'STUNNING-Bd';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2410-2@1.0/STUNNING-Bd.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* Divergence Button Font */
@font-face {
    font-family: 'LeeSeoyun';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2202-2@1.0/LeeSeoyun.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* Clean UI Font */
@font-face {
    font-family: 'Noonnu';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noon-2410@1.0/NoonnuBasicGothicRegular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* Main Font ft. clean~ */
@font-face {
    font-family: 'S-CoreDream';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* IDK Font (ft. text messages? phone ui?) */
@font-face {
    font-family: 'CookieRun';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/CookieRun-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* =========================================================================================================================== */

/* STUFF I DON'T KNOW HOW TO USE */
/* =========================================================================================================================== */
input[type=text]{
    width: 96%;
    padding: 12px;
    margin-top: 2%;
    margin-left: 2%;
    margin-bottom: 0%;
    display: inline-block;
    border: 1px solid gray;
    border-radius: 10px;
    box-sizing: border-box;
    font-family: 'CookieRun';
    font-size: 18px;
  }

/* BIG BODY SELECTORS */
/* =========================================================================================================================== */
html {
    overflow: scroll;
    overflow-x: hidden;
}

a{
    color:beige;
}

iframe{
    margin-top: -750px;
    margin-bottom:1%;
    width: 100%;
    height: 750px;
    min-height: 750px;
    border:none;
}

/* ID'S */
/* =========================================================================================================================== */
/* Glossary Text Formatting */
#glossTxt{
    color: white;
    font-family: 'Noonnu';
    font-size: 25px;
    margin-left: 40%;
    margin-right: 25%;
}

/* Main (Special) Title Formatting */
#titlePage{
    color: azure;
    font-family: 'Shilla';
    text-align-last: center;
    font-size: 10vw;
}

/* Special Entry Button (PORTAL)  */
#portal{
    text-align: center;
    text-decoration: none;
    background-color: var(--darkpur);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15%;
    border-radius: 35px;
    width: fit-content;
}


/* Special Entry Button (PORTAL) Text Formatting */
#portalText{
    font-size: 2vw;
    text-align: center;
    text-decoration: none;
    font-family: 'S-CoreDream';
    color: black;
    width: fit-content;
}

/* Error Div Formatting */
#errorDiv{
    text-align: center;
    text-decoration: none;
}

/* Error Text Formatting */
#errorText{
    color: azure;
    font-family: 'STUNNING-Bd';
    text-align: center;
    font-size: 100px;
    text-decoration: none;
}

/* THIS IS THE DICTIONARY APP BUTTON */
#button1{
    background-color: #E8D9E0;
    border-radius: 5px;
    border-style: solid;
    border-color: black;
    height: 50px;
    width: 50px;
    font-family: 'CookieRun';
    right:0;
}



/* Special Stuff For Scrolls */
::-webkit-scrollbar {
    width: 0;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}


/* CLASSES */
/* =========================================================================================================================== */

/* Centering Items...??? */
.center {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  

/* Starter Background */
.starterBack{
    background-color: black;
}

.storyBackGrad{
    background-image: linear-gradient(to top left, var(--darkpur), var(--purpblue), var(--lipur),var(--palepurpi), var(--pi));
}

.storyBack{
    background-color: #9999C7;
}

.storyBackTwo{
    background-color: #C8BDE0;
}

.storyBackThree{
    background-color: #E8D9E0;
}

.storyBackFour{
    background-color: var(--purpblue);
}

/* Normal Title */
.title{
    color: azure;
    font-family: 'STUNNING-Bd';
    text-align: center;
    font-size: 85px;
}


/* Footer Div */
.footer{
    margin-top: 100px;
}

/* Footer Text Formatting */
.footerIND{
    margin-left: 5%;
}

.logAuth{
    background-color: white;
    color: black;
    font-family: 'S-CoreDream';
    border-radius: 25px;
    padding: 1%;
    width: 25%
}

.logBtns{
    background-color:#C8BDE0;
    color: black;
    font-family: 'S-CoreDream';
    margin: 0.5%;
    border-radius: 10px;
    padding: 1%;
    width: 25%;
}

/* Glossary Title Formatting */
.glossTitle{
    color: azure;
    font-family: 'STUNNING-Bd';
    text-align: center;
    font-size: 200%;
}

/* Glossary Entry Formatting */
.glossEnt{
    color: azure;
    font-family: 'S-CoreDream';
    margin-top: -2%;
    margin-left: 5%;
    font-size: 15px;
}

/* Glossary Note Text Formatting */
.glossNteTxt{
    margin-left: 5%;
    font-size: 20px;
    color:#DDA4A4;
}

/* Classic Text Formatting */
.classicText{
    color: azure;
    font-family: 'S-CoreDream';
    margin-left: 25%;
    margin-right: 25%;
    text-align: center;
    font-size: 25px;
}

.classicTextBl{
    color: black;
    font-family: 'S-CoreDream';
    margin-left: 25%;
    margin-right: 25%;
    text-align: center;
    font-size: 25px;

}

/* Error Div Formattings */
.errorDivs{
    background: red;
    margin-left: 5%;
    margin-right: 30%;
    text-align: center;
}

/* Error Div Text Formatting */
.errorDivText{
    font-family: 'Noonnu';
    color: white;
    padding: 8%;
    font-size: 60px;
}

/* Story Progression Buttons */
.storyProgBun{
    background: #DDA4A4;
    border-radius: 35px;
    border-style: ridge;
    text-align: center;
    padding: 20px;
    margin: 2%;
    margin-left:35%;
    margin-right: 35%;
    text-decoration: none;
}

.storyProgBunTest{
    width: fit-content;
    background: #DDA4A4;
    border-radius: 35px;
    border-style: ridge;
    text-align: center;
    padding: 20px;
    margin: 2%;
    margin-left:auto;
    margin-right: auto;
    text-decoration: none;
}


/* Story Progression Button Text Formatting */
.storyProgText{
    text-align: center;
    font-size: 35px;
    color: black;
    font-family: 'LeeSeoyun';
    text-decoration: none;
}

/* Notification Message Divs */
.notiMsg{
    background-color: #FCFFF7;
    text-align: left;
    border-radius: 5px;
    border-style: solid;
    border-color: black;
    margin-left: 30%;
    margin-right: 30%;
    margin-top: 0%;
}

/* Notification Message Text Formatting */
.notiMsgTxt{
    color: black;
    font-family: 'CookieRun';
    font-size: 25px;
    margin-left: 15px;
    margin-right: 10px;
}

/* Phone Screen Div */
.phnScrn{
    position: relative;
    background-color: #daeaf6;
    text-align: left;
    border-radius: 5px;
    border-style: solid;
    border-color: black;
    margin-left: 30%;
    margin-right: 30%;
    margin-top: 0%;
} 

/* Phone Screen Text Formatting */
.phnScrnTxt{
    color: black;
    font-family: 'CookieRun';
    font-size: 25px;
    margin-left: 15px;
    margin-right: 10px;
}

/* Text Bubble (Left) Container */
.textBubCont{
    margin-right: 35%;
    margin-left: 2%;
    margin-bottom: 1%;
}

/* Text Bubble (Left) Div */
.textBub{
    background-color: var(--textbub);
    text-align: left;
    border-radius: 25px;
    border-style: solid;
    border-width: 1.5px;
    border-color: black;
    margin-left: 2%;
    margin-top: 1%;
    margin-bottom: 3%;
    width: fit-content;
}

/* Text Bubble (Right) Container */
.textBubRCont{
    position: absolute; 
    right: 2%; 
    margin-left: 35%;
}

/* Text Bubble (Right) Div */
.textBubR{
    background-color: var(--textbubr);
    text-align: right;
    border-radius: 25px;
    border-style: solid;
    border-width: 1.5px;
    border-color: black;
    margin-top: 1%;
    margin-bottom: 0%;
    width: fit-content;
}

/* Text Bubble Text Formatting */
.textBubTxt{
    color: black;
    font-family: 'CookieRun';
    font-size: 18px;
    margin-left: 15px;
    margin-right: 15px;
}

/* Text Bubble Text (Del) Formatting */
.textBubTxtDel{
    color: darkslategray;
    font-family: 'CookieRun';
    font-size: 18px;
    margin-left: 15px;
    margin-right: 15px;
}


.txtSpacer{
    text-align: right;
    border-radius: 25px;
    border-style: solid;
    border-width: 1.5px;
    border-color: transparent;
    margin-top: 1%;
    margin-bottom: 1.5%;
    width: fit-content;
}

.txtSpacerTxt{
    color: transparent;
    font-family: 'CookieRun';
    font-size: 18px;
    margin-left: 15px;
    margin-right: 15px;
}

.fullPageSpacer{
    color: transparent;
    margin-top: 50%;
    margin-bottom: 50%;
}

/* THE FORGOTTEN ONES
/* =========================================================================================================================== */
/* Username Input Text Formatting */
/* .username{
    margin-left: 35%;
    margin-right: 35%;
}

#username{
    background-color:beige;
    text-align:center;
    font-family: 'Noonnu';
    font-size: 20px;
}


 */