:root {
    --head: "terminal_grotesque";
    --body: "Barecast";

    --maincolor: #ffffff;

    --accent1: #294FDB;
    --accent2: #8391ED;
    --accent3:#D0C0FF;
    --accent4: #A493D9;
    --light: #E1EDDE;
    --dark: #353B67;
    --white: #f3f2f2;
    --borderradius: 15px;
}

@font-face {
    font-family: 'terminal_grotesque';
    src: url('/fonts/terminal-grotesque-webfont.eot');
    src: url('/fonts/terminal-grotesque-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/terminal-grotesque-webfont.woff2') format('woff2'),
         url('/fonts/terminal-grotesque-webfont.woff') format('woff'),
         url('/fonts/terminal-grotesque-webfont.ttf') format('truetype'),
         url('/fonts/terminal-grotesque-webfont.svg#terminal_grotesqueregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'Barecast';
  src: url('/fonts/Barecast-Regular.woff2') format('woff2');
  font-weight: 400;
}

@font-face {
  font-family: 'Barecast';
  src: url('/fonts/Barecast-Thin.woff2') format('woff2');
  font-weight: 100;
}

body{
    font-family:var(--body);
    background-color:var(--light);
    padding:20px;
    color:var(--dark)
}


@media (max-width: 820px) {
    .dropdown{
    display:none;
    }

    #mobilenav {
        display:flex;
        flex-direction: column;
        flex-wrap: wrap;
        text-align: center;
        width:100%;
    padding: 0px 10px 5px 10px;
    line-height: 110%;
    }
    #mobilenav p{
        margin: 5px;
        border: 1px solid var(--accent1);
        padding:2px;
    }
    #mobilenav a{
            text-decoration: underline;
    }
     #mobilenav a:hover{
    color:#8391ED;
    }
    #leftcolumn{
        display:none;
    }
    .mobilesidebar{
        display:block;
    }
    .mainsub2{
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap:10px;
    text-align: center;
    }
    .timeline{
    position: relative;
    text-align: center;
    transition: .3s;
    gap:15px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    }
}

@media (min-width: 821px) {
    .mobilesidebar{
        display:none;
    }
    .mainsub2{
    display: flex;
    flex-direction: row;
    padding: 10px;
    gap:10px;
}
.timeline{
    position: relative;
    text-align: center;
    transition: .3s;
    gap:15px;
    display: flex;
}
#mobilenav{
        display:none;}
}


#containerone{
 max-width: 900px;
 margin: auto;

}

.pagecontent{
    display: flex;
    flex-direction: row;
}

#maincontent{
    padding:10px;
    width:100%;
}

.mainsub{
    padding: 10px;
    gap:10px;
    margin:auto;
}



#leftcolumn{
    width:340px;
    padding: 10px;
    text-align: center;
}




.charactercontainer{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin:auto;
    justify-content: center;
    max-width:500px
}

.characterindv{
    height:200px;
    width:200px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin:auto;
}

#CH1{
    background-image: url("/img/zinni_idle.png");
    transition: .2s;
}

#CH1:hover{
    background-image: url("/img/zinni_hover.gif");
    position:relative;
}

#CH2{
    background-image: url("/img/");
    transition: .2s;
}

#CH2:hover{
    background-image: url("/img/");
    position:relative;
}

.icon{
    margin:auto;
    text-align: center;
    border-radius: 2%;
    background-color: var(--light);
    aspect-ratio: 1;
    overflow: hidden;
    max-width: 140px;
    align-content: center;
    text-align: center;
    z-index: 5;
}

.icon img{
    display:cover;
    height:100%;
    z-index: 10;
}

.status{
    margin:auto;
    text-align: center;
    min-height:60px;
    width:300px;
    padding:15px;
    align-content: center;
    position: relative;
    z-index: 1;
    border-image: url('/img/9 slice.png') 27 26 17 29 fill / 27px 26px 17px 29px;
padding: 27px 26px 17px 29px;
}

#statuscafe, #statuscafe2 {
    color:var(--dark);
}
#statuscafe-username, #statuscafe-username2 {
    font-size: 12pt;
    font-family: var(--head);
    font-weight: 400;
    color:var(--light);
    margin:auto;
    background-color: var(--accent1);
    border-radius:var(--borderradius);
}

iframe{
    border:1px solid var(--accent1);
}

header{
    position: relative;
    height:250px;
    font-family: var(--head);
    background-image:url('/img/siteheader2.png');
    background-size: cover;
    background-position-y: center;
    background-position-x: left;
    background-repeat: no-repeat;
    border-image: url('/img/9 slice-3.png') 14 14 10 14 fill / 14px 14px 10px 14px;
    padding: 14px 14px 10px 14px;
}

