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

body {
  margin: 0;
  padding: 1.5em 0;

  background: #000000;
  color: #ffffff;

  font-family:
    "MS Gothic",
    "MS PGothic",
    "DotGothic16",
    monospace;

  font-size: 13.5px;
  line-height: 1.35;

  background: url(images/ocean.jpg);
  background-color: #3f0d22;
  background-blend-mode: multiply;
}

.page {
  max-width: 640px;
  margin: 0 auto;
  padding: 1em 1em;

  background: url(images/weird.jpg);
  background-blend-mode: multiply;
  border: 3px solid #fff;
  border-radius: 10px;
  animation: colorChange ease-in-out 20s infinite, scroll ease-in-out 30s infinite;
  
}

@keyframes colorChange {
  0% {
    background-color: #d40961;
  }
  25% {
    background-color: #501e34;
  }
  50% {
    background-color: #d40961;
  }
  75% {
    background-color: #501e34;
  }
  100% {
    background-color: #d40961;
  }
}

@keyframes scroll {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: -3000px 3000px;
  }
  100% {
    background-position: 0 0;
  }
}

.footer {
  max-width: 640px;
  margin: 0 auto;
  padding: 0.2em;
}
.footer p {
  color:#c0c0c0;
  font-size:11px;
  text-align: center;
}

.cool {
  font-style: italic;
  color:#f586b4
}

.header {
  margin-bottom: 1em;
  padding-bottom: 0.5em;
  border: 2px solid #ffffff;
  background: url(images/ocean.jpg);
  background-color: #501e34;
  background-blend-mode: multiply;
  padding: 4em;
  border-radius: 5px;
  text-align: center
}
.header h1 {
  color:#ffffff;
}
.header a {
  color: #ffffff;
}

.header a:hover {
  color:#c0c0c0
}

.container {
  display: flex;
  gap: 1em;
}

.main {
  width:70%
}

.container > .main:only-child {
  width: 100%;
}

.flex {
  display:flex;
  gap: 1em;
  width:100%
}

.third {
  flex: 1 1 1;
  max-width:50%
}

.random-text {
  font-style: italic;
  text-align: center;
  border: 1px solid #fff;
  border-radius: 10px;
  padding: 3px;
  padding-bottom: 5px;
  background-image: url('images/laura.png');
  background-color: #b44575;
  background-blend-mode: multiply;
  max-width: 100%;
}

.project {
  background: #202020;
  padding: 1em;
  border: 3px dashed #b6b6b6;
  border-radius: 0px;
  margin-bottom: 0.8em;
  overflow:auto
}

.project:hover {
  background:#363636
}

.sidebar:hover {
  background:#202020
}

.project p {

  text-align: justify
}

.blocklink {
  color: inherit;
  text-decoration: none;
}


.project ul {
  list-style-type: "> "
}

.project-image {
  float: right;
  margin-left: 1em;
  margin-bottom: 0.5em;
  max-width: 75px;
  border: 2px solid #fff;
  border-radius: 6px;
}

.imagebig {
  max-width: 175px;
}

.project h2 {
  border-bottom: 2px solid #b6b6b6;
  overflow: hidden;
}

.underline {
  overflow: hidden;
  margin-bottom:10px;
}

.project a {
  color:#ffffff
}

.sidebar {
  flex: 30%;
  background: #2b2b2b;
  padding: 1em;
  border:3px dashed #fff;
  border-radius: 0px;
  margin-bottom: 0.8em;
}

.sidebar h1 {
  font-size: 2em;
  font-weight: normal;
  margin: 0 0 0.2em 0;
  border-bottom: 2px solid #ffffff;
  overflow: hidden;
}

.profile-pic img {
  width: 100%;
  height: auto;
  border-radius: 6px
}

.nav {
  margin-bottom: 0.6em;
}

h1 {
  font-size: 2em;
  font-weight: normal;
  margin: 0 0 0.2em 0;
}



h2 {
  font-size: 1.3em;
  margin: 0em 0 0.3em 0;
}

h3 {
  font-size: 1.1em;
  margin: 0em 0 0.3em 0;
}

p {
  margin: 0.35em 0;
}

ul {
  margin: 0.35em 0;
  padding-left: 1.2em;
}

li {
  margin: 0.1em 0;
}

a {
  color: #ff96c4;
  text-decoration: underline;
}