/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@font-face {
font-family: Consolas;
src: url(https://p3trish0re.neocities.org/fonts/Consolas-Regular.ttf);
}

   
@font-face {
  font-family: oceanside;
  src: url(https://p3trish0re.neocities.org/fonts/oceanside.ttf);
}

@font-face {
font-family: arco;
src: url(https://p3trish0re.neocities.org/fonts/arco.ttf);
}

* {
  cursor: url('https://cdn.cursors-4u.net/css-previews/cute-line-smiley-85dba348-css.webp') 0 0, auto !important;
}

   
:root {
  --bg: #edf6f9;
  --text: black;
  --box-bg: #D0E2E1 ;
  --box-bg2: #CFDEE1;
  --box-border: 2px ;
  --box-border-style: dotted;
  --box-border-color: #A4C0C2;
  --title-bg: #AFC4CB;
  --title-color: #7B9BAC;
  --button-bg: #edf6f9;
  --button-color: #A4C0C2;
  --header-name-color: #56788A;
}

.hal-theme {
  --bg: #272727;
  --text: red;
  --box-bg: #1E1B1B ;
  --box-border: 2px ;
  --box-border-style: dotted;
  --box-border-color: #4F0000;
}

.miku-theme {
  --bg: #CCD9DD;
  --text: white;
  --box-bg: #85BFB4 ;
  --box-border: 2px ;
  --box-border-style: dotted;
  --box-border-color: white;
  }

body {
  background-color: var(--bg);
  color: var(--text);
}

.container{
  width: 1100px;
  margin-left: auto;
  margin-right: auto;
  border: var(--box-border);
  border-style: var(--box-border-style);
  border-color: var(--box-border-color);
  background-color: var(--box-bg);
  padding: 10px;
  font-family: Consolas;
  font-size: 14px;
}

.header {
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  border: var(--box-border);
  border-style: var(--box-border-style);
  border-color: var(--box-border-color);
  background-size: cover;
}

.headerimg {
  background-image: url("https://p3triimages.carrd.co/assets/images/image03.jpg?v=5efd0687")
}

.nameheader {
  padding-left: 10px;
  padding-top: 40px;
  font-size: 50px;
  font-family: arco;
  color: var(--header-name-color);
}

.grid1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  column-gap:10px;
}

.grid2 {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.grid3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap:10px;
}

.invisiblecontainer {
}

.pfpcontainer {
  width: 150px;
  height: 150px;
  border: var(--box-border);
  border-color: var(--box-border-color);
  border-style: var(--box-border-style);
  background-size: cover;
}

.imgpfp {
  background-image: url("https://p3triimages.carrd.co/assets/images/image04.jpg?v=980a4b9e");
}

.titlebar {
  height: 30px;
  margin-left: auto;
  margin-right: auto;
  border: var(--box-border);
  border-style: var(--box-border-style);
  border-color: var(--box-border-color);
  background-color: var(--title-bg);
  color: var(--title-color);
  display: flex;
  align-items: center;
  padding-left: 10px;
  font-family: Consolas;
  font-size: 14px;
}

.navbutton {
  height: 30px;
  margin-left: auto;
  margin-right: auto;
  border: var(--box-border);
  border-style: var(--box-border-style);
  border-top: none;
  border-color: var(--box-border-color);
  background-color: var(--button-bg);
  color: var(--button-color);
  display: flex;
  align-items: center;
  padding-left: 10px;
  font-family: Consolas;
  font-size: 14px;
}

.logbutton {
    height: 30px;
  margin-left: auto;
  margin-right: auto;
  border: var(--box-border);
  border-style: var(--box-border-style);
  border-top: none;
  border-color: var(--box-border-color);
  background-color: var(--box-bg2);
  display: flex;
  align-items: center;
  padding-left: 10px;
  font-family: Consolas;
  font-size: 14px;
}
.space {
  height: 10px;
}

.textdiv {
  margin-left: auto;
  margin-right: auto;
  border: var(--box-border);
  border-style: var(--box-border-style);
  border-color: var(--box-border-color);
  background-color: var(--box-bg2);
  margin-bottom: 10px;
  display: flex;
  padding: 5px;
  text-align: justify;
  font-family: Consolas;
  font-size: 14px;
}

.textsimple {
  padding: 10px;
  font-family: Consolas;
  font-size: 14px;
}