.home{
    background-image:url('/img/homeicon-idle.png');
    height:32px;
    width:32px;
    background-repeat: no-repeat;
    background-position: center;
    object-fit: contain;
    transition: .4s;
    position: absolute;
    left:20px;
    top:20px;
}

.home:hover{
    background-image:url('/img/homeicon-hover.png');
    transform: translateY(4px);
    cursor:pointer;

}

nav{
    display: flex;
    width:300px;
    float:right;
    gap:20px;
    align-items: center;
}

navitem{
    margin:auto;
    width:120px;
    padding: 0 20 0 20;
    align-content: center;
    align-items: center;
    text-align: center;
    color: var(--light);
    font-size: 1.2rem;
    font-weight: 400;
    cursor: default;
    background-color:#294FDB;
    border-radius: 20px;
    height:32px;
    transition: .2s;
    border-image: url('/img/9 slice-3.png') 14 14 10 14 fill / 14px 14px 10px 14px;
    padding: 14px 14px 10px 14px;
    height:60px;
}


navitem:hover{
    transition: .2s;
    color:var(--accent3);
    background-image: url('/img/highlightpattern-export.gif');
    background-blend-mode: soft-light;
    transform: translateY(4px);
}

navitem a{
    transition: .2s;
    
}

navitem a:visited{
    color:var(--light);
    transition: .2s;
}


/* The dropdown container */
.dropdown {
    position: relative;
    align-content: center;
  }

  /* Dropdown button */
  .dropdown .dropbtn {
    font-family: inherit; /* Important for vertical align on mobile phones */
    margin: 0; /* Important for vertical align on mobile phones */
}

  .dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--accent1);
    color:var(--light);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    font-size: var(--dropdownfontsize);
    font-weight: 400;
    margin: auto;
    width: 120px;
    border-image: url('/img/9 slice-3.png') 14 14 10 14 fill / 14px 14px 10px 14px;
    padding: 14px 14px 10px 14px;
    top:50px;
    left:0px;
    border-radius:15px;
  }

  .dropdown:hover .dropdown-content {
    display: flex;
    flex-direction: column;
  }
  .dropdown-content a{
    color:var(--light);
    text-decoration: none;
    transition: 0s;
  }

  .dropdown-content a:visited{
    color: var(--light);
  }

  .dropdown-content a:hover {
    color: var(--accent3);
    background-image: url('/img/highlightpattern-export.gif');
    background-blend-mode: soft-light;
    background-color: #294FDB;
    border-radius:10px;
  }

  .dropdown-content a {
    padding: 8 0 8 0px;
  }

    footer{
        width:100%;
        margin: auto;
        align-items: center;
        border-bottom-left-radius: 25px;
        border-bottom-right-radius: 25px;
        }

.innerfooter{
    display: flex;
    flex-direction: column;
    margin-top: 40px;
    margin: auto;
    padding: 20px;
    align-content: center;
    }

.socials{
    align-content: center;
    display: flex;
    flex-direction: row;
    margin: auto;
}

.socials-icn{
    background-color: var(--accent1);
    border-radius: 100px;
    height:36px;
    width:36px;
    margin:0 5 0 5;
    transition:.3s;
    align-content: center;
    text-align: center;
}

.socials-icn:hover{
opacity: .8;
transform: scale(110%);
}

.socials-icn img{
    object-fit:contain;
    margin: auto;
    height:20px;
}


iframe{
margin: auto;
border-image: url('/img/9x9border.png') 8 8 8 8 fill / 8px 8px 8px 8px;
padding: 4px 4px 4px 4px;
border-radius:8px;
}

button, input[type=submit]{
    min-height:20px;
    background-color: var(--accent2);
    color:var(--light);
    margin-left: auto;
    margin-right: auto;
    display:flex;
    border-radius: 16px;
    border-image: url('/img/9 slice-3.png') 14 14 10 14 fill / 14px 14px 10px 14px;
    padding: 14px 14px 10px 14px;
    align-content: center;
    transition: .3s;
    box-shadow: 0px 8px 0px var(--accent1);
    font-size: 1.3rem;
    margin-bottom:20px;
    margin-top:10px;
    text-align: center;
    padding-right:20px;
    padding-left:20px;
    font-family: var(--head);
}

a:link{
    text-decoration: none;
}


button:hover, input[type=submit]:hover{
    background-color: var(--accent1);
    background-image: url('/img/highlightpattern-export.gif');
    background-blend-mode: soft-light;
    box-shadow: 0px 4px 0px var(--accent1);
    transform: translateY(4px);
    cursor:pointer;
}


