@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?display=swap&family=Aboreto:ital,wght@0,400;1,400');

* {
  box-sizing: border-box;
}

html,body {
  -webkit-text-size-adjust: 100%;
  width:100%;
  height:fit-content;
  font-family: "Aboreto", cursive;
}
html,
body,
button,
input,
optgroup,
select,
textarea {
  margin: 0;
  line-height: 1;
}
html {
  background-image: url('https://how2hau.github.io/src/bg.gif');
  background-repeat: no-repeat;
  background-size:cover;
  background-attachment:fixed;
  overscroll-behavior: contain;
}
.vin h1 {
text-align:center;
color:#74c3fc;
user-select: all;
font-weight: bolder;
font-size: 110%;
width:100%;
}
.vin {
  background-color: #1d203de0;
  height:75%;
  min-height:fit-content;
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 1%;
  padding: 6%;

}
@media only screen and (max-width: 600px) {
  /*
  .vin {
    
  }
*/
}
.d {
  height:75%;
  min-height:fit-content;
  color: #376D94;
  letter-spacing: 0.075rem;
  width: 100%;
  border:#3B5275 dashed 3px;
  padding: 4%;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}
button {
  text-transform: none;
  overflow: visible;

}
img {
  border-style: none;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
img.cogGif {
  max-height:120px;
  width:auto;
  -webkit-user-drag: none;
}

.icon-bar {
  position: fixed;
  top: 0%;
  width:max-content;
  max-width:420px;
  font-size:1.4vw;
}

.icon-bar a {
  display: block;
  text-align: center;
  padding: .8vw;
  transition: all 0.3s ease;
  color: white;
  font-size: 100%;
  text-decoration: none;
}

.icon-bar a:hover {
  background-color: #000;
  scale:.7;
}
.instagram {
  background: #ee227766;
  color: white;
}

.twitter {
  background: #55ACEE66;
  color: white;
}

.tiktok {
  background: #1f013066;
  color: white;
}
footer {
width:100%;
background-color:navy;
  color:white;
height:80px;
font-size:16px;
font-family:Calibri,Tahoma,arial;
  text-align:center;
  padding:5px;
margin-bottom:-2px;
}
.navbar {
width:100%;
background-color:transparent;
padding:2%;
font-family:Roboto,Arial,sans-serif;
list-style-display:none;
margin:0;
height:fit-content;
}
.navbar li {
list-style-display:none;
display:inline-block;
padding:0;
margin:0;
  float:left;
  padding-left:0.5vw;
  padding-right:0.5vw;

}
.navbar li a {
color:white;
margin:0;
  padding:0;
  font-size:1.2vw;
}
.navbar .active {
background-image:linear-gradient(to top, darkgreen, seagreen);
}