/* source font: https://github.com/rsms/inter */
@supports (font-variation-settings: normal) {
  :root { font-family: 'Inter var', Helvetia, light; }
}

/*default css*/
body {
  margin: auto;
  background-color: rgb(35, 35, 35);
  height: 100vh;
  display: grid;
  grid-template-areas:
    "nav"
    "scroll";
}

#logo_site {
  margin-top: 2%;
  min-width: 300px;
  width: 25vw;
  max-width: 50vh;
}

h1 {
  font-size: 60px;
  font-weight: normal !important;
}

h2 {
  font-size: 40px !important;
  font-weight: normal !important;
  margin-top: 1%;
  margin-bottom: 1%;
}

h3 {
  font-size: 30px !important;
  font-weight: normal !important;
}

h4 {
  font-size: 20px !important;
  font-weight: normal !important;
}

a {
    color: rgb(66, 140, 77);
    transition-duration: .2s;
}

a:hover {
  color: rgb(66, 140, 255);
  transition-duration: .6s;
}

p a {
  color: rgb(66, 140, 77);
  font-weight: 20px;
  font-size: 25px;
}

li a {
  color: rgb(25, 25, 45);
  text-decoration: none;
  font-weight: 420;
}

p {
  font-size: 20px;
  font-weight: 300;
}

strong{
  font-weight: bold !important;
}

li {
  font-size: 19px;
  font-weight: 300 !important;
}

/*navbar*/
.menuFlex {
  display: flex;
  align-items: left;
}

.menuFlex > div {
  width: 25%;
}

nav {
  background-color: #313236;
  border-radius: 0px 0px 4px 4px !important;
  padding: 0.15em;
  grid-area: nav;
  height: 18px;
}

nav a {
  vertical-align: baseline;
  font-size: 14px;
  text-decoration: none;
  color: lightgray;
  align-items: center;
  justify-content: center;
  display: flex;
}

nav a:hover {
  color: white;
  transition-duration: .6s;
}

/*custom css*/
#top_logo {
  height: 1.25em;
  padding-right: 0.5em;
}

#scroll {
  overflow-y: scroll;
  grid-area: scroll;
}

footer {
  text-align: center;
  background-color: black;
  color: dimgray;
  margin-top: 1em;
}

footer a {
  color: gray;
  text-decoration: none;
}

#home_cont {
  background-image: linear-gradient(to bottom right, rgb(255, 255, 255), rgb(233, 214, 164));
}

#services h2 {
  overflow: hidden;
  background-image: linear-gradient(to bottom right, rgb(233, 214, 164), rgb(235, 235, 235));
}

#tools h2 {
  background-image: linear-gradient(to bottom right, rgb(110, 185, 110), rgb(9, 200, 255));
}

#about .box {
  background-image: linear-gradient(to bottom right, rgb(9, 200, 255), rgb(210, 240, 255));
}

#sbbb .container.box {
  overflow: hidden;
  background-image: linear-gradient(to bottom right, rgb(255, 250, 90), rgb(200, 40, 30));
}

#myip .container.box {
  overflow: hidden;
  background-image: linear-gradient(to bottom right, rgb(155, 250, 90), rgb(090, 150, 70));
}

.container {
  margin-left: 4%;
  margin-right: 4%; 
}

.box {
  position: relative;
  padding-top: 1%;
  padding-bottom: 1%;
  padding-right: 3%;
  padding-left: 3%;
 
  margin-top: 35px; 
  box-sizing: border-box;
  border-radius: 8px;
  box-shadow: 0rem 0rem 2rem rgba(0,0,0,0.775);
  background-color: rgb(220, 220, 220);
  transition-duration: .1s;
}

.container .box:hover {
  background-color: rgb(245, 245, 245);
  box-shadow: 0 0 5px rgba(245,245,245,0.775);
  transition-duration: .8s;
}

small {
  margin-left: 0.5em;
}

.halfFlex {
  display: flex;
  justify-content: center;
  /*flex-direction: column;*/
}

.halfFlex > div {
  width: 50%;
  align-items: center;
  margin: 1%;
  
}

@media only screen and (max-width: 600px) {
  #logo_site {
    margin-top: 5%;
    width: 60vw;
    min-width: 50px;
  }

  p {
    font-size: 1em;
  }

  h1 {
    font-weight: 400 !important;
    transition-duration: .5s;
  }
  .halfFlex {
    flex-direction: column;
  }
  .halfFlex > div {
    width: 100%;
  }
  #top_logo {
    padding-left: 0.5em;
  }
}

.label {
    position: absolute;
    top: 2em;
    right: 2em;
    color: white;
    padding: 0.5em;
    border-radius: 0.5em;
}

.success {background-color: #04AA6D;} /* Green */
.info {background-color: #2196F3;} /* Blue */
.warning {background-color: #ff9800;} /* Orange */
.danger {background-color: #f44336;} /* Red */
.other {background-color: #e7e7e7; color: black;} /* Gray */