h1{
    font-family: var(--head);
    color:var(--accent1);
    margin-top: 20px;
    margin-bottom: 10px;
    text-align: left;
    font-weight: 400;
    background-image: url('/img/closebutton-export.png');
    background-repeat: no-repeat;
    background-position: right;
    align-content: center;
    padding-left: 20px;
    border-image: url('/img/9 slice-3.png') 14 14 10 14 fill / 14px 14px 10px 14px;
    padding: 14px 14px 10px 14px;
}

h2{
    font-family: var(--head);
    color:var(--accent1);
    margin-top: 20px;
    margin-bottom: 10px;
    text-align: left;
    font-weight: 400;
    background-image: url('/img/closebutton-export.png');
    background-repeat: no-repeat;
    background-position: right;
    align-content: center;
    padding-left: 20px;
    border-image: url('/img/9 slice-3.png') 14 14 10 14 fill / 14px 14px 10px 14px;
    padding: 14px 14px 10px 14px;
}

h3{
    font-family: var(--head);
    color:var(--accent1);
    margin-top: 20px;
    margin-bottom: 10px;
    text-align: left;
    font-weight: 400;
    background-image: url('/img/closebutton-export.png');
    background-repeat: no-repeat;
    background-position: right;
    align-content: center;
    padding-left: 20px;
    border-image: url('/img/9 slice-3.png') 14 14 10 14 fill / 14px 14px 10px 14px;
    padding: 14px 14px 10px 14px;
}

h3::before{
    content:"☆ ";
    color:var(--accent2);
}

h3::after{
    content:" .ext";
    color:var(--accent2);
}




#pagecalendar{
    margin:auto;
    position: relative;
    width:300px;
    margin-top: 20px;
}

#calendar{
    background-color: var(--accent3);
    font-family: var(--head);
}

 :where(#calendarHeader, .calendarDayOfTheWeek, .calendarCell) {
                box-sizing: border-box;
                display: flex;
                justify-content: center;
                align-items: center;
                color: var(--dark);
                cursor: default;
                user-select: none;
                background-color:var(--white);
                border-radius: 5px;
            }
            #calendarHeader{
                                background-color:var(--accent1);
                                color:var(--light);
                                border-image: url('/img/9 slice-3.png') 14 14 10 14 fill / 14px 14px 10px 14px; 
                padding: 14px 14px 10px 14px;
                border-radius: 18px;
                height:36px;
                font-size: 1.2rem;
                text-transform:lowercase;
            }
            :where(#calendar) {
                box-sizing: border-box;
                display: grid;
                grid-template-rows: 1.25fr 7fr;
                width: 300px;
                border-image: url('/img/9 slice-3.png') 14 14 10 14 fill / 14px 14px 10px 14px; 
                padding: 14px 14px 10px 14px;
                border-radius: 18px;
                padding: 10px;
                gap: 5px;
                font-size: 1rem;
                font-family: nanum pen script;
            }
            :where(#calendarGrid) {
                box-sizing: border-box;
                display: grid;
                grid-template-columns: repeat(7, 1fr);
                gap: 3px;
            }
            :where(.calendarDayOfTheWeek) {background-color: var(--accent3);}
            :where(.calendarNonMonthDay) {color: var(--accent2);}
            :where(.calendarToday) {
                background-color: var(--accent1);
                color: var(--white)}


.border{
    border-image: url('/img/9 slice-3.png') 14 14 10 14 fill / 14px 14px 10px 14px;
    padding: 14px 14px 10px 14px;
}


/* timeline */

.circle{
    width:50px;
    height:50px;
    margin:auto;
    text-align: center;
    background-color: var(--accent2);
    box-shadow: 0px 4px 0px var(--accent1);
    border-radius: 100%;
    border: 2px solid var(--accent1);
    transition: .3s;
    align-content: center;
    font-size: 22px;
    color: var(--light);
}

.TLpoint:hover .circle{
    scale: 110%;
    background-color: var(--accent1);
    background-image: url('/img/highlightpattern-export.gif');
    background-blend-mode: soft-light;
    box-shadow: 0px 4px 0px var(--accent1);
    transform: translateY(4px);
    color: var(--accent3);
}

.TLpoint{
    text-align: center;
    margin:auto;
}

li{
    margin-bottom: 10px;
}

ul{
    max-width: 600px;
    margin:auto;
}


.quicklinks{
    align-content: center;
    gap:5px;
    justify-content: center;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: auto;
    padding:20px;
}

.linksbtn{
    display: block;
    width:100%;
    color:var(--light);
    align-content: center;
    margin-bottom:20px;
    text-align: center;
    padding-right:20px;
    padding-left:20px;
    letter-spacing:1;
}

.center{
    text-align:center;
}