@font-face {
  font-family: 'NewspaperCutout';
  src: url(fonts/NewspaperCutoutWhiteOnBlac-Rg.ttf);
}
@font-face {
  font-family: 'Old Press';
  src: url(fonts/Old Press.ttf);
}
html, body {
    max-width: 100%;
    overflow-x: hidden;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

img {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome, Safari, Edge */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* IE 10+ */
     user-select: none;           /* Standard syntax */
     position: relative;
    } 

:root {
  
  --article-text-color:#000000;
  --article-heading-color:#000000;
  --nav-link-color:#000000;

  .frutiger-aero-button {
  
  padding: 5px 15px;
  max-width: 5px 15px;
  width: auto;
  border: #333;
  border-radius: 8px; 
  font-family: 'Old Press'; 
  font-size: 1.1em;
  color: #000000; 
  top: 200px;
  left: 475px;
  cursor: pointer;
  position: relative; left: 600px;top: 120px; 
  z-index: 1;
  overflow: hidden; 

 
  background: linear-gradient(to bottom, #e0e0e0, #3e3e3e); 
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);


  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to bottom, rgb(255, 255, 255), transparent); 
    border-radius: 8px 8px 0 0; 
  }

  /* Hover Effect */
  &:hover {
    background: linear-gradient(to bottom, #c0c0c0, #a0a0a0); 
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3); 
  }

  /* Active/Click Effect */
  &:active {
    background: linear-gradient(to bottom, #a0a0a0, #808080); 
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); 
  }
}
}
html, body {
  background-image: url(https://file.garden/aFykU6ln4i5zYt3T/neocities/viande%20dot%20com%20bg%20better.png);
  background-repeat: no-repeat;
  background-position: top;
  background-size: 50% 50%;
  background-color: #000000;
  padding:0;
  margin:0;
}
body {
  font-size:20px;
}
body a {
  color:var(--nav-link-color);
}

header, nav {
  max-width:100%;
}
aside {
  width:250px;
  margin-top:30px;
}
.flex {
  display:flex;
  max-width:900px;
}
nav {
  height:auto;
  margin-bottom:10px;
  background-color:var(--nav-bg);
}
header {
  max-height:200px;
  height:200px;
  background-color:var(--header-bg);
  background-image:url('https://learn.sadgrl.online/wp-content/uploads/2022/02/skyline-banner.png');
  background-repeat:repeat-y;
  background-size:600px;
  background-position:fixed;
}
main {
  width:100%;
  margin-left:10px;
  
}
section {
  margin-bottom:10px;
  color:var(--sidebar-text-color);
}
article { 
  margin-bottom:5px;
  background-color:var(--article-bg);
  color:var(--article-text-color);
  padding:5px;
}
.subtitle {

  position: relative;
  top: 90px;
  left: -40px; 
}
.links {
  list-style-type:none;
  padding-left:0;
}
.links li {
  background-color:var(--nav-bg);
  border:1px solid var(--border-color);
  margin-bottom:3px;
}
.links li a {
  text-decoration:none;
  color:inherit;
}
.nav {
  margin-top:20px;
  margin-left:450px;
}
.nav li {
  display:inline-block;
  padding-left:30px;
}
.nav li a {
  text-decoration:none;
  text-transform:lowercase;
  color:var(--nav-link-color);
}
.left-sidebar {
  margin-left:525px;
}
.subtitle {
  color: #000000;
}
article .subtitle {
  text-transform:lowercase;
  font-size:16px;
  color:var(--article-heading-color);
  margin-top:10px;
  margin-left:5px;
  margin-right:5px;
  margin-bottom:10px;
  
}
nav {
  border:2px solid var(--darker-border-color);
  border-left:none;
  border-right:none;
}
footer {
  max-width:800px;
  text-align:center;
  color:var(--sidebar-text-color);
}
footer a{
  color:var(--navbar-link-color);
}
@media only screen and (max-width: 800px) {
  .flex {
    flex-wrap:wrap;
  }
  aside {
    display:flex;
    width:100%;
    margin-left:20px;
    margin-right:20px;
  }
  aside > section {
    margin-right:10px;
  }
  .nav {
    margin-left:0 !important;
    margin-right:50px;
  }
  .nav li {
    padding-bottom:5px;
  }
}

h1 {
  font-family:'newspapercutout';
  text-align: left;
  position: relative;
  top: -20px;
  left: 400px;
  
}

ul
  li {
  font-family: 'old press' ;
  font-size: xx-large;
  
  
}