@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@500&display=swap");

* {
  /* tells the browser to account for any border and padding in the 
    values you specify for an element's width and height. If you set an 
    element's width to 100 pixels, that 100 pixels will include any border or
    padding you added, and the content box will shrink to absorb that extra width.     */
  box-sizing: border-box;
}

:root {
  --nav-color: #3b72b5;
  --nav-text: #fff;
  --primary-color: #fdfdfd;
  --secondary-color: #abc4aa;
  --hover-color: #000000;
  --hover-bgcolor: yellow;
}


html {
  font-size: 82%;
}

body {
  
  padding: 0;
  margin: 0;

  background-color: var(--primary-color);
  
  
  /* overflow-x: hidden;
  overflow-y: hidden; hides scrollbar but then you can't scroll !? */
}


*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@100..900&display=swap');
@font-face{
  font-family: 'KumbhSans-SemiBold', sans-serif;
  src: URL('fonts/KumbhSans-SemiBold.ttf') format('truetype')
}


a {
  text-decoration: none;
}

.menu-container {
  /* background-color: var(--nav-color); */
  background: linear-gradient(0, white, #3b72b5);
  font-size: 1.2rem;
  font-family: "KumbhSans-SemiBold", sans-serif;
  height: 70px;
  /* min-width:100%; */
}

.header {
  background-color: var(--nav-color);
  height: 70px;
}

.navbar {
  display: flex;
  width: 90%;
  margin: auto;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* .navbar a {
  color: var(--nav-text);
}
.navbar a:hover {
  color: var(--secondary-color);
  background: #00137F;
}  */

.navbar ul {
  display: flex;
}


.menu-container .navbar {
  justify-content: space-between;
}

.menu-container .navbar ul li {
  padding: 5px;
  margin: 0 10px;
}

.navbar ul li {
  list-style-type: none;
}


.navbar li a {
  background: rgb(22, 101, 166);
  color: black;
  padding:0.6rem;
    
}

.navbar li a{
  color: white;
  border-radius: 4px;
}
.navbar li a.active{
  background-color: darkblue;
  color: yellow;
  
}
.navbar li a:hover{
  background-color: #4c8ee0;
  color: rgb(255, 237, 73);
}


.home{
  display:block;
}
.hero{
  display:block;
  width:95%;
  /* border:1px dashed red; */
  margin:auto;
  /* margin-bottom:16rem; */
}
.hero img{
  /* object-fit:cover !important; */
  width:100%;
}
.sims{
  font-family: 'KumbhSans-SemiBold', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 2.5vi;
  padding-left:14rem;
}
.tagline{
  font-family: "KumbhSans-SemiBold", serif;
  font-size: 2.5vi;
}

.topline{
  display:flex;
  /* margin:1rem; */
  margin-left:1rem;
  padding:0;
  width:90%;
  /* background-color:#caa6cf; */
  height:4rem;
  padding-bottom: 1rem;
  border-bottom: 5px solid #00137F;
}

.topline img{
  display:inline-block;
  /* width:10%; */

}
.about{
  width:85%;
  font-family: "KumbhSans-SemiBold", serif;
  font-size: 2.5vi;
  text-align: justify;
  padding-top: 1rem;
  padding-left:2rem;
  margin-bottom: 1rem;
  
}
.about-lower{
  width:85%;
  border:2px solid red;
  font-family: "KumbhSans-SemiBold", serif;
  font-size: 3.5vi;
  text-align: justify;
  padding-left:2rem;  
  
}

.about-flex{
  width:85%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.about-flex-left{
  color: black;
  /* background-color: #3D52D5;
  color: white; */
  padding:2rem;
}
.about-flex-left ul{
  padding:1.5rem;
  list-style-type: none;
  font-size: 1.7vi;
}

.about-flex-colheader{
  color: black;
  background-color: white;
  font-size: 2.5vi;
  border-bottom: 3px solid black;
}

.about-flex-right{

  color: black;
  /* background-color: #d58e3d; */
  /* color: white; */
  
  padding:2rem;
}
.about-flex-right ul{
  font-size: 1.5vi;
  padding:1.2rem;
  list-style-type: none;

}
.about-item{
  padding-bottom:1rem;
}

.con-note{
  color: black;
  
  text-align: center;
  font-size: 1.5vi;
}



.resp-nav{
  margin-top:1rem;
  display:flex;
  flex-direction: column;
  text-align: center;
  font-size: 2.7rem;
  justify-content: space-between;
  display:none;

}

.resp-nav-home{   /*This is for non-home pages to navback to home */
  margin-top:0rem;
  margin-bottom: 2rem;
  display:flex;
  flex-direction: column;
  text-align: center;
  font-size: 2.7rem;
  justify-content: space-between;
  display:none;

}
.resp-navlink{
  /* border:4px solid black; */
  padding:5rem 0rem 1rem 0rem;
  flex: 1;
}
.resp-navlink.active{
  /* border:4px solid black; */
  padding:5rem 0rem 1rem 0rem;
  flex: 1;
  
}
.resp-navlink a{
  background-color: white;
  color: blue;
  font-weight: bold;
  font-family: sans-serif;
  border:3px solid black;
  padding:2rem;
}

.resp-navlink a.active{
  color:white;
  background-color: #3b72b5;
}


.dcard{
  
  margin-left:3rem;
  width:80%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  padding-top:1rem;
  padding-bottom: 0.5rem;
  border-bottom:2px dashed gray;
}

.dcard-left{
  /* width:25%; */
  border: 0px solid black;
  flex:0 0 auto;
  width:500px;

}
.dcard-left img{
  width:100%;
  min-width:518px;
 
}
.dcard-left img.nondev{
  filter: grayscale();

 
}
.dcard-right{
  margin-left:3rem;
  padding:1.1rem;
  display: flex;
  flex-direction: column;
  /* border:1px dashed red; */
  width:70%;
}
.dcard-right-header{
  font-size: 2em;
  /* margin-bottom:1.1rem; */
  text-align: center;
  background-color: rgb(49, 49, 106);
  color:antiquewhite;
  padding:0.8rem;
}
.dcard-right-header-nondev{ 
  font-size: 2em;
  /* margin-bottom:1.1rem; */
  text-align: center;
  background-color: gray;
  color: white;
  padding:0.8rem;
}
.dcard-right-header-indev{ 
  font-size: 2em;
  /* margin-bottom:1.1rem; */
  text-align: center;
  background-color: green;
  color: white;
  padding:0.8rem;
}
.dcard-right-text{
  font-size: 1.5em;
  margin-bottom:1.7rem;
}
.dcard-right-downloads{
  display:block;
  
  
}
.dcard-right-downloads a{
  
  background-color: #abc4aa;
  border:2px solid #abc4aa;
  border-radius:4px;
  font-size: 1.75rem;
  padding: 0.5rem;
}
.dcard-right-downloads a:hover{
  color:black;
  border:2px solid blue;
  
}

.downloads{
  display:flex;
  flex-direction: column;
  font-size: 36px;
  margin-left: 2em;
  width:80%;
  border-bottom: 2px solid green;
  margin-bottom:3rem;
}

.downloads-text{
  margin-left:2rem;
  font-size: 24px;
  margin-bottom:1rem;
}

.downloads-text-emph{
  margin:2rem;
  padding:1rem;
  font-size: 24px;
  background: rgb(251, 150, 150);
  color:black;
}

.downloads a{
  color: blue;
  border: 3px solid transparent;
}
.downloads a:hover{
  color: black;
  border: 3px solid blue;
  background:#4c8ee011;
}

.dl-icon{
  width:25px;
}



@media (max-width: 640px) {

  .navbar-title{
    display: none;
  }
  .navbar{
    justify-content: center;
    align-items: center;
    align-content: center;
    margin:auto;
  }
  .sims{
    display: block;
    font-size: 5vi;
    padding-left:0;

  }  

}

@media (max-width: 400px) {

  .navbar, .sims, .menu-container, .about-flex, .dcard-left{
    display: none;
  }

  .resp-nav, .resp-nav-home{
    display:flex;
  }

  .about{
    font-size: 7vi;
  }

  .dcard-right{
    width:100%;
  }




}