@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@400&family=Ubuntu+Mono&family=VT323&display=swap');

body {
    background-color:#afafaf;
    background-image:url('deco/beachbg.jpg');
    background-attachment:fixed;
    background-position:bottom left;
    background-size:cover;
}

.contained {
    width:800px;
    margin:auto;
    margin-top:100px;
    margin-bottom:100px;
    font-family:'Saira Condensed', sans-serif;
    font-size:13pt;
    text-align:justify;
    background:transparent;
}

.main {
    font-family:monospace;
    color:#c9e5ff;
    text-shadow:0px 0px 2px #3072ff;
    margin-left:200px;
}

.windowed {
    margin:0px;
    padding:0px;
    border-radius:10px;
    border:1px solid #3E4F74;
    background-color:rgb(255,255,255,0.4);
    backdrop-filter:blur(10px);
    color:#1A2232;
}

.windowtitle {
    font-family:'Ubuntu Mono', monospace;
    font-size:18px;
    color:#1A2232;
    padding:0px;
    margin:10px 10px 5px 10px;
}

.wbuttons {
    text-shadow:0px 0px 1px #3E4F74;
    text-align:right;
    float:right;
    padding:0px;
    margin:-3px 1px 0px 0px;
}

.innerwindow {
    margin:8px;
    background-color:#F0F0E8;
    border:1px solid #4370AC;
    padding:7px;
}

.about {
    width:450px;
}

.express {
    transform:rotate(-4deg);
    display:inline-block;
    text-decoration:rgb(187, 106, 241) underline wavy;
    text-indent:0px;
    background: #E33B95;
    background: -webkit-linear-gradient(to right, #E33B95 0%, #FFAF54 25%, #00EEFF 50%, #FF892E 75%, #E33B95 100%);
    background: -moz-linear-gradient(to right, #E33B95 0%, #FFAF54 25%, #00EEFF 50%, #FF892E 75%, #E33B95 100%);
    background: linear-gradient(to right, #E33B95 0%, #FFAF54 25%, #00EEFF 50%, #FF892E 75%, #E33B95 100%);
    background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

}

.chibox {
    padding:0px;
    margin:0 auto;
    align-items:center;
}

.chibox img {
    display:block; 
    margin:auto;
}

.stats {
    text-align:center;
    background:transparent;
    margin-top:-40px;
}

.stats span {
    display:inline-block;
    background:#f0f0e8;
    padding: 1px 4px 1px 4px;
    line-height:23px;
    transform:rotate(4deg);
}

.buttonzone {
    width:800px;
    padding:0px;
    margin:20px 0px 20px 0px;
    background:transparent;
    text-align:center;
}

.disczone {
    width:360px;
    height:360px;
    padding:0px;
    margin:0px 10px 0px 0px;
    background:transparent;
}

.disczone img {
    height:160px;
    width:160px;
    margin:5px;
    display:inline;
    text-align:left;
}

.bloglike {
    width:100%;
    vertical-align: top;
    background-color:rgb(255,255,255,0.5);
}

.bloglike span {
    display:inline-block;
    background:#f0f0e8;
    padding: 1px 4px 1px 4px;
    line-height:23px;
}

.mysite {
    width:170px;
    color:black;
    background-color:#F0F0E8;
    font-family:'VT323', monospace;
    font-size:25px;
    line-height:20px;
    word-spacing:-40%;
    text-align:right;
    padding:10px;
    box-shadow: 0px 0px 2px black;
    transform:rotate(-3deg);
}

.linkbacks {
    width:600px;
    text-align:center;
}

.equipped {
    padding:15px;
    margin:10px 13px 10px 0px;
    background:transparent;
    border-radius:10px;
    text-align:left;
}

.equipped span {
    background-color:#f0f0e8;
    padding:1px 4px 1px 4px;
    display:inline-block;
    line-height:23px;
}

.equipped2 {
    padding:15px;
    margin: 0px;
    background:transparent;
    border-radius:10px;
    text-align:left;
}

.equipped2 p {
    padding:0px;
    margin:0px;
}

.checkerback {
    background-color:rgba(240, 240, 232, 0.4);
    background: url('deco/thinchecker.png'), linear-gradient(0deg, rgba(240, 240, 232, 0.4) 0%, rgba(240,240,232,0.7) 100%);
    background-position:center bottom;
    background-repeat:repeat-x;
    backdrop-filter:blur(10px);
    border:1px solid #3E4F74;
}

.blinkies {
    margin:17px 0px 0px 5px;
    justify-content:center;
    text-align:center;
    line-height:10px;
}

.blinkies img {
    width:150px;
    height:20px;
    padding:0px;
    margin:0px;
}

.workstation {
    transform:rotate(-3deg);
}

.cornered {
    width:100px;
    margin:0px 20px 20px 0px;
    font-family:'VT323', monospace;
    color: black;
    text-align:right;
    position:fixed;
    bottom:0px;
    right:0px;
    z-index:100;
}

.backed {
    color:#E33B95;
}

/* utility classes */

h1 {
    font-family: 'VT323', monospace;
    font-size:50px;
    padding:0px; 
    margin:0px;
}

h2 {
    font-family: 'VT323', monospace;
    font-size:30px;
    padding:0px; 
    margin:5px 0px 5px 0px;
}

p {
    margin-top:0px;
    margin-bottom:6px;
}

a {
    color:#05b882;
    text-decoration:none;
}

a:hover {
    color:#4cafff;
    text-decoration:none;
}

hr {
    padding:0px;
    margin-top:30px;
    border: 1px solid #3072ff;
    opacity:0.4;
}

.sidebyside table {
    border-collapse:collapse;
    border:none;
    padding:0px;
    margin:0px;
}

.spin:hover {
    animation: spin 1s infinite linear;
  }
  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

.spun:hover {
    animation: spin 1s infinite linear;
  }
  @keyframes spin {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
  }

.spacer {
    width:100%;
    height:20px;
    background:transparent;
    border:none;
  }

.left {
    text-align:left;
    display:inline-block;
  }

.indented {
    text-indent:30px;
}