@import url('https://fonts.googleapis.com/css2?family=Archivo&family=Roboto:wght@300&display=swap');

* {
  padding:0;
  margin:0;
  border:none;
}

body {
  font-family: Archivo, sans-serif;
  overflow:hidden;
}

/* ---------text styling--------- */
h2 {
  text-transform: uppercase;
  font-size: 2.5rem;
  font-family: Roboto, sans-serif;
  padding: 0 2.5px 0 2.5px;
}
h3 {
  text-transform: uppercase;
  font-size: 1.5rem;
  font-family: Roboto, sans-serif;
  padding: 0 2.5px 0 2.5px;
}
h4 {
  text-transform: uppercase;
  font-size: 0.9rem;
  font-family: Roboto, sans-serif;
  line-height: 2.5;
  margin: 0 15px 0 15px;
}
p {
  font-size: 0.9rem;
  font-family: Archivo, sans-serif;
  line-height: 1.3;
  padding: 0 2.5px 0 2.5px;
  max-width: 310px;
}

/* ---------Top Navbar styling--------- */
#nav-div {
  position: absolute;
  top: 0;
  left: 0;
  width:100vw;
  background-color: #24211D;
  font-family: Roboto, sans-serif;
  color: white;
  display: inline;
}
#nav-logo {
  float:left;
  line-height: 40px;
  font-family: Roboto;
  margin-left: 5px;
  font-size: 180%;
  margin-right: 10px;
}
#nav-menu {
  width:310px;
  float:right;
  line-height: 40px;
}
#nav-div a {
  text-decoration: none;
  color: inherit;
  transition: all 0.3s;
}
#nav-div li {
  text-transform: uppercase;
  float: right;
  margin-right: 10px;
  display: inline;
  list-style: none;
  color: white;
  transition: all 0.3s;
}

#nav-div li:hover {
  color:black;
  background-color: #D9D9D9;
  font-size: 105%;
  padding-left: 5px;
  padding-right: 5px;
}


/* ---------page content display area styling--------- */
#page-container {
  width:100vw;
  background-color:#D9D9D9;
  position: absolute;
  top: 40px;
  left: 0;
  bottom: 40px;
  overflow-y:scroll;
  overflow-x:hidden;
}
.page {
  min-height:95vh;
  width:100%;
}

.page-title-container {
  width:100%;
}
.page-title {
  float:right;
  width: 55%;
  text-align: left;
  margin-top: 20px;
  border-top: 2px solid;
  min-width: 310px;
}
.page-title p {
  text-align: left;
  width: 55%;
  text-align: left;
  min-width: 310px;
  height:100px;
}

a {
  text-decoration: none;
  color: inherit;
}

footer {
  color: #D9D9D9;
  position:absolute;
  bottom:0;
  left:0;
  width:100vw;
  height: 40px;
  background-color: #24211D;
}
#footer-left {
  text-align: right;
  float: left;
  height: 100%;
  width: 50%;
  transition: all 0.3s;
}
#footer-right {
  float: right;
  height: 100%;
  width: 50%;
  transition: all 0.3s;
}
#footer-right:hover {
  color: black;
  background-color: #D9D9D9;
}
#footer-left:hover {
  color: black;
  background-color: #D9D9D9;
}
/* Scrollbar style for Firefox */
* {
  scrollbar-width: thin;
}

/* Scrollbar style for Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width:5px;
  visibility: hidden;
}

*::-webkit-scrollbar-track {
  visibility: hidden;
}

*::-webkit-scrollbar-thumb {
  background-color:#24211D;
  width:2px;
  height:40px;
}


/* ---------page content styling, intro section--------- */
#intro {
  background-color: #D9D9D9;
}
#intro #left {
  width:50%;
  min-width: 320px;
  height:100%;
  min-height: 95vh;
  background-image: url(../images/itachiheader.png);
  background-repeat: no-repeat;
  background-size:contain;
  background-position:bottom right;
}
#right {
  width: 50%;
  min-width: 310px;
  border-top: 2px solid black;
  margin-top: 150px;
  float:right;
  display: inline;
  background-color:rgba(217, 217, 217, 0.95);
}
#right #textbox-right {
  color:black;
  float:left;
  width: 310px;
}

/* ---------page content styling, about section--------- */
#about-itachi {
  background-color:#24211D;
  text-align:center;
  color:#D9D9D9;
}
#about-itachi-container{
  margin: auto;
  width: 100%;
  max-width: 1630px;
}
.video-card {
  margin:0 auto 20px auto;
  display:inline-block;
  padding: 2px;
  border-radius: 3px 3px 20px 3px;
  color:#24211D;
  background-color:#D9D9D9;
}
.iframe-wrapper {
  width:420px;
  height:236.25px;
  float: right;
}
iframe {
  width:420px;
  height:236.25px;
  float: right;
  border-radius: 0 3px 20px 0;
  filter: grayscale(50%);
}
iframe:hover {
  filter: grayscale(0%);
}
.about-textbox {
  float:left;
  width: 310px;
  text-align: left;
  padding-left: 3px;
}

/* ---------page content styling, episodes section--------- */
#episodes {
  background-color: #D9D9D9;
  color: #24211D;
}
#left-table-container {
  float: left;
  color: #D9D9D9;
  width:100%;
}
#right-table-container {
  float: left;
  color: #D9D9D9;
  width:100%;
}
table {
  text-align: left;
  padding: 10px;
  margin: 10px auto;
  max-width: 785px;
  background-color: #921501;
  border-radius: 3px 3px 20px 3px;
}
.table-head {
  text-transform: uppercase;
  font-size: 2rem;
  font-family: Roboto, sans-serif;
  padding-left: 15px;
  padding-bottom: 5px;
}
table th{
  text-align: left;
  vertical-align: bottom;
  padding-left: 15px;
}
table td{
  text-align: left;
  vertical-align: top;
  padding-left: 15px;
  padding-top: 10px;
  font-size: 0.9rem;
  font-family: Archivo, sans-serif;
  line-height: 1.3;
  color: white;
}

@media screen and (max-width:624px) {
  #page-container {
    top:80px      
  }
  #nav-logo {
    width: 100%;
    text-align: right;
  }
  #nav-logo h1 {
    margin-right: 10px;
  }
}

@media screen and (max-width:562px) {
  #right {
    width: 305px;
    border: 2px solid #24211D;
    border-radius: 3px 0 20px 3px;
    margin-top: 300px;
  }
}

@media screen and (max-width:760px) {
  .iframe-wrapper {
    width:280px;
    height:157.5px;
  }
  iframe {
    width:280px;
    height:157.5px;
  }
}

@media screen and (max-width:602px) {
  .video-card {
    width: 305px;
  }
  iframe {
    border-radius: 3px 3px 0 0;
    width: 100%;
  }
  .iframe-wrapper {
    width: 100%;
  }
}