@import url(https://fonts.googleapis.com/css?family=Audiowide);
@import url(https://fonts.googleapis.com/css?family=Orbitron);

body{
    background-color: black;
    margin: 0px auto;
    min-height: 700px;
    position: relative;
    width: auto;
    text-align: center;
    font-family: 'Audiowide',serif;
    color: white;
}

.grid {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 50px;
}

.about{
    border-radius: 25px;
    /* background-color: #111111; */
    padding: 20px;
    width: auto;
    height: auto;
    /* border: 2px solid #333; */
    border: 2px solid #333;
}

.footer{
    font-family: 'Orbitron',serif;
    text-align: center;
    width: 100%;
    bottom: 0 auto;
}

/* Make sure that padding behaves as expected */
* {box-sizing:border-box}

/* Container for skill bars */
.container {
  width: 100%; /* Full width */
  background-color: #202020; /* Grey background */
}

.skills {
  text-align: right; /* Right-align text */
  padding-top: 10px; /* Add top padding */
  padding-bottom: 10px; /* Add bottom padding */
  color: white; /* White text color */
}

.html {width: 50%; background-color: #04AA6D;} /* Green */
.css {width: 30%; background-color: #2196F3;} /* Blue */
.js {width: 5%; background-color: #f44336;} /* Red */
.swift {width: 2%; background-color: #600000;}
.python {width: 25%; background-color: #d0ff00;}
.java {width: 10%; background-color: #ff00dd;}