<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">body{
    margin:auto;
     background-image: url('https://codehs.com/uploads/0e253db31308c6a75380d79d759c7b20');
   
}

a {
   ;
    font-size:20px;
}
.spacing{
    width:50%;
    font-family:'Courier New';
}


.

h2{
    color:white;
    opacity:1;
}

title{
    color:white;
}
li{
    font-size:40px
}
h3{
    font-family:'Courier New';
}


#centerDiv {
  /* display: flex;
  flex-direction: column;
  align-items: stretch;
  position: absolute; */
  text-align:center;
}
.container{
  display:flex;
  width:75%;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

footer{

}
.flip-card {
  background-color: transparent;
  width: 400px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: ##d4d9d4;
  color: white;
  transform: rotateY(180deg);
}


.bttn{
    
    width:70%;
    border-style: double;
     opacity: 0.5;
}
div.transbox {
  margin: 30px;

  border-style:double;
  opacity: 0.6;
}
div.transbox:hover {
  margin: 30px;
  background-color: #f7e173;
  border: 1px solid black;
  opacity: 0.6;
}

}
.yea{
    color :white;
    background-color: black;
    
}
.yea:hover{
    color:blue;
    background-color: white;
    font-family: Georgia;
    font-size:20px;
    padding:10px;
}


  

.parallax {
  /* The image used */
  background-image: url("https://codehs.com/uploads/5cc6c50bd3330335b8db15c024848c39");

  /* Set a specific height */
  min-height: 700px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
h2 {
    text-align:center;
}

 .line {
            border-bottom: 1px solid white;
            margin-top: 5px;
            width: 100%;
        }
@media only screen and (max-width: 600px) {
 #change {
    width: 250px;
    height: 400px;
  }
 .parallax{
      background-attachment:scroll;
      width:100%;
      height:100%;
 }
 .nav{
     width:100%;
     right: 0;
    left: 0;
 }

  }
}
@keyframes yup{
    from {background-color:yellow}
    to{
}</pre></body></html>