@font-face {
  font-family: 'Olympia';
  src: url(OlympiaScript.ttf);
}

@font-face {
  font-family: 'Artisan';
  src: url(artisan12.otf);
}

html{
    font-size: 62.5%;
}

main {
    font-size: 1.6em;
    font-family: 'Artisan';

}

a, #aboutlink{
  text-decoration: none;
  color: red;
  text-align: center;
  cursor: pointer;

}

a:hover{
    text-transform: uppercase;
    cursor: pointer;
        color: red;

}

section#people{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 20px;
    margin: 0 auto;
    justify-items: center;
}

img {
    width: 100%;
}

header {
    color: red;
    /* width: 100%; */
    margin: 0 auto;
    padding: 20px
}

nav {
    display: flex;
    text-align: center;
    align-items: flex-start;
    justify-content: center;
}

#nav-filters {
    text-transform: uppercase;
    text-align: center;
}

input[type="checkbox"] {
  border: 2px solid #FF0000; /* 2px solid red border */
}

h1{
    font-size: 5em;
    font-family: 'Olympia';
}


.profile-contact{
  color: red;
  border: 1px solid red;
  border-radius: 10px;
  text-align: center;
  padding: 5px;
  cursor: pointer;
 
}

p.profile-contact:hover{
    text-transform: uppercase;
     cursor: pointer;
}

.profile-name{
    display: inline-block;
    margin-right: 10px;
    border-bottom: 1px dotted black;
    padding: 0.5px;
    text-transform: uppercase;
}

.profile-age, .profile-orientation, .profile-pronoun, .profile-availibility{
    display: inline;
    margin-right: 10px;
}

.profile-orientation::after, .profile-pronoun::after, .profile-availibility::after{
    content: '.';
}

section#about{
    width: 350px;
  height: auto;
  border: 1px solid #FF0000;
  color: black;
  padding: 10px;
  position: fixed;
  background-color: white;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: none;
}

.exit {
  display: flex;
  justify-content: end;
}

aside#about-bg{
    background-color: #FF0000;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    opacity: 65%;
    display: none;
}

.Taken{
    position: relative;
}

.Taken::before{
content: '♡' ;
color: red;
font-size: 4em;
position: absolute;
top: 50px;
left: 50px;
transform: translate(-50%, -50%);
}


@media only screen and (max-width: 600px) {
  h1{
    font-size: 2em;
  }
}