@font-face {
  font-family: 'bad-gong';
  src: url('/assets/fonts/bad-gong.ttf');
}

@font-face {
  font-family: 'coolest';
  src: url('/assets/fonts/coolest.ttf');
}

@font-face {
  font-family: 'rumburak';
  src: url('/assets/fonts/Rumburak.ttf');
}

@font-face {
  font-family: 'killbaby';
  src: url('/assets/fonts/killbaby.ttf');
}

@font-face {
  font-family: 'arcade';
  src: url('/assets/fonts/arcade.ttf');
}

@font-face {
  font-family: 'comic-sans-extra';
  src: url('/assets/fonts/comic-sans.ttf');
}

body{
  margin:0;
  font-family:sans-serif;
  background-color: rgb(0, 162, 255);
  background-image: url("/assets/images/water.jpg");
  height: 100%

}

.outer{
  width: 80vw;
  margin: auto;
  padding: 20px 0;
}

.inner{
  border-radius: 25px;
}

.banner{
  display:grid;
  grid-template-columns: 115px 260px 1fr;
  align-items:center;
  background-color: rgba(173, 216, 230, 0.203);
  border-radius: 25px;
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  padding-bottom: 0;
  
  
}

.banner-img{
  align-self: end;
  width: 100px;
  height: 100px;
  margin-left: 15px;
  z-index: 1;
}

.banner-text{
  width: auto;
  height: 80px;
}

.layout{
  /* height: 100vh; */
  display:grid;
  grid-template-columns:20% 1fr 20%;
  grid-template-rows: 1fr;
  /* border: 2px solid red; */
  align-items: start;
}


.nav-container{
  background-image: url("/assets/images/paper.jpg");
  border-radius: 25px;
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  grid-row: 1;
  /* align-self: start; */
}

.nav-container h2{
  font-family: 'bad-gong';
  color: red;
  font-size: 2.5rem;
  margin-top: 0;
  margin-bottom: 0;
}

.nav ul{
  list-style: none;
  padding-left: 10px;
}

.nav li {
  font-size: 1.5rem;
  font-family: 'rumburak';
  margin-bottom: 10px;
}

.nav li::before {
  content: "*";
  padding: 0;
  margin: 0;
  font-family: "bad-gong"; /* set font here */
  font-size: 2rem;
  color: gold;
}

.left-side{
  display: grid;
  grid-column: 1;
  grid-row: 1;
  z-index: 2;
}

.left-side > div{
  background-color: white;
  border-radius: 25px;
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
}

.right-side{
  display: grid;
  grid-column: 3;
  grid-row: 1;
}

.right-side > div{
  background-color: white;
  border-radius: 25px;
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
}

.clicked {
  color: #551A8B;
}

main{
  background-color: white;
  border-radius: 25px;
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  /* justify-self: center; */
  grid-column: 2;
  grid-row: 1;

}

.home-main{
  background-color: rgba(255, 255, 255, 0);
  border: none;
  padding: 0px;
  margin: 10px;
}

.main-sub{
  background-color: white;
  border-radius: 25px;
  border: 1px solid black;
  padding: 10px;
  margin-bottom: 10px;
  /* justify-self: center; */
}

.main-content{
  text-align: center;
}


.main-content ul {
  display: inline-block;
  text-align: left;
}


.menu-toggle{
  margin-left: auto;
  display:none;
  background:none;
  border:none;
  font-size: 1.2rem;
  font-family: 'rumburak';
  color: rgb(0, 0, 0);
  text-shadow:
    -1px -1px 0 white,
     1px -1px 0 white,
    -1px  1px 0 white,
     1px  1px 0 white;
}

.menu-toggle p{
  margin: 0;
  padding: 0;
}

.right-side .single-countdown{
  display: grid;
  place-items: center;
  background: none;
  border: none;
}

.right-side .single-countdown div{
  text-align: center;
  background: none;
  border: none;
  margin: 0;
  padding: 0;
}

.cd-text p, .cd-text span{
  font-family: 'killbaby';
  font-size: 1rem;
  color: rgb(255, 179, 0);
  margin-top: 0;
}

.release a {
  font-family: 'killbaby';
  font-size: 1rem;
  color: rgb(255, 179, 0);
}

#bad-letter{
  font-size: 1.8rem;
}

.center{
  text-align: center;
}

.username {
  font-family: 'coolest';
  color: rgb(55, 144, 240);
  text-decoration: none;
}

.login-grid{
  grid-row: 2
}

#index-video{
  border: 1px black;
  border-radius: 25px;
  max-width: 100%;
}

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

.image-grid img{
  width: 100%;
  height: 100%;
}

.obs {
  font-weight: bold;
}

.visit-elin{
  font-family: "coolest";
  color: red;
}