body {
        background-image: url('https://cdn.theatlantic.com/thumbor/Lt5mJ1Dtc1gznJ-_Dvqj7wgCRg4=/25x120:4837x2827/1600x900/media/img/mt/2016/01/crabnebula/original.jpg');
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        }
        body {
        margin: 60px auto;
        width: 90%;
        }
        a {
        text-decoration: none;
        color: rgb(0, 0, 0);
        }
        a:hover {
        text-decoration: underline;
        }
        h1 {
        font-size: 3em;
        }
        p {
        text-decoration: none; 
        font-size: 1.0em;
        line-height: 1.0em;
        color: rgb(255, 255, 255);
        font-family: 'Nunito', sans-serif;
        }
        footer {
        border-top: 1px solid #ffffff;
        font-size: .8em;
        }
        ul.posts { 
        margin: 20px auto 40px; 
        font-size: 1em;
        }
        ul.posts li {
        list-style: none;
        }
        h2 {
        font-family: 'Nunito', sans-serif;
        color: rgb(255, 255, 255);
        }
        ul {
        font-family: 'Nunito', sans-serif;
        color: rgb(255, 255, 255);
        }
        li {
        font-family: 'Nunito', sans-serif;
        color: rgb(255, 255, 255)
        }
        h4 {
        font-family: 'Roboto', sans-serif;
        color: rgb(255, 255, 255)
        }
        a {
        font-family: 'Roboto', sans-serif;
        color: rgb(255, 255, 255);
        }
        div {
        font-family: 'Roboto', sans-serif;
        color: rgb(255, 255, 255)
        }
        {
        box-sizing: border-box;
        }
        /* Set additional styling options for the columns*/
        .column {
        float: left;
        width: 28%
        }
        .row:after {
        content: "";
        display: table;
        clear: both;
        }
        * {
        margin: 0; 
        padding: 0;
        }
        div#banner { 
        position: absolute; 
        top: 0; 
        left: 0; 
        background-color: rgb(94, 94, 94); 
        width: 100%; 
        }
        div#banner-content { 
        width: 340px; 
        margin: 0 auto; 
        padding: 6px; 
        }
     </style>
     body { height: 100%; width: 100%; margin: 0; background-color: #ffffff;; font-family: sans-serif; }
     body { height: 100%; width: 100%; margin: 0; background-color: #ffffff;; font-family: sans-serif; }


@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
.wrapper{
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(-135deg, #ff85f7, #8398ff);
  /* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
  /* clip-path: circle(25px at calc(0% + 45px) 45px); */
  clip-path: circle(25px at calc(100% - 45px) 45px);
  transition: all 0.3s ease-in-out;
}
#active:checked ~ .wrapper{
  clip-path: circle(75%);
}
.menu-btn{
  position: fixed; 
  z-index: 2;
  right: 20px;
  /* left: 20px; */
  top: 20px;
  height: 51px;
  width: 51px;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(-135deg, #ff85f7, #8398ff);
  /* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
  transition: all 0.3s ease-in-out;
}
#active:checked ~ .menu-btn{
  background: #fff;
  color: #8499ff;
}
#active:checked ~ .menu-btn i:before{
  content: "\f00d";
}
.wrapper ul{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  list-style: none;
  text-align: center;
}
.wrapper ul li{
  margin: 15px 0;
}
.wrapper ul li a{
  color: none;
  text-decoration: none;
  font-size: 30px;
  font-weight: 500;
  padding: 5px 30px;
  color: #fff;
  position: relative;
  line-height: 50px;
  transition: all 0.3s ease;
}
.wrapper ul li a:after{
  position: absolute;
  content: "";
  background: #fff;
  width: 100%;
  height: 50px;
  left: 0;
  border-radius: 50px;
  transform: scaleY(0);
  z-index: -1;
  transition: transform 0.3s ease;
}
.wrapper ul li a:hover:after{
  transform: scaleY(1);
}
.wrapper ul li a:hover{
  color: #4158d0;
}
input[type="checkbox"]{
  display: none;
}
.content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  text-align: center;
  width: 100%;
  color: #202020;
}
.content .title{
  font-size: 40px;
  font-weight: 700;
}
.content p{
  font-size: 35px;
  font-weight: 600;
}

@import url('https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap');

body {
background-color: black;
}
button {
  background-color: rgb(63, 63, 63); /* Gray */
  border: rgb(0, 255, 242);
  color: rgb(255, 255, 255);
  border-radius: 8px;
  padding: 15px 32px;
  text-align: center;
  text-decoration: 'Nunito';
  display: inline-block;
  font-size: 16px;
  transition-duration: 0.4s;
  cursor: pointer;
}

button:hover {
  background-color: #e7e7e7;
  box-shadow: 0 15px 32px 0 rgba(0, 81, 255, 0.24), 0 15px 32px 0 rgba(0, 81, 255, 0.24);
} 
input {
  text-align: center;
  display: block;
  margin : 0 auto;
  font-family: "Roboto";
  color: black;
  font-weight: 15px;
  width: 300px;
  height: 20px;
  animation-name: textthing;
  animation-iteration-count: infinite;
  animation-duration: 2s;

}

#cont {
  animation-name: anim;
  animation-duration: 2s;
  padding: 200px 0;
}

h1 {
  font-family: "Roboto";
  text-align: center;
  color: white;
  animation-name: colorthing;
  animation-duration: 3s;
 
}

@keyframes anim {
  0% {
    opacity: 0%;
  }

  100% {
    opacity: 100%;
  }
}

@keyframes colorthing {
  0% {
    color: skyblue
  }
  50% {
    color: blue;
  }

  100% {
    color: white;
  }
}

@keyframes textthing {
  0% {
    color: skyblue;
  }
  50% {
    color: blue;
  }

  100% {
    color: rgb(51, 51, 51);
    transition-duration: 1s;
  }