@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300&family=Poppins:ital,wght@0,400;0,600;1,300;1,400;1,500&family=Righteous&display=swap');
/*Code for header*/
/*header {
    z-index: 10;
    position: absolute;
}*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
  background-color: lightcyan;
      body {
          font-size: 20px;
          font-style: normal;
      }
}

header {
    background-color: #0B745C;
    color:gold;
}
.header {
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
}

.container-fluid {
    display: flex;
    justify-content: space-around;
    float: right;
    align-items: left;
}
nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li {
    display: inline-block;
    margin-left: 70px;
    padding-top: 28px;
    position: relative;
}

nav a {
    text-decoration: none;
    text-transform: uppercase;
    font-size: 14px;
    color: black;
    padding: 5px, 20px;

}

nav a:hover {
    color: black;
}

nav a::before {
    content: '';
    display: block;
    height: 5px;
    background-color: black;
    position: absolute;
    top: 0;
    width: 0;
    transition: all ease-in-out 250ms;
}

nav a:hover::before {
    width: 100%;
}

.content {
    max-width: 500;
    margin: auto;
    background-color:lightcyan;
    padding: 10px;

}

.content h1,
h2,
p,
ul {
    text-align: center;
}

.iframe-container iframe {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 60%;
}
.logo {
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 40px;
}
#logo{
  font-size:50px;
}
#brand{
  height: 80px;
  width: 80px;
}


    .container {
        background: url("../images/skin.jpg");
        padding:20px;

    }

/*Code for Navigation bar*/
#instructions, #play{
  font-size: 30px;
  margin-right:100%;
  color:#F7BB0E;
  font-size:
}
/*code for start and reset button*/
#start-btn{
  background-color: #05769C;
  height: 50px;
  width: 140px;
  color:white;
}
#reset-btn{
  background-color: #05769C;
  height: 50px;
  width: 140px;
  margin-left: 87%;
}
/*code for timer*/
#timer{
  background-color:#13200B;
  color:white;
  font-size: 45px;
}
#timer-panel{
  text-align:center;
}
#main-timer-panel{
background-color:#F7BB0E;
}
#minutes{
  text-align:center;
}
#seconds{
  text-align:center;
}


/*Code for Word Displayer*/
#word-display{
  background-color:#13200B;
  color:white;
  text-align: center;
  font-size:40px;
  font-family: Righteous;
}
.col-md-7 {
    margin: auto;
}

.col-md-9 {
    margin: auto;
}

.panel-heading {
    font-size: 30px;
    background-color: white;

}
#features{
  background-image: url("../");
  text-align:center;
}
#bonga-word{
  text-align:center;
}

/*code for scoreboard*/
#score-board{
  background-color:#13200B;
  color:white;
  text-align: center;
  text-size: 60 px;
}
#score-no{
  font-size:35px;
  font-weight:bolder;
}
#score-heading{
  text-align:center;
}
#wrong-button{
  margin-left:60%;
  background-color:#EE4414;
}
#correct-button{
  margin-left:;
  background-color: #0B745C;

}
.panel-custom{
  background-color: #F7BB0E;
}
.panel-body{
  background-color: #F7BB0E;
}
.panel-heading{
  background-color: #F7BB0E;
}
textarea{
  resize:none;
}
footer{
  background-color: #0B745C;
  color:gold;
}
#aboutus{
  background-color: #0B745C;
  color:gold;
}
#link{
  background-color: #0B745C;
  color:gold;
}