@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,400,0,0&icon_names=home");
@font-face {
  font-family:ComicRelief;
  src: url(/font/ComicRelief-Bold.ttf);
  font-weight:bold;
}


.header{
  color:white;
  font-size:150%;
  text-shadow: 3px 3px 2px rgba(54, 51, 60, 0.3);
  border:0px solid white;
}

Body{
  margin:5%;
  height:auto;
  background: powderblue url("image/windowsstock1.jpg") center center/cover no-repeat fixed;
  background-size:cover;
  text-align:center;
  font-family:"ComicRelief";
  color:white;
  border: 0px solid white;
}
.content {
    display: inline-block;
    margin:10%;
    padding:6px;
    background-image: linear-gradient(175deg, rgba(64, 224, 208, 0.3), rgba(0, 80, 0, .7));
    box-shadow: -10px -10px 30px inset rgba(0, 128, 0, 0.5), 10px 10px 30px inset rgba(184, 227, 244, 0.7), 4px 4px 1px 1px rgba(0, 0, 180, 0.3);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border-radius: 20px;
}
.vertical-list {
    list-style-type: none;
    padding:0;
    width:100px;
    border:0px solid white;

}
    .vertical-list li {
        display: inline-block;
        margin:5px;
}
.horizontal-list {
    list-style-type: none;
    padding:0;
}
    .horizontal-list li{
        display: inline-block;
        margin:1px;
}

.button {
    display:block;
    text-decoration: none;
    background-image: linear-gradient(-125deg, rgba(64, 224, 208, 0.4), rgba(0, 128, 0, .6));
    box-shadow: 5px 5px 6px inset rgba(0, 128, 0, 0.75), 2px 2px 1px 1px rgba(0, 0, 180, 0.3);
    border-radius: 6px 6px 6px 6px;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    text-align:center;
    font-size: 15px;
    color:white;
    text-shadow: 2px 2px 1px rgba(54, 51, 60, 0.3);
    padding: 7px;
    width:auto;
    cursor:pointer;
}
    .button:hover {
        background-color: lime;
        color:darkgreen;
        font-size:101%;
}
.topleft {
    padding:8px;
    list-style-type:none;
    position:fixed;
    top:-16px;
    left:-4px;
    width: auto;
    background-image: linear-gradient(175deg, rgba(64, 224, 208, 0.5), rgba(0, 128, 0, .8));
    box-shadow: -5px -5px 6px inset rgba(0, 128, 0, 0.75), 2px 2px 4px 2px rgba(0, 0, 180, 0.3);
    border-radius: 0px 0px 20px 0px;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index:1;
}
    .topleft li {
        float: left;
}
        .topleft li a {
            color:white;
            display: block;
            font-size: 16px;
            padding: 4px 6px;
            text-decoration: none;
          }
            .topleft li a:hover {
                color: darkgreen;
                font-size:101%;
}
.bottomright {
  position:fixed;
  bottom:0px;
  right:0px;
  width: 250px;
  background-image: linear-gradient(-125deg, rgba(64, 224, 208, 0.4), rgba(0, 128, 0, .6));
  box-shadow: 5px 5px 6px inset rgba(0, 128, 0, 0.75), -2px -2px 4px 2px rgba(0, 0, 180, 0.3);
  border-radius: 20px 0px 0px 0px;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index:1;
}