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

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

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



.container {  
  display: grid;

  padding: 20px;

  grid-template-columns: 225px 4fr 1fr;
  grid-template-rows: 150px 265px 1fr 60px;
  grid-auto-rows: 1fr;
  gap: 15px 15px;
  grid-auto-flow: row;
  grid-template-areas:
    "head main main"
    "nav main main"
    "nav main main"
    "none foot foot";

  align-items: start;
  align-content: start;
}

.foot {
  grid-area: foot;

  border-color: beige;
  border-style: solid;
  border-width: 5px;

  height: 60px;

  margin: 20px;

  text-align: right;
  padding: 10px;
  background-color: rgb(40, 24, 24);
}

.head { 
  grid-area: head;

  border-color: beige;
  border-style: solid;
  border-width: 5px;

  font-size: 13px;

  position: fixed;

  height: 150px;

  text-align: center;

  margin: 20px;

  background-color: rgb(40, 24, 24);
}



.main { 
  grid-area: main; 

  border-style: solid;
  border-width: 5px;
  border-color: crimson;

  scrollbar-color: crimson black;

  padding: 20px;
  margin: 20px;
}

.nav { 
  grid-area: nav; 

  border-color: beige;
  border-left-style: solid;
  border-width: 5px;

  top: 250px;

  position: fixed;

  margin: 20px;

  background-image: url('../images/space.png');
  background-position: top center; 
  background-color: rgb(40, 24, 24);

}





.profiles {
  display: grid;

  padding: 15px;

  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr 1fr 1fr;
  gap: 15px 15px;
  grid-auto-rows: 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "pone ptwo"
    "pthree pfour"
    "pfive psix";

  justify-items: center;


}

.pone {
  grid-area: pone;
}
 .ptwo {
  grid-area: ptwo;
}
 .pthree {
  grid-area: pthree;
}
 .pfour {
  grid-area: pfour;
}
 .pfive {
  grid-area: pfive;
}
 .psix {
  grid-area: psix;
}
 .pseven {
  grid-area: pseven;
}
 .peight {
  grid-area: peight;
}
 .pnine {
  grid-area: pnine;
}

/*YOU ARE NOW LEAVING THE GRID ZONE */

html {
  scrollbar-color: crimson black;
}

body {
  background-color: black;
  color: white;
  font-family: verdana;
  
}

.profile {
  width: 200px;

  float: left;

  border-color: crimson;
  border-style: solid;
  border-width: 5px;

  padding: 10px;
  margin: 10px;

  text-align: center;

  background-color: rgb(40, 24, 24);
}

.updates {
  border-color: crimson;
  border-style: solid;
  border-width: 5px;

  max-width: 50%;
  max-height: 300px;

  overflow: scroll;
  
}


/*NAVIGATION CENTER*/

.button {
  background-color: seashell;
  border: solid;
  border-color: crimson;
  padding: 10px 15px 10px 15px;
  font-family: "scribble";
  font-size: large;

}

.button:hover {
  background-color: black;
  color: white;
}

a:link {
  text-decoration: none;
  color: black;
}

a:visited {
  color: black;
}

/*LISTS*/

ul.navul {
  list-style-type: none;
}

li {
  margin-top: 30px;
}

/* MAIN PAGE STUFF */

img.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  margin-top: 75px;
  margin-left:20px;
  transform: scaleX(-1) scaleY(-1);

}

img.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 30%;
}

h1,h2,h3 {
  font-family: "scribble";
}

hr {
  border: 3px solid crimson;
}

.scroll {
  border: 3px solid crimson;
  overflow: hidden;
  max-width: 200px;
}
 .scrollimage {
  position: relative;
  left: 400px;
  width: 1000px;
  animation: slide 60s linear infinite;
  animation-duration: 15s;
}



@keyframes slide {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-1400px, 0, 0); /* The image width */
  }

}



input { display: none;}                /* hide radio buttons */
input + label { 
    display: inline-flex;
    padding: 10px 40px;
    
    color: black;
    background-color: white;
    flex-flow: row wrap;
    border: 3px solid crimson;
    font-family: "scribble";
} 

input ~ .tab { display: none }          /* hide contents *//* show contents only for selected tab */
input:checked + label {
    color: white;
    background: black;
    
    
}
input:hover + label {
    color: white;
    background: black;
    
}

#tab1:checked ~ .tab.content1,
#tab2:checked ~ .tab.content2,
#tab3:checked ~ .tab.content3,
#tab4:checked ~ .tab.content4
{ 
    display: block; 
    padding: 10px;
    
    
}