@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

* {
  font-family: "Open Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: 300ms;
}

:root {
  animation: rgbBorder 3s linear infinite;
}

body {
  background-color: #0f0f0f;
  margin: 0;
  padding: 20px;
}

main,
header {
  padding: 0em 2em;
}

main {
  background-color: #141414;
}

h1, h1, h3, h4, h5, h6 {
  color: #ffffff;
}

header {
  display: flex;
  align-items: center;
  border-radius: .4em;
  justify-content: space-between;
  background-color: #0d0d0d;
  border-width: 20px solid #ffffff;
}

.header-buttons {
  display: flex;
  gap: .5em;
}

.header-buttons a {
  padding: .2em .5em;
  background-color: #000000;
  text-decoration: none;
  color: #ffffff;
  border: 1px solid var(--Bcolor);
  border-radius: 7px;
  animation: rgbBorder 5s infinite linear;
}

.header-buttons a:hover {
  background-color: #111111;
  font-weight: bold;
  border-color: color-mix(in srgb, var(--Bcolor) 70%, black);
}

.topping {
  border: 1px solid #ffffff;
  border-radius: 13px;
  animation: rgbBorder 5s infinite linear;
}

.introduction,
h1, h1, h3, h4, h5, h6 {
  color: #ffffff;
  gap: 5;
}

.introduction {
  align-items: center;
}

.start-page {
  display: flex;
  flex-direction: row;
}

.sec-projects a {
  padding: .2em .5em;
  animation: rgbButton 5s infinite linear;
  border-radius: 7px;
  text-decoration: none;
  color: #000000;
}

.sec-about a {
  padding: .2em .5em;
  background-color: #151515;
  text-decoration: none;
  color: #ffffff;
  border: 1px solid var(--Bcolor);
  border-radius: 7px;
  animation: rgbBorder 5s infinite linear;
}

.ifprojects {
  padding: 30px;
}

.projects {
  border-radius: 10px;
  padding: 20px 0px;
  align-items: start;
  margin: 15px;
}

h9 {
  color: #0f0f0f;
}

h8 {
  color: #0d0d0d;
}

.content {
  padding: 5px 1px;
}

.project {
  border: 1px solid #ffffff;
  background-color: #0d0d0d;
  margin: 15px;
  border-radius: 13px;
  padding: 16px 20px;
  align-items: center;
  animation: rgbBorder 5s infinite linear;
}

.Project-buttons a {
  padding: .2em .5em;
  background-color: #000000;
  border-radius: .3em;
  text-decoration: none;
  color: #000000;
  border-radius: 7px;
  animation: rgbButton 5s infinite linear;
}

.text {
  padding: 1px 1px;
}

.languages {
    display: flex;
    align-items: center;
    padding: 10px;
}

.technology {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
}

.python {
  background-color: #3572a5;
}

.csharp {
  background-color: #178600;
}

.makefile {
  background-color: #427819;
}

.assembly {
  background-color: #6e4c13;
}

.c {
  background-color: #555555;
}

.html {
  background-color: #ff5733;
}

.css {
  background-color: #6a0dad;
}

.js {
  background-color: #f7df1e;
}

.shell {
  background-color: #89e051;
}

.cpp {
  background-color: #f34b7d;
}

.cmake {
  background-color: #da3434;
}

.other {
  background-color: #ffffff;
}

.logo {
  height: 35px;
}

.about {
  border-radius: 10px;
  padding: 10px 0px;
  align-items: start;
  margin: 20px;
}

.about,
p {
  color: #ffffff;
}

.Download {
  padding: 10px 2px;
}

.Download a {
  padding: .2em .5em;
  background-color: #151515;
  border-radius: .3em;
  text-decoration: none;
  color: #000000;
  border-radius: 7px;
  animation: rgbButton 5s infinite linear;
}

footer {
  text-align: center;
  align-items: center;
  padding: 10px 0;
  color: #050505;
}

footer a {
  color: #bce3ff;
  /*animation: rgbText 5s infinite linear;*/
  text-decoration: none;
}

@media (max-width: 690px) {
  main,
  header {
    padding: 1em 2.5em;
  }

  header {
    flex-direction: column;
  }
}

.rgb-text {
  font-weight: bold;
  font-size: 2em;
  animation: rgbText 5s infinite linear;
}

footer,
.footer {
  height: 35px;
  margin-bottom: 20px;
}

footer,
.contact {
  color: #ffffff;
  
}
.contact a {
  animation: rgbText 5s infinite linear;
  text-decoration: none;
}

span {
  color: #ffffff;
}

.flex {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 1px 5px;
}

@keyframes rgbText {
  0%   { color: #ff7979; }
  33%  { color: #a3ffa3; }
  66%  { color: #9e9eff; }
  100% { color: #ff7979; }
}

@keyframes rgbButton {
  0%   { background-color: #ff7575; }
  33%  { background-color: #a4ffa4; }
  66%  { background-color: #9797fb; }
  100% { background-color: #ff7575; }
}

@keyframes rgbBorder {
  0%   { border-color: #ff5757; --Bcolor: #ff5757; }
  33%  { border-color: #5eff5e; --Bcolor: #5eff5e; }
  66%  { border-color: #5757f9; --Bcolor: #5757f9; }
  100% { border-color: #ff5757; --Bcolor: #ff5757; }
}