* ::before,
::after{
  box-sizing:border-box;
  margin:0;
  padding:0;  
  overflow-wrap: break-word;
}


body{
  background-color:#303841;
  color:white;
  margin-left:1%;  
  
}



/*keycloack navigation menu*/

#nav-bar{  
  position:fixed;   
  top:0;
  left:0;
  width:19vw;
  height:100vh;
  background-color:brown;  
  display:flex;
  flex-direction: column;   
  align-items:left;
  padding-left: 1vw;
  z-index:3;
  color:silver;
  font-size:1.5rem;
  
}


#nav-bar a{
  padding-bottom:5vh;
  padding-left: 0;
  margin-left: 0;
}

#nav-bar a:hover{
    background-color:white;
    color:black;  
    cursor: pointer;

}

.nav-link{
  color:white;
  text-decoration: none; 
}

#header-img{
  width: 20vw;  
  padding-bottom: 10vh;
  margin-left: -.5em;
  
  
  
  

  
}

/*watch stufff*/
#watch{
  background-color:blue;
  border:4px solid black;
  width:15em;
  height:15em;
  position:absolute;
  left:50%;
  top:15%;
  border-radius:100%;
  }
  
  .timer{
  background-color:white;
  width:4px;
  height:50%;
  position:absolute;
  top:0%;
  left:50%;
  transform-origin: 40% 100%;
  animation: rotation 3600s linear infinite;
  }
  
  #minute_stick{
      background-color:white;
      width:0.5px;
      height:50%;
      position:absolute;
      top:0%;
      left:50%;
      transform-origin: 40% 100%;
      animation: rotation 3600s linear infinite;
      animation: rotation 60s linear infinite;
  }
  @keyframes rotation{ 
      0%{
          transform: rotate(0deg);
      }
      100%{
          transform: rotate(360deg);
      }
  }
  
  .hour_numbers{
      position:absolute;
      top: 50%;
      left: 50%;
      color:white;
  }
  
  
  
  #three{
    top: 35%;
    left: 90%;
  }
  
  #six{
    top: 78%;
    left: 46%;
  }
  
  
  #nine{
    top: 35%;
    left: 6%;
  }
  
  
  #twelve{
    top: -6%;
    left: 46%;
  }
  
/*watch stuff ends*/



/*email submit shit*/
#signup{
  padding-top: 10em;;
  display:flex;
  flex-direction: column;
  align-items:center;
  margin-top:15%;
  margin-bottom:2%;
}

#form label, #form #email {
  margin-top:1em;
  background-color:silver;
  color:black;
  font-size:2rem;
}

#form #email{
display:flex;
flex-direction: column;
align-items:center;
margin: .5rem auto;
margin-top:3rem;
width:80%;
font-size:1rem;
}

#form #submit {
display:flex;
flex-direction: column;
align-items:center;
margin: 1em auto;
width:25vw;
font-size:1rem;
}

#form{
  display:flex;
  flex-direction: column;
  text-align:center;
  font-size:1em;
  width:40vw;
  background-color:silver;
}

main{
  width:88%;
  margin-left:11%;
  margin-top: 15%;
}




/*first column*/
.feat{
display:grid;
grid-template-columns:minmax(min-content, max-content) minmax(min-content, max-content)minmax(min-content, max-content);
column-gap:1rem; 
list-style-type: none;
}

/*second section stuff*/
 main #Implementation_Components{
  display:grid;
  grid-template-columns:Auto Auto Auto;
  grid-template-rows:Auto Auto Auto;
}
main #Implementation_Components h2{
  grid-column:1/2;  
  grid-row:1/2;
}
#uml-draw {
  grid-row: 1 / 3;
  grid-column: 2 / 2;
  margin:1em;
}

main #Implementation_Components ol{
grid-column:1/2; 
}


/*third section stuff*/
#Implementation_Steps{
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr; 
  grid-template-rows: 0.05fr 1fr 1fr 1fr;
  row-gap:0;

}

#Implementation_Steps h2 {
    margin-top:3em;
    grid-row: 1;
    grid-column: 1/5;
    

}

 #instructions pre {
 padding:1em;
 border:2px solid white
 }

#instructions{
    margin:0;   
    grid-row:2/5;
    grid-column: 1/1;
    
}
/*docker compose images*/ 
#docker-compose-image{
    margin-top:4em;
    margin-left:1em;
    padding:0;
    grid-row: 2;
    grid-column: 3/5;
    width:80%;
    height:80%    
 }

 #keycloack-image{
    padding:2em;
    grid-row: 3/5;
    grid-column: 3/5;
    width:80%;
    height:60%;   
}

#postgresql-image{
    margin:0;
    margin-top: 2em;
    margin-left:1em;
    padding:0;
    grid-row: 3/5;
    grid-column: 2;

    width:80%;
    height:60%;
  
}

#nginx_image{
    margin-top:4em;
    margin-left:1em;
    padding:0;
        grid-row: 2;
    grid-column: 2;    
    width:80%;
    height:80%;  
}



#youtube_link{
   padding:0;
   margin:2em;
   margin:auto;   
   background-color:purple;
   display:flex;
   align-items:center;
   flex-direction:column;
   
}
#video{  
  width: 66vw;
  height: 40vh;  
}



  
Footer{

  right:0vw;
  background-color:black;
  color:white;
  font-size:1.2em;
  margin-top:25px; 
  padding-top:1vh;    
    height:10vh;
    display:flex;
    flex-direction: row;
    align-items: center;
    text-align: left;    
    font-weight:bold;
    padding-left:0.5em;
  }


@media (max-width: 768px) { 

  .card { 

  padding: 2rem; 

  } 

}