/* 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: 'Comic';
    src: url('../comic-webfont.woff2') format('woff2'),
         url('../comic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'PGothic';
    src: url('MSP.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-synthesis-weight: none;
}

@font-face {
    font-family: 'coffee';
    src: url('Kenyan Coffee Bd.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-synthesis-weight: none;
}

@font-face {
    font-family: '321 Impact';
    src: url('321impact.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-synthesis-weight: none;
}

@font-face {
    font-family: 'Depxl';
    src: url('depixelhalbfett.woff2') format('woff2'),
         url('depixelhalbfett.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-synthesis-weight: none;
}

@font-face {
    font-family: 'ms-sans';
    src: url('ms-sans-serif-bold.woff2') format('woff2'),
         url('ms-sans-serif-bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-synthesis-weight: none;
}

@font-face {
    font-family: '5thcursive';
    src: url('5thgradecursive-2.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/* Win stuff*/

    .gudcont{
    margin-left:auto;
    margin-right:auto;
    margin-top:5px;
    height:640px;
    width:930px;
    background-color: rgb(212, 208, 200);
  border: 0px;
  padding: 0px;
  position: relative;
  display:block;
    }
    .windiv {
  border: 6px solid transparent;
  padding: 10px;
image-rendering:pixelated;
  border-image: url(winbord.png) 6 round;
  color:white;
  background: linear-gradient(180deg,rgba(0, 0, 0, 1) 0%, rgba(3, 3, 84, 1) 88%);
  width:702px;
  height:476px;
  float:right;
  margin:0;
  overflow-y:scroll;
  font-family: Tahoma, sans-serif;
  font-size:14px;
    }
    .flexton{
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  padding: 0px;
    background:rgba(0,0,0,0);
    margin:0px;
    margin-bottom:1px;
    padding:0px;
    }
    .wintton{
    border: 4px solid transparent;
    border-image: url(btnbro.png) 4 round;
    background-color:#d4d0c8;
    height:31px;
    color:black;
    position:relative;
    font-size:10px;
    text-align:center;
    font-family:Depxl;
image-rendering:pixelated;
    }
    .wintton:hover {
  border-image: url(btnbrsd.png) 4 round;
}      .winside {
  border: 6px solid transparent;
  padding: 2px;
  border-image: url(winbord.png) 6 round;
  image-rendering:pixelated;
  background:black;
  height:492px;
  width:180px;
  float:left;
  margin:0px;
  font-family:'Courier New', monospace;
  font-size:0.6em;
  font-weight:bold;
    }

/* Modal bullshit */

/* The Modal (background) */
.window {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: hidden; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 image-rendering:pixelated;
}

/* Modal Header */
/* the ammount of bullshit I did here is making me want to kill myself */
.window-title {
    padding: 4px;
    background-image: linear-gradient(to right, #000080 , #00002f);;
    color: white;
    z-index:2;
    width:620px;
	margin:0 auto;
	border: 8px solid transparent;
	border-image: url(titlebord.png) 8 round;
    height:24px;
    right:12px;
    position:relative;
	padding-bottom:2px;
	line-height:0px;
	font-family:'ms-sans';
}

.window-body {
border: 12px solid transparent;
padding:8px;
border-top:6px solid transparent;
border-image: url(windowbord.png) 12 round;
width:604px;
right:12px;
height:457px;
overflow-y:scroll;
background: black;
color:white;
position:relative;
background: linear-gradient(180deg,rgba(0, 0, 0, 1) 0%, rgba(3, 3, 84, 1) 88%);
}

/* Modal Content/Box */
.window-content {
	position: relative;
	background-color: #fefefe;
	margin: 60px auto;
	padding: 0;
	height:500px;
	width: 604px;
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.close:active{
content: " (" attr(src) ")";
}

/* Misc */
#paintitblack{
text-decoration:none;
color:black;
}
#btntxt{
margin-bottom:5px;
margin-top:5px;
}
#21st{
margin-bottom:5px;
margin-top:5px;
}
body{
background:black;
image-rendering:high-quality;
}
hr{
color:#aba893;
height:2px;
border-width:0px;
background-color:#aba893;
}

#lyrics{
text-align:center;
}


/* American Idiot modal */
.aiwindow {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: hidden; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 image-rendering:pixelated;
}

.aiclose {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.aiclose:hover,
.aiclose:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Gorillaz modal */

.gorilawin {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: hidden; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 image-rendering:pixelated;
}

.gorclos {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.gorclos:hover,
.gorclos:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Vince modal */

.vincewindow {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: hidden; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 image-rendering:pixelated;
}

.tracklose {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.tracklose:hover,
.tracklose:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* The modal from HELL */

.hellwindow {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: hidden; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 image-rendering:pixelated;
}

.helcls {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.helcls:hover,
.helcls:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* The modal from MELLOWBROOK */

.breakwindow {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: hidden; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 image-rendering:pixelated;
}

.kicklose {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.kicklose:hover,
.kicklose:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}


/* Kart my Tailses */

.tailswindow {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: hidden; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 image-rendering:pixelated;
}

.tailclose {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.tailclose:hover,
.tailclose {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* The racist window (it likes to race) */

.ddwin {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: hidden; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 image-rendering:pixelated;
}

.dlose {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.dlose:hover,
.dlose {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* THE ZOMBIES ARE BACK */

.zewin {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: hidden; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 image-rendering:pixelated;
}

.cloze {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.cloze:hover,
.cloze {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* I wonder how he eats without a mouth */

.fpawin {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: hidden; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 image-rendering:pixelated;
}

.flose {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.flose:hover,
.flose {
  color: black;
  text-decoration: none;
  cursor: pointer;
}