@font-face {
  font-family: "Now";
  src: url("https://ferncassette.neocities.org/Fonts/now.regular.otf") format("opentype");
  }
  
.comfortaa-  {
  font-family: "Now", sans-serif;
  font-weight: 500;
  font-style: normal;
  }

body {
  margin: 0;
  font-family: "Now", sans-serif;
  background-color: #3C0D3C;
  background-image: url('/WebBGStarfield.gif'), url("/WebBGV4a.png");
  background-size: 100%;
  background-attachment: scroll, fixed;
  }

.wrapper {
  width: 900px;
  margin: 0 auto;
  }

.sidebar-img, .footer, .title, .links, .box, .sidebox, .midbox, .mainbox, .titlebox {
  margin-top: 15px;
  }

.midbox, .mainbox {
  margin-bottom: 15px;
  }

.box {
  background: rgb(42,0,42,0.7);
  color: white;
  border-top: 2px solid #FF7AD1;
  border-left: 2px solid #FF7AD1;
  border-bottom: 2px solid #DE289D;
  border-right: 2px solid #DE289D;
  border-radius: 3px 30px 30px 3px;
  padding: 10px 20px;
  }

.sidebox {
  background: rgb(42,0,42,0.7);
  color: white;
  border-top: 2px solid #FF7AD1;
  border-left: 2px solid #FF7AD1;
  border-bottom: 2px solid #DE289D;
  border-right: 2px solid #DE289D;
  border-radius: 30px 3px 3px 30px;
  padding: 10px 20px;
  }

.midbox {
  background: rgb(42,0,42,0.7);
  color: white;
  border-top: 2px solid #FF7AD1;
  border-left: 2px solid #FF7AD1;
  border-bottom: 2px solid #DE289D;
  border-right: 2px solid #DE289D;
  border-radius: 3px 3px 3px 3px;
  padding: 10px 20px;
  }

.mainbox {
  background: rgb(42,0,42,0.7);
  color: white;
  border-top: 2px solid #FF7AD1;
  border-left: 2px solid #FF7AD1;
  border-bottom: 2px solid #DE289D;
  border-right: 2px solid #DE289D;
  border-radius: 3px 30px 30px 3px;
  padding: 10px 20px;
  }

.smolbox {
  background: rgb(31,0,31,0.7);
  color: white;
  border-top: 1px solid #FF7AD1;
  border-left: 1px solid #FF7AD1;
  border-bottom: 1px solid #DE289D;
  border-right: 1px solid #DE289D;
  border-radius: 3px 3px 3px 3px;
  padding: 10px 20px;
  }

.corrubox {
  margin: auto;
  background: #000;
  color: #ff00ff;
  width: 150px;
  border: 1px solid #ff00ff;
  padding: 10px 20px;
  margin-left: 15px;
  }

.corruimage img {
  margin-left: 290px;
  border: 1px solid #ff00ff;
  border-radius: 50px;
  background: rgb(0,0,0,0.85);
  }

.sidebar-image img {
  border-top: 2px solid #FF7AD1;
  border-left: 2px solid #FF7AD1;
  border-bottom: 2px solid #DE289D;
  border-right: 2px solid #DE289D;
  border-radius: 30px 3px 3px 30px;
  }

.titlebox img {
  background: rgb(31,0,31,0.7);
  border-top: 2px solid #FF7AD1;
  border-left: 2px solid #FF7AD1;
  border-bottom: 2px solid #DE289D;
  border-right: 2px solid #DE289D;
  border-radius: 3px 30px 30px 3px;
  }

iframe {
  border-top: 1px solid #FF7AD1;
  border-left: 1px solid #FF7AD1;
  border-bottom: 1px solid #DE289D;
  border-right: 1px solid #DE289D;
  border-radius: 1px;
  }

.title, .links, .footer {
  text-align: center;
  }

h1, h2, h3 {
 text-align: center;
 color: #DE289D;
  }

.aligncenter {
 text-align: center;
  }

textarea {
resize: vertical;
background-color: #301d30;
color: white;
  }

.rainbow {
animation: 6s infinite rainbow;
  }

@keyframes rainbow {
 0% { color: red; }
 25% { color: yellow; }
 50% { color: green; }
 75% { color: blue; }
 100% { color: magenta; }
 }

a, .links {
  color: #18C4CA;
  }

.links ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  }

.links li {
  display: inline-block;
  margin-left: 5px;
  }

.sidebar img {
  max-width: 100%;
  height: auto;
  }

.sidebar {
  width: 200px;
  float: left;
  }

.sidebar-image {
  border: 0px solid;
  }

.sidebar-image img {
  display: block;
  }

.main-wrapper {
  margin-left: 225px;
  }

.main {
  columns: 2;
  column-gap: 15px;
  }

.main .box {
  display: inline-block;
  }

.single-column {
  columns: 1;
  }

.footer {
  margin-bottom: 15px;
  }

@media(max-width:915px) {
  .wrapper {    
    width: 95%;
    }

  .main-wrapper {
    width: calc(100% - 225px);
    }
  }

@media (orientation: portrait), (max-width: 480px) {
  .wrapper {
    width: 100%;
    }

  .main-wrapper, .sidebar, .footer {
    margin: 0 auto;
    width: 90%;
    }

  .sidebar {
    float: none;
    display: block;
    }

  .sidebar-image {
    margin: 0 auto;
    width: 33%;
    margin-top:25px;
    }

  .sidebar .sidebar-image img {
    width: 100%;
    }

  .footer {
    margin-bottom: 15px;
    }

  }