@media screen and (max-width:1600px) {
    h1 {
	font-size: 175%;
  }
}
@media screen and (max-width:1440px) {
    .container {
	width: 90%;
  }
}
@media screen and (max-width:1024px) {
    h1 {
	font-size: 156%;
  }
}
@media screen and (max-width:980px) {
    .highlight {
	font-size: 113%;
  }
}
@media screen and (max-width:900px) {
    .container {
	width: 98%;
  }
    .top-button {
	padding: 1%;
  }
}
@media screen and (max-width:768px) {
    header {
	background: linear-gradient(90deg, #000 35%, #663399);
  }
    .row {
        display: block;
    }
}
@media screen and (max-width:720px) {
    .highlight {
	font-size: 100%;
  }
}
@media screen and (max-width:640px) {
    body {
        font-size: 88%;
    }
    header {
	background: #000;
  }
    .contact-top {
	display: block;
	text-align: center;
  }
    .top-button {
	font-size: 100%;
  }
    .logo {
        text-align: center;
    }
    .goto-button {
	padding: 4% 4%;
  }
    
}
@media screen and (max-width:480px) {
    h1 {
	font-size: 113%;
  }
    h2 {
	font-size: 113%;
  }
    p {
	padding: 1% 4%;
  }
    .highlight {
	font-size: 88%;
	text-align: left;
  }
    .skills {
        display: block;
    }
    .skills-items {
        background-color: #fff;
        padding: 2%;
        box-shadow: none;
    }
}
@media screen and (max-width:428px) {
    h1 {
	font-size: 100%;
  }
    h2 {
	font-size: 100%;
	padding-left: 4%;
  }
    h3 {
	font-size: 100%;
  }
}
@media screen and (max-width:390px) {
    .site-title {
	text-align: center;
  }
}