body {
  font-family: Tahoma;
  padding: 0;
  margin: 0;
  background: #DBF5FC;
  overflow-x: hidden;
  box-sizing: border-box;
}

* {
  box-sizing: border-box;
}


.container {
	width: 80%;
  margin: auto;
	display: flex;
	flex-wrap: wrap;
	padding: 5px;
  gap: 2px;
  background: white;
  box-shadow: 10px 10px darkgrey;
}

.sidebar {
  flex: 1 1 2%;
  border-right: solid #ccc 1px;
  padding: 3vh;
}
.full {
  flex: 1 1 100%;
  
  padding: 3vh;
}
.half { 
  flex: 1 1 40%; 
  padding: 3vh;
}
.avatar {
  width: 60%
}

.site {
  width: 100%;
  background-color: #dbf5fc;
opacity: 0.8;
background-image:  repeating-radial-gradient( circle at 0 0, transparent 0, #dbf5fc 10px ), repeating-linear-gradient( #9dd7e655, #9dd7e6 );
  padding: 1em;
}

.navi {
  display: flow;
  width: 100%;
  padding-left: .2em;
  padding-right: .4em;
  background: linear-gradient(0deg,rgba(204, 204, 204, 1) 0%, rgba(238, 238, 238, 1) 100%);
  margin: 0;
  box-sizing: border-box;
}

.wrapd {
  display: flex;
  flex-direction: column;
}

textarea {
  resize: none;
}

button {
  background: linear-gradient(0deg,rgba(204, 204, 204, 1) 0%, rgba(238, 238, 238, 1) 100%);
  width: 10em;
}

h1 {
  font-family: monospace;
}

h3 {
  color: grey;
}

.nav {
  font-family: helvetica;
}

.nav a {
     color: inherit;
  text-decoration: underline;
}

/* made to deal with the freaking navbar AHHH! */
/* also the contact add connection whatnot uses this so careful */
.otherstuff {
  display: inline;
}
.userinfo {
  float: right;
}


/* media query (SCARY) */

@media (max-width: 600px) {
  .avatar {
    width: 100%;
  }

  .site {
    width: 100%;
  }

  .navi {
    width: 100%;
  }

  .navi p {
    font-size: 1.3em;
  }

  .otherstuff {
    display: block;
    text-align: center;
  }

  .userinfo {
    float: none;
    display: block;
    text-align: center;
    margin-top: 50px;
  }

  .container {
    flex-direction: column;
    width: 100%;
    font-size: 1.2em;
    box-shadow: 0px 10px darkgrey;
  }

  .tab label {
    padding-bottom: 5px;
  }

  .content {
    height: 40vh;
  }

  .content img {
    width: 15em;
    float: none;
  }
}