@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap');

body{
    background-color: #440000;
  background-image: repeating-conic-gradient(#000000 0% 25%, transparent 0% 50%);
  background-position: 0 0, 16px 16px;
  background-size: 32px 32px;
}

html,body{
    margin: 0;
    padding: 0;

}

header, main{
    background-image: url(./../img/body-tile2.png);
    background-color: lightblue;
    text-align: center;
    padding: 20px;
    border: 10px solid rgba(0, 0, 0, 0.623);
    border-radius: 5%;
    margin-bottom: 2.5px;
}

header .pfp{
    border-top: 20px solid rgba(0, 0, 0, 0.692);
    border-bottom: 20px solid rgba(0, 0, 0, 0.692);
    border-radius: 2%;
    background-image: url("./../img/20251030_145021.png");
    background-color: rgb(19, 0, 0);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: cover;
    height: 100px;
    width: 1000px;
    background-position: -210px -345px;
    margin: 0 auto;
}

main .main-bodyimg{
    background-image: url("./../img/homesweethome.jpg");
    background-size: auto;
    height: 500px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100%;
}

header h1{
  font-family: "Major Mono Display", monospace;
  font-weight: 400;
  font-style: normal;
  color: white;
  font-style: italic;
  font-weight: bolder
}

header h5{
    font-family: "Play", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: rgb(134, 134, 134);
}

main, footer, h2, h3, h4{
    font-family: "Play", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: white;
}

footer{
        background-image: url(./../img/body-tile2.png);
    background-color: lightblue;
    text-align: center;
    padding: 20px;
    border: 10px solid rgba(0, 0, 0, 0.623);
}

ul.mainnav {
  list-style: none;
  margin: 40px;
  padding: 25px;
  overflow: hidden;
  background-color: #180000;
  display: flex;
  justify-content: space-around;
  border-bottom: 5px solid #441010;
  border-right: 5px solid #0e0000;
  border-top: 5px solid #721515;
  border-left: 5px solid #cc6d6d
}

ul.mainnav li {
  float: none;
}

ul.mainnav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 1px 16px;
  text-decoration: none;
  font-size: 20px;
  font-style: italic;
}

ul.mainnav li a:hover {
  color: rgb(255, 187, 0);
  font-weight: bolder;
}