@font-face {
    font-family: "Dosis";
    src: url("../font/Dosis-Medium.ttf") format("truetype");
}

header
{
    width:1000px;
    height:100px;
    border-color: #5cfbfd;
    border-style:solid;
    border-width:1px;
    margin-top:30px;
    background-image: url("../img/banner.png");
}

hr
{
    height: 1px;
    border: 0;
    border-top-color: #5cfbfd;
    border-top-style:solid;
    border-top-width:1px;
    margin:0px;
}

main
{
    width:1000px;
    border-color: #5cfbfd;
    border-style:solid;
    border-width:1px;
    margin-top:10px;
    height:700px;
    overflow:hidden
}

nav
{
    position:relative;
    bottom:-60px;
    text-align:right;
    vertical-align: text-bottom;
    padding:10px;
    font-family: Dosis, sans-serif;
}

a
{
    color: #5cfbfd;
}

a:visited
{
    color: #5cfbfd;
}

html
{
    display: table;
    margin: auto;
}

body
{
    display: table-cell;
    vertical-align: middle;
    background-color:black;
    color:#CCCCCC;
}

/* LEFT SIDE OF THE PAGE */
/* LEFT SIDE OF THE PAGE */
/* LEFT SIDE OF THE PAGE */
/* LEFT SIDE OF THE PAGE */
/* LEFT SIDE OF THE PAGE */

#leftblock
{
    background-color:black;
    width: 500px;
    height:700px;
    float:left;
}

#terrordata_official
{
    font-family: Dosis, sans-serif;
    padding-left:15px;
    padding-right:30px;
    height:700px;
    overflow-y: auto;
}

h2
{
}

/* RIGHT SIDE OF THE PAGE */
/* RIGHT SIDE OF THE PAGE */
/* RIGHT SIDE OF THE PAGE */
/* RIGHT SIDE OF THE PAGE */
/* RIGHT SIDE OF THE PAGE */

#rightblock
{
    background-color:black;
    width:499px;
    height:700px;
    float:right;
    border-left-style:solid;
    border-left-width:1px;
    border-left-color:#5cfbfd;
}

/* Title of the page that includes the name and Wispy's icon of the terror. */
#terror_title
{
    display:flex;
    font-family: Dosis, sans-serif;
    align-items: center;
    justify-content: center;
    image-rendering: pixelated;
    width:100%;
    height:90px;
    position:relative;
}

#terror_images
{
    display: table-cell;
    width:460px;
    height:180px;
    border-color: #5cfbfd;
    border-style:solid;
    border-width:1px;
    position:relative;
    left:20px;
    font-family: Dosis, sans-serif;
}

#image_screen
{
    width: 319px;
    height:180px;
    background-color:black;
    float:left;
}

#image_screen img
{
    object-fit: contain;
}

#image_selector
{
    width:140px;
    height:180px;
    background-color:black;
    float:right;
    border-left-style:solid;
    border-left-width:1px;
    border-left-color:#5cfbfd;
}

.imagebutton
{
    height:20px;
    width:100%;
    list-style-type: none;
    user-select: none;
    text-align:center;
}

.music
{
    position:absolute;
    border-width:1px;
    border-color:#5cfbfd;
    border-style:solid;
    width:30px;
    height:30px;
}

.dark
{
    background-color:#0A0A0A;
}

.light
{
    background-color:#0F0F0F;
}

.imagebutton:hover
{
    background-color:cyan;
    color:black;
}

.flavor
{
    position:relative;
    bottom:50px;
    text-align:center;
    background-color: rgba(0, 0, 0, 0.5);
    width:100%;
    user-select: none;
    color:#CCCCCC;
}

#difficulty
{
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    gap: 22px;
    margin-top:15px;
    margin-bottom:15px;
    width:80%;
    height:30px;
    font-family: Dosis, sans-serif;
    background-image: url("../img/line.png");
    background-repeat: repeat-x;
    position:relative;
    left:42px;
}

.difficultybox
{
    width:64px;
    height:22px;
    text-align:center;
    background-color:black;
    border-style:solid;
    border-width:1px;
    user-select: none;
}

#tags
{
    font-family: Dosis, sans-serif;
    position:relative;
    user-select: none;
    padding:3px;
    min-height:50px;
    max-height:80px;
}

#tags p
{
    list-style-type: none;
    display:inline-block;
    border-color:#CCCCCC;
    border-width:1px;
    border-style:solid;
    padding:2px;
    margin:2px;
    font-size:12px;
}

.tag:hover
{
    background-color:#091317;
}


#credits
{
    font-family: Dosis, sans-serif;
    position:relative;
    margin-left:15px;
    user-select: none;
}

#terrordata_community
{
    font-family: Dosis, sans-serif;
    padding-left:15px;
    padding-right:15px;
    overflow-y: auto;
    height:310px;
    font-size:13px;
}

li
{
    margin-top:4px;
    margin-bottom:4px;
}


/* Difficulty bs */
/* This is just like the old times. */
.diff_easy
{
    border-color:#5cfbfd;
}

.diff_normal
{
    border-color:#0FFF00;
}

.diff_hard
{
    border-color:#FFFF00;
}

.diff_veryhard
{
    border-color:#FF8100;
}

.diff_insane
{
    border-color:#FF0000;
}

/* Used to fill specific parts of the difficulty meter thingie */
.fill_easy
{
    background-color: #245B5C;
}

.fill_normal
{
    background-color:#053D00;
}

.fill_hard
{
    background-color:#474700;
}

.fill_veryhard
{
    background-color:#2E1800;
}

.fill_insane
{
    background-color:#300000;